Chezshire Posted November 18, 2009 Share Posted November 18, 2009 Hi and hello to everyone, in a nutshell, I'm trying to make a contact page for my student project. The contact page appears when you click on the word 'contact' in the nav area and when you do, the hover state triggers an iframe which has the contact page. I've tested the idea out and it works. But when i try to plug it in, it doesn't work correctly. I don't know why - i've firebugged it and used the firefox tool kit (thanks for the tip on this) and resolved some problems but I'm kind of stumped now. So. Uhm. Help? Thank you everyone! Proof of concept:http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/contact/index.html > If you mouse over the last bullet item it triggers the iFramed contact form as desired. Test of Concept: http://xpg.us/xSCC/xFinalP/dinnersforsinners/template/tricks2.html > As you can see the iFrame is in a permanent state of hover rather then only appearing when it hovers. Once i get the hover working correctly I will then style it nicely - right now it's a horribly obvious red so that it can be seen. dfs_mini.css: /* remove above code */ a#contactform div.popup { display:none; } a#contactform:link div.popup { display: none; color:red; position: absolute; right: 100px; top: 40px; z-index: 100 } a#contactform:visited div.popup { display: none; color:red; position: absolute; right: 100px; top: 40px; z-index: 100 } a#contactform:hover div.popup { display: block; padding: 0px; text-align: left; position: absolute; right: 0px; top: 40px; z-index: 100; } div.popup input { float: right; width: 200px; margin-left: 5px; } div.popup textarea { float: right; width: 200px; } iframe.contactform { border: none; width: 325px; scrolling: no; } dfs_divs.css: * { padding: 0; margin: 0; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 168px; } #indicia { width: 217px; height: 168px; float: left; } #banner { width: 683px; height: 135px; float: right; display: inline; } #nav_container { width: 683px; height: 33px; float: left; position: relative; z-index: 1; } /* houses Content - Content Divs follow (#rightcolumn, #leftcolumn, etc.) */ #columnsFaux { width: 900px; background-image:url('../images/bkg/BkG_columnsFaux.gif'); /*background-color: #0f0;*/ background-repeat:repeat-y; overflow: auto; } #leftcolumn { background: #aa9f4e; width: 188px; min-height: 602px; margin-left: 29px; float: left; } #rightcolumn { background: #fffff1 url('../images/bkg/bkg_leftcolumn.jpg') no-repeat bottom left; width: 649px; min-height: 602px; border-right-style:solid; border-width:5px; border-color:#aa9f4e; float: left; display: inline; } /* nested inside right column */ #recipe { width: 440px; margin-left: 10px; float: left; } /* nested inside right column */ #ingredients { text-align: center; width: 185px; margin-right: 10px; float: right; } /* nested inside right column */ /* Only applies to Schedule Page */ #calendar { width: 400px; margin-left: 10px; float: left; } /* nested inside right column of Tricks page */ #tricks { width: 440px; margin-left: 10px; float: left; } /* nested inside right column of Tricks page */ #notes { text-align: center; width: 185px; margin-right: 10px; float: right; } #footer { width: 900px; height: 43px; background-image:url('../images/bkg/bkg_06.gif'); background-repeat:no-repeat; background-position:top right; clear: both; } #login { text-align: center; width: 188px; height: 43px; margin-left: 29px; float: left; } div.login { min-height: 43px; display: table-cell; vertical-align: middle; } #legal { text-align: center; width: 683px; height: 43px; float: right; display: inline; } #badgesOfHonor { text-align: center; margin-top: 40px; } Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted November 19, 2009 Share Posted November 19, 2009 The :hover pseudo class is only going to apply that specific css when the mouse cursor is actually hovering over the link. Once you move the mouse away they will be removed. This type of thing is best done with Javascript. Quote Link to comment Share on other sites More sharing options...
Chezshire Posted November 19, 2009 Author Share Posted November 19, 2009 Thanks for the advice JustLikeIcarus, very much appreciated. That said I was able to solve it so that it works. The problem as it turns out was a pathing issue - I didn't have my css sheet for the iFrame correctly pathed (very embarrassed by that). As for doing something like this with JavaScript, I'm not very good with JavaScript at this time and honestly wouldn't know where to begin or to end (yet). I'm going to start studying JavaScript starting this december and with your advice in mind will likely revisit this site build and retool once I understand how too - Thanks! -Chez PS: How does one become an 'enthusiast' or a 'guru', etc? Just kind of curious. Quote Link to comment Share on other sites More sharing options...
Maq Posted November 19, 2009 Share Posted November 19, 2009 PS: How does one become an 'enthusiast' or a 'guru', etc? Just kind of curious. Hi Chezshire The groups (Guru) are decided by the PHPFreaks team/staff. The post based ranks (enthusiast), are well, based on post count. Read more here: http://www.phpfreaks.com/forums/index.php/topic,232740.0.html Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.