SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Where did I went wrong in this script

    I don't want the images to load until the link is hovered, so for that here is the script but it's not working, can someone help me in correcting it?
    I added an event listener to each link, and on mouseover called a function that sets the image. To make things more interesting, we can copy lazyload a bit here and also use the data-original property

    For example: this is the HTML
    Code:

    Code:
    <li>
           <a href="#" class="tip_trigger">
              <img class="tip" alt="300 Grams"
                      data-original="https://lh5.googleusom/-qCRpw.../300%2520.jpg"
                      src='empty.gif' width="90" height="90"/>
              Alex
           </a>
        </li>
    Then, add an event listener:

    Code:

    Code:
    // call for each element with the class 'tip' that's being hovered upon
        $('.tip').hover(function()
        {
           // retrieve the image inside this element
           var elem = $(this).find('img');
        
           // set the 'src' to the 'data-original' value
           elem.attr('src', elem.attr('data-original'));
        });
    for a live demo, you can see this page http://bloghutsbeta.blogspot.com/201...slidernav.html
    the above part of script is only added to the first letter ALEX in 'A' Category.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cryoffalcon View Post
    I don't want the images to load until the link is hovered, so for that here is the script but it's not working
    This is what the .find() method says about what it does:
    "Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element."

    Do you see the problem between that description and how you are using the it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •