SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving a div to bottom of screen

    I have managed to get a div containing an image to move down the screen and right by a number of pixels. What I would really like is for this div to move all the way down the screen, no matter what size the screen is so that it rests on the bottom. Can anyone give me any pointers?

    Code:
    $("#div").delay(1000).animate({left: '+=470', top: '+=470'}, 2500);

  2. #2
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    @Hlforr

    Here is a js/jquery function that I use to ensure a left menu is does not go off screen. Similar logic may help you.
    Code:
    function keepMenuLeft(){   var div_width = $("li.hovering div").width();
       var screen_width = $(window).width();
       var offset = $("li.hovering div").offset();
       var left = 0;
       if (offset.left + div_width > screen_width) {
          left = (offset.left + div_width) - screen_width;
          left = 0 -left - 30; //extra 30 (px) account for padding and margins
          left = left + "px";		
          $("li.hovering div.mega_menu").css('left',left);
          $("li.hovering div.mega_menu").css('position','relative');
       } 	
    }
    You should be able to get the screen height using $(window).height(); and then determine your divs height using $("some_divs_id").height. Then you just have to calcultat screen height - div width to give you the point to position the top of your div using css. Use the example above for some reference.

    Hope this helps.

    Steve
    ictus==""

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks Steve. Yes, that worked.

  4. #4
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    @Hlforr
    Great.
    Off Topic:

    Your wedding photography blog is awesome, really, really nice composition, lighting, creativity,...

    Steve
    ictus==""

  5. #5
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ServerStorm View Post
    @Hlforr
    Great.
    Off Topic:

    Your wedding photography blog is awesome, really, really nice composition, lighting, creativity,...

    Steve
    Off Topic:

    Thanks Steve, but regret to say these aren't my images, I am just the web designer - and priveleged to be so when I can work with photographs like these

  6. #6
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Well in any case nice site design... not your typical use of colour or blocking but comes off quite well.
    ictus==""


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
  •