header hover coding ?

by masqelinus. July 9th 2013, 11:32 pm

Hey there. So, I'm having a little problem here. I was trying to make something like this forum has:

http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?&&CODE=00

if you look at their header, when you hover it some box appear. I know that forum is invision but I'm wondering if this is possible to do with forumotion version phpBB2? I couldn't do it.

I tried with the JS and CSS but I can't find the right code or whatever it is to do that. I was looking on internet and here too, but I didn't find anything useful.

If anyone have idea of how make this? Actually I want just a simple white box on a header when you hover it, for announcements and stuff like that. Smile

by **SLGray** July 10th 2013, 12:27 am

Do you mean when you place your cursor on the forum's logo/banner a menu slides into view from the left side?

by masqelinus. July 10th 2013, 12:31 am

Yes something like that. It doesn't even matter if it's from left or anyother side. It can just appears too.
Like before it's invisible, but when you put your cursor on the logo it's visible. I kind a suck at explaining, I hope you know what I mean. Smile

by kirk July 10th 2013, 4:58 am

wow

there is so many different types of these things you can find.and this one looks pretty cool for sure.
the thing would be to know exactly what it is called?
then search for scripts. sliding menu?. sliding banner menu? they have a whole lot going on with that one. so i am at a loss for words with it. lol

However there are a lot of members that are really good with java scripts here so maybe someone else would be able to point you in the right direction. i will try to fiddle with what i can to see if i can narrow it down. but JS is defiantly not my best department.

this is a long shot, but may be you can try to ask at the invision support. just ask if someone knows what that is called or where you can get a script similar to that. Other then that i will look at what i can and may be another member here will know. but there's the link below if you like to try that.
then if you can get a script or what not. we will help here for whatever you might need help with.

http://community.invisionpower.com/

by masqelinus. July 10th 2013, 10:33 am

actually I didn't even think of sliding menu. shame on me. I'll try to find something about that. and thanks for the link that you gave me. I'll look there if someone knows about it. Smile

although I will wait if anyone here maybe knows how to make it.

by Kiekeboe July 10th 2013, 11:36 am

I don't know if this comes in handy, but this is the complete code(CSS and HTML) of that banner:

