Hover over Banner

by PA December 20th 2014, 9:51 pm

This site here: http://ktms.b1.jcink.com/
Has a neat little trick with its banner. When I hover over it, more information appears. Its cleaner than the accordion.
So how do they do it?

by Mati December 20th 2014, 10:59 pm

What is your forum version?

by PA December 21st 2014, 12:44 am

phbb3

by _Twisted_Mods_ December 21st 2014, 7:51 pm

its just an iframe that contains a html page that fades in on mouse over

ill try to write you a script here in a lil while for it

css

Code:: .hover {left:10%;right:auto;top:100px;width: 80%; height: 200px; opacity: 0; transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; position: absolute;} #logo:hover .hover {opacity: 1.0;}

javascript

Code:: $(function(){ $('#logo').append(' <div class="hover"><iframe src="http://help.forumotion.com/t137603-hover-over-banner" width="100%" height="100%"></div> '); });

replace https://help.forumotion.com/t137603-hover-over-banner to your html page you would like to display when hover over the logo

by PA December 23rd 2014, 7:00 pm

Brilliant! It works.

Just a quick follow up, lets say I put the following code (this is just for testing)

Code:: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> </html>

There is a border around the html page when I hover over the banner. Any way to get rid of it?

by _Twisted_Mods_ December 23rd 2014, 7:13 pm

remove style="border:1px solid #c3c3c3;"

by PA December 23rd 2014, 8:05 pm

Where?

by _Twisted_Mods_ December 23rd 2014, 9:05 pm

can u show me a screenshot of what you mean

by Ramdaman December 23rd 2014, 11:02 pm

To remove the style border, find this:

Code:: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas>

And replace it with this:

Code:: <canvas id="myCanvas" width="200" height="100"> Your browser does not support the HTML5 canvas tag. </canvas>

by PA December 23rd 2014, 11:50 pm

Sorry I was not quite clear
You can see the problem on my forum.
Pottersarmy.net

When you hover over my banner here, there is a border around the entire html page. This has nothing to do with the html code I have...

by _Twisted_Mods_ December 24th 2014, 6:36 am

perhaps you mean the iframe border

replace your script with this one

Code:: $(function(){ $('#logo').append(' <div class="hover"><iframe src="http://help.forumotion.com/t137603-hover-over-banner" width="100%" height="100%" frameborder="0"></div> '); });