SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery clarification

    Hi - I'm working my way through jQuery book, Novice to Ninja (p94), on an exercise which is illustrating how to pop up a simple lightbox for an image when it's clicked.

    I would be grateful if someone could explain to me in the code at the bottom, how is it that, in the line :

    Code JavaScript:
    var top = ($(window).height() - $('#lightbox').height()) / 2;

    there is a value for the 'height' for the #lightbox at this stage

    since the img element is if I'm not mistaken is in limbo land at this stage and is only appended to the id 'lightbox' later down the code.

    Code JavaScript:
    $(document).ready(function(){
      $('a.lightbox').click(function(e) {
        $('body').css('overflow-y', 'hidden'); // hide scrollbars!
     
        $('<div id="overlay"></div>')
          .css('top', $(document).scrollTop())
          .css('opacity', '0')
          .animate({'opacity': '0.5'}, 'slow')
          .appendTo('body');
     
        $('<div id="lightbox"></div>')
          .hide()
          .appendTo('body');
     
        $('<img />')
          .attr('src', $(this).attr('href'))
          .load(function() {
            positionLightboxImage();      //   at this stage how is the 'height' for the
          })                             //   #lightbox populated with any value
          .click(function() {
            removeLightbox();
          })
          .appendTo('#lightbox');
     
        return false;;
      });
    });
     
    function positionLightboxImage() {
      var top = ($(window).height() - $('#lightbox').height()) / 2;
      var left = ($(window).width() - $('#lightbox').width()) / 2;
      $('#lightbox')
        .css({
          'top': top + $(document).scrollTop(),
          'left': left
        })
        .fadeIn();
    }
     
    function removeLightbox() {
      $('#overlay, #lightbox')
        .fadeOut('slow', function() {
          $(this).remove();
          $('body').css('overflow-y', 'auto'); // show scrollbars!
        });
    }


    thanking in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mnaseersj View Post
    since the img element is if I'm not mistaken is in limbo land at this stage and is only appended to the id 'lightbox' later down the code.
    The image does not have to be attached to the page for information about its height or width to be known. It only has to be loaded for that info to be available.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    To add to what Paul said, this is happening all over the place. For example, the "overlay" DIV is having CSS and even event handlers applied to it before it's actually appended to the body.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Paul , Raffles - thank you for your replies.

    Quote Originally Posted by paul_wilkins View Post
    The image does not have to be attached to the page for information about its height or width to be known. It only has to be loaded for that info to be available.

    Quote Originally Posted by Raffles View Post
    To add to what Paul said, this is happening all over the place. For example, the "overlay" DIV is having CSS and even event handlers applied to it before it's actually appended to the body.

    Code JavaScript:
    $('<img />')
          .attr('src', $(this).attr('href'))
          .load(function() {
            positionLightboxImage();      //   at this stage how is the 'height' for the
          })                              //   #lightbox populated with any value
          .click(function() {
            removeLightbox();
          })
          .appendTo('#lightbox');
     
        return false;;
      });


    If it's not attached to the page then I assume you are saying that the height is retrieved through the this keyword for the image click event, but that is not the case here from what i can make out of the code....


    Unfortunately, I am still unclear though - because the way in which the height is being retrieved is through the #lightbox node i.e: $('#lightbox').height() , yet the node gets assigned to the DOM after the call to positionLightboxImage() ? ....Is it the case that the .load event only fires after the image get's fully loaded and by that time the DOM is complete and includes the #lightbox node as well.

    Or am I not catching something very basic that I am over looking or perhaps reading into this more than I should....

    .

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mnaseersj View Post
    Or am I not catching something very basic that I am over looking or perhaps reading into this more than I should....
    Here's a simplification:

    Code javascript:
    $('<img />')
          .load(function() {
              ...
          })
          .appendTo('#lightbox');

    The image is added to the lightbox.
    The events assigned when the image was in limbo-land remain with the image after it's attached to the document.

    Once the image has finished been added to the lightbox, the image starts to load.
    When the image has finished loading, the load event of that image is triggered.
    That is when the function then runs.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    thanks, that makes it crystal clear


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
  •