Code:: <html><head> <style type='text/css'> /* BOARD & HEADER */ #forumtable { width: 850px; margin: 10px auto 10px 280px; } #header {width: 880px; height: 350px; background-image: url(http://i42.tinypic.com/ergciv.jpg); position: relative; bottom: 0px; left: 0px; overflow: hidden; } #header .contenth1 { position: absolute; left: 25px; top: -350px; ;-webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; } #header:hover .contenth1 { top: 35px; left: 25px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; } #header .contenth2 { position: absolute; left: -880px; top: 65px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; } #header:hover .contenth2 { top: 65px; left: 25px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; } #header .contenth3 { position: absolute; left: 25px; bottom: -350px; ;-webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; } #header:hover .contenth3 { bottom: 30px; left: 25px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; o-transition: 1s all ease-in-out; } .headertext {width: 230px; height: 30px; background-color: #AFA0B3; text-align: center; line-height: 100%; padding: 5px 0px 0px 0px; font-family: 'voltaire', sans-serif; font-size: 25px; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 0px #000;} .acheader {width: 210px; height: 170px; background-color: #fff; padding: 10px; text-align: justify; font-family: tahoma; font-size: 10px; line-height: 100%; color: #000; overflow: auto;} /* LINKBAR */ .linkbar {width: 830px; height: 25px; background-color: #77bde0; font-family: 'grand hotel', sans-serif; font-size: 20px; text-transform: lowercase; word-spacing: 2px; letter-spacing: 2px; color: #fff; line-height: 100%; text-align: center; text-shadow: 1px 1px 0px #000; padding: 5px 0px 0px 0px; } </style> <base href="http://127.0.0.1/" /><script type="text/javascript"> window.google_analytics_uacct = "UA-6782185-1"; </script><script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js"> </script> <script type="text/javascript"> GS_googleAddAdSenseService("ca-pub-4809732198248538"); GS_googleEnableAllServices(); </script> <script type="text/javascript"> GA_googleAddSlot("ca-pub-4809732198248538", "InvisionFree_728x90"); </script> <script type="text/javascript"> GA_googleFetchAds(); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-6782185-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script><script type='text/javascript'></script><link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'></head><body bgcolor='#FFFFFF' leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink='#000000' vlink='#000000'> <div id="forumtable"> <div align="center"> <table cellpadding="0" cellspacing="0"> <tr><td class="borderss"> <table cellpadding="0" cellspacing="0"> <tr><td class="forum"> <table cellpadding="0" cellspacing="0"> <tr><td class="borders"> <div id="header"> <div class="contenth1"> <div class="linkbar"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?" style="color: white;">INDEX</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?act=Search" style="color: white;">SEARCH</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=21592" style="color: white;">RULES</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?act=Members" style="color: white;">MEMBERS</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showtopic=40341" style="color: white;">RANKING SYSTEM</a> </div></div> <div class="contenth2"> <table cellspacing="0" cellpadding="0"> <td valign="top"> <div class="acheader"> <b>april 26, 2013</b> - the staff search has ended, and a huge congrats goes out to everyone that joined the staff team today! thanks to everyone that applied, and if you weren't picked this time, we encourage you to apply next time! also, due to popular demand, a <i>chaptered stories</i> subforum has been added to the writing showcase forum! <p> <b>april 14, 2013</b> - look at this beautiful new skin! just in time for spring, right? a huge thank you to the lovely bella and sara for making such a gorgeous skin. if you have any comments, concerns, or issues with the skin, please post them here in our feedback page! <p> <b>april 9, 2013 </b>- atf is having a staff search! we're looking for every position except for advertising moderators. if you're curious, head on over here for more information and the application. best of luck to all that apply! </div><div class="headertext">announcements</div> </td> <td valign="top"><div style="width: 368px; height: 225px; background-image: url(http://i.imgur.com/OMIFTNh.png); border-left: 1px solid #ccc; border-right: 1px solid #ccc;"> <div style="height: 10px;"></div> <div style="text-align: center; font-family: 'voltaire', sans-serif; font-size: 35px; color: #000; line-height: 100%; letter-spacing: 2px; padding: 5px 0px 5px 0px;"> ATF STAFF!</div> <center><div style="width: 350px; height: 5px; background-color: #af98b5;"></div></center> <center> <div style="width: 350px; background-color: #fff;"> <table cellspacing="6" cellpadding="0"><tr><td valign="top"> <div style="text-align: center; font-family: voltaire; font-size: 18px; color: #e55e23; line-height: 100%;"> ADMINS </div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=982">(<i>ash</i>)</a><br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=3216">kristen</a><br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=10">(<i>summer</i>)</a> </div></td> <td valign="top"><div style="text-align: center; font-family: voltaire; font-size: 18px; color: #256a92; line-height: 100%;"> GLOBALS </div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=989">bella</a><br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=1127">hunter<br> </div></td> <td valign="top"><div style="text-align: center; font-family: voltaire; font-size: 18px; color: #1d9790; line-height: 100%;"> SECURITY </div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=11667">charlie</a><br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=8724">becky</a> </div></td> <td valign="top"><div style="text-align: center; font-family: voltaire; font-size: 18px; color: #cd3592; line-height: 100%;"> ADVERTISING </div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=2322">chelle</a><br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=14644">joey</a><br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=3899">theo</a> </div></td></tr> <tr><td valign="top"> <div style="text-align: center; font-family: voltaire; font-size: 18px; color: #9e0c0c; line-height: 100%;"> CODING </div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=11304">sara</a> <br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=45">ana</a> </div></td> <td valign="top"><div style="text-align: center; font-family: voltaire; font-size: 18px; color: #851d97; line-height: 100%;"> GRAPHICS </div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=334">kayla</a> <br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=1601">louise</a> </div></td> <td valign="top"><div style="text-align: center; font-family: voltaire; font-size: 18px; color: #1f6f38; line-height: 100%;"> WRITING</div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=9491">nina</a> <br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=20593">steph</a> </div></td> <td valign="top"><div style="text-align: center; font-family: voltaire; font-size: 18px; color: #b9a629; line-height: 100%;"> CHALLENGE </div> <div style="text-align: center; font-family: tahoma; font-size: 9px; line-height: 100%; color: #000; text-transform: lowercase; padding: 2px 0px 2px 0px;"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=7661">aly<br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=9790">sophie</a> <br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=2510">jazmine</a> <br> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=19817">liam</a> </div></td></tr> </table></div></center> <center><div style="width: 350px; height: 5px; background-color: #af98b5;"></div></center> </div></td> <td valign="top"><div class="acheader"> here at a thousand fireflies, we give credits, so here they go. the spiffy skin was made by <b>sara</b> for atf exclusively, with the toggle sidebar credited to <b>subdevo</b>. the beautiful header/sidebar graphics were made by <b>bella</b>. all the pips were made by <b>bella</b>, the advertising banner and atf buttons were made by <b>bella</b>. the forum descriptions were coded by <b>hunter</b>. staff thread templates coded by <b>ana and jay</b> also exclusively for atf. the advertising rules are credited to <b>kristen</b>. the codes we use for announcements/etc are ours and were made by <b>katie</b> especially for the site. all other content belong to the members, or whoever they credit, because as i said earlier, fireflais credit. <p>we have a low tolerance on stealing here at atf, so if you steal, we will find you and we will ban you, even if it's stealing something on your site. please don't steal anything, you will get banned, and it just ain't nice. </div> <div class="headertext">credits</div></td></table> </div> <div class="contenth3"> <div class="linkbar"> <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?c=2" style="color: white;">WRITING SECTION</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?c=7" style="color: white;">GRAPHIC SECTION</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?c=8" style="color: white;">CODING SECTION</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?c=9" style="color: white;">ROLEPLAY SECTION</a> - <a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?c=4" style="color: white;">ADVERTISING</a> </div></div> </div>

It's pure a CSS effect, so no javascript needed. If you have a basic understandig of HTML you could use this.

by masqelinus. July 10th 2013, 3:57 pm

kiekeboe yay thank you so so much. this worked. Very Happy

but something is wrong :/i paste the code you gave me into templates where logo should be. and everything work great, but forum is now little messed up. here is screenshot. you may know how to fix that?
http://www12.zippyshare.com/v/96122846/file.html
http://www12.zippyshare.com/v/57797098/file.html
everything is to much on the right side. i think it has something to do with margin but i'm not sure what to do.

i blur some stuff for my own reason. i hope it is seen enough.

by Kiekeboe July 10th 2013, 4:21 pm

You have to play a bit with the margin to let it fit into your forum. You have to keep in mind that it was coded to work on a different kind of forum. I have played with it this afternoon, and it's working perfectly for me.