|
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
Would appreciate help with mouseover code for included example
Hi all,
Anybody know what they're doing on this page? If you act like you're leaving and bring your mouse to the top of the page (just before the browser menu bars) you get a pop up. It only comes up once unless you refresh. I was thinking it was just a simple mouseover of an image running across the top of the page, but I looked at the code, and it looks more complicated - maybe CSS or Javascript? -----------.truehealth.com/landing/purekrill/index.asp?SC=TIK1012 (sorry not clickable, site blocking me because I'm new - needs the http and www in front) Thanks so much for any advice. Kelli ![]() |
|
#2
|
||||
|
||||
|
The code which powers this is found in the javascript file linked to using this line of HTML <script type="text/javascript" src="/includes/landing/landing.js"></script>
You want the section helpfully entitled "Hidden Signup Form" and they have included comments which should help you along. EDIT: Just to include a bit more information. The piece of javascript code is detecting (using the mouse co-ordinates) when the mouse moves to the top of the screen. It is then changing the Document Object Model (DOM) to create a Modal Window - in laymans terms it is changing the CSS property of a HTML element from Display: none; (meaning it was always there but you couldnt see it) to Display: show;. A modal window is just some HTML/CSS overlayed on top of the website using the CSS z-index property, its always there but display: none; means it is not rendered. When you click the X in the corner it uses Javascript onClick property to dyanmically change the display to "none" which causes the window to vanish thus making it seem like a window had opened and closed. To recreate if you should be able to copy their code if you want with some small changes (make sure you get the bits from the HTML and CSS as well as the .js file. If you want to create it youself I would recommend using the JQuery library to do so. Last edited by Valleyman : May 31st, 2009 at 07:34 PM. |
![]() |
| Viewing: Dev Shed Forums > Web Design > Web Design Help > Would appreciate help with mouseover code for included example |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|