SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Popup on Hover, Close When Clicked

    I have used various popups in the past but I want to know if there is something out there that will do just like my topic title said. It will open when I hover over it and then the only way to close it is to click on a 'close' link within that popup window.

    Here is a good example: www.diap ers.com (remove one spaced).

    Hover over the link 'Cart' at the upper right of the page.

    I looked at the source but I am not familiar with the scripts there and so I was hoping that someone will point to the right direction.

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's quite very simple process in javascript. If you want actual code then you'll need to post some html/css of what you're working with so far. Being honest this is very basic javascript. You'll do yourself favours by working it out yourself...however here is how i'd do it....in pseudo code

    -Give the popup a css property of display: none.
    -Grab a reference to the element you want to use to activate the popup onhover.
    -When it's hovered on set the popup to display: block
    -Then from here you need to grab a reference to your close link.
    -When the close link is clicked upon set the popup to display: none

    So taking your close link as an example it might be easiest to give it an id:

    Code HTML4Strict:
    <img id="close" src="imageurl.gif" alt="close popup" />width="xx" height="xx"

    and then grab a refrence ot this in javascript is done like so:

    Code JavaScript:
    var closeLink = document.getElementById('close')

    See how you get on with this and come back if you're stuck

  3. #3
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am not savvy in javascript which is why I posted the question.

    However, I have gotten everything done already without the script as you can see here:

    ht tp://sndkids-com.ds5007.gre ybea rdhosting.com/ (remove 3 spaces).

    Just hover over the Shopping Cart / Items / Subtotal area and it will popup.

    I just need it to stick and then close just like the site I mentioned in my initial post. I thought that maybe some kind of inline script would work but I haven't had any success in obtaining such code.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,169
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    I question why you would want to use intrusive javascript
    Quote Originally Posted by newseed View Post
    .....
    It will open when I hover over it and then the only way to close it is to click on a 'close' link within that popup window.
    .....
    I looked at the source but I am not familiar with the scripts there and so I was hoping that someone will point to the right direction.
    There is always the option to close the page.
    elduderino did point you in the right direction.
    Quote Originally Posted by newseed View Post
    I am not savvy in javascript which is why I posted the question.
    .....
    I just need it to stick and then close just like the site I mentioned in my initial post. I thought that maybe some kind of inline script would work but I haven't had any success in obtaining such code.
    The SitePoint forums have many members that are more than willing to help you get "savvy".
    If you are looking for someone to write your code for you, i.e. so you can "obtain" it - please post in the MarketPlace.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •