The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hover over Banner

View previous topic View next topic Go down

Solved Hover over Banner

Post by PA on 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?

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Hover over Banner

Post by Mati on December 20th 2014, 10:59 pm

What is your forum version?

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.forumotion.net/

Back to top Go down

Solved Re: Hover over Banner

Post by PA on December 21st 2014, 12:44 am

phbb3

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Hover over Banner

Post by _Twisted_Mods_ on 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 http://help.forumotion.com/t137603-hover-over-banner to your html page you would like to display when hover over the logo

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Hover over Banner

Post by PA on 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?

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Hover over Banner

Post by _Twisted_Mods_ on December 23rd 2014, 7:13 pm

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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Hover over Banner

Post by PA on December 23rd 2014, 8:05 pm

Where?

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Hover over Banner

Post by _Twisted_Mods_ on December 23rd 2014, 9:05 pm

can u show me a screenshot of what you mean

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Hover over Banner

Post by Ramdaman on 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>

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 96
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Hover over Banner

Post by PA on 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...

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Hover over Banner

Post by _Twisted_Mods_ on 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> ');
});

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Hover over Banner

Post by PA on December 25th 2014, 10:26 am

That works, thank you.
I think you are better at your second job btw.

Anyway, solved.

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

Solved Re: Hover over Banner

Post by _Twisted_Mods_ on December 25th 2014, 11:58 am

lol ty and your welcome

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Hover over Banner

Post by Ange Tuteur on December 26th 2014, 8:33 am

Thanks for the help, twisted.

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum