Web Design Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignWeb Design Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old April 29th, 2009, 09:43 PM
kellijanesmith kellijanesmith is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Apr 2009
Location: Omaha, NE
Posts: 1 kellijanesmith User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 6 m 34 sec
Reputation Power: 0
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

Reply With Quote
  #2  
Old May 31st, 2009, 07:23 PM
Valleyman's Avatar
Valleyman Valleyman is offline
<.(.0.0.).>
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Oct 2007
Location: $_SERVER['PHP_SELF'];
Posts: 75 Valleyman User rank is Sergeant (500 - 2000 Reputation Level)Valleyman User rank is Sergeant (500 - 2000 Reputation Level)Valleyman User rank is Sergeant (500 - 2000 Reputation Level)Valleyman User rank is Sergeant (500 - 2000 Reputation Level)Valleyman User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 16 h 6 m 58 sec
Reputation Power: 12
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.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignWeb Design Help > Would appreciate help with mouseover code for included example


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump




 Free IT White Papers!
 
How to Present Effectively Online
This white paper offers practical and actionable advice on the key steps that any presenter should consider as they plan and execute a Webinar or online meeting.

 
Open Source Security Myths
Open Source Software (OSS) is computer software whose source code is available to the general public with relaxed or non-existent intellectual property restrictions (or arrangement such as the public domain), and is usually developed with the input of many contributors.

 
Power and Cooling Capacity Management for Data Centers
This paper describes the principles for achieving power and cooling capacity management.

 
Scalable, Fault-Tolerant NAS for Oracle - The Next Generation
For several years NAS has been evolving as a storage alternative for Oracle databases, and for good reason: NAS is quite often the simplest, most cost-effective storage approach for Oracle. Learn about the benefits that HP's approach to scalable NAS brings to Oracle environments in this comprehensive white paper.

 
Understanding Web Application Security Challenges
This white paper discusses many common threats and preventive measures for Web application security, and explains what you can do to help protect your organization.

 

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 




© 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 Hosted by Hostway
For more Enterprise Application Development news, visit eWeek