SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Placement help

    I want to show a div relative to a link. For this i want to also calculate the area on right and bottom and if not enough space then move the div on the left/right (default is right) side of the click or move it little upwards so that entire width and height of the div is visible.

    Simply putting the div next to the click
    Code:
    var offset = $(this).offset();
    $('#div').addClass('someClass')
            .css({
                    'top':offset.top, 
                    'left':offset.left+100
                })
            .fadeIn('slow');


    Thanks
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  2. #2
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my first stab at it... There is still a lot of room to improve the code, as soon as that is done will repost.

    Code:
    //current object  
        var $currentObj         = $(this);
        var offsetCurrentObj     = $currentObj.offsetCurrentObj();
        //get the current objects top and left position
          var top                 = offsetCurrentObj.top;
          var left                 = offsetCurrentObj.left;
    
        //message object
        var $messageObj         = $("#div");
        //message object width and height
        var totalMessageHeight     = $messageObj.outerHeight();
          var totalMessagewidth     = $messageObj.outerWidth();        
        
        //get the screen width and screen bottom position
        var screenWidth         = $(window).width();
        var screenBottom         = $(window).scrollTop() + $(window).height();
    
        //check the right side of the screen
        if (left + $currentObj.width() + totalMessagewidth > screenWidth) 
            left = left - totalMessagewidth;
        else
            left = left + $currentObj.width();
                      
        // check the bottom of the screen
        if (top + $currentObj.height() + totalMessageHeight > screenBottom)
            top = top - $messageObj.outerHeight() + $currentObj.height(); 
                 
        // apply top and left and show the message object
        $messageObj.css({
                        "top": top,
                        "left": left
                        })
                    .fadeIn();
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correction:

    Code:
    var offsetCurrentObj     = $currentObj.offsetCurrentObj();
    Should be:

    Code:
    var offsetCurrentObj     = $currentObj.offset();
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...


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
  •