SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)

    Move an Absolute Element to Top of Viewing Area

    Hi.

    I have an absolutely positioned
    <div> that I'd like to appear at the top of a viewer's screen onClick.

    Code HTML4Strict:
    <div id="Screen" style="display:none; position:absolute; top:0px; left:0px;"></div>

    When clicked, Javascript changes the display back to block and it the div appears as it should.

    The problem arises when the webpage is too long and requires scrolling.

    When the viewer is halfway scrolled down the page and clicks, the <div> still appears to the very top... above the current viewing area.

    I've been trying to figure out some way to change the top property to the current viewing area's top but nothing's been working.

    I tried...


    Code JavaScript:
    document.getElementById('ScreenSwitch').onclick = (function()
    		{
    		document.getElementById('Screen').style.display = 'block';
    		document.getElementById('Screen').style.top = document.body.offsetTop;
    		}
    	);

    ...and other similar combinations, but no matter what, the <div> always appears to the very top of the webpage and not the top of the screen.

    Can anyone suggest what I might be doing wrong ?




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use position fixed instead. Only problem is that it does not work (you can make it work with hacks) in IE 6...

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might be wrong but wouldn't stopping the default browser action keep the user in the same scroll position? Try adding this to your code:
    Code:
    document.getElementById('ScreenSwitch').onclick = (function()
            {
            document.getElementById('Screen').style.display = 'block';
            document.getElementById('Screen').style.top = document.body.offsetTop;
            return false;
            }
        );

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would still use the position fixed solution for IE 7+, Firefox, Opera and Safari. And let IE 6 get the JavaScript solution. This because setting the top property with script will the user scrolls results in a jerky effect.

  5. #5
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestions.

    I'll look up some IE position fixed fixes.




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  6. #6
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,727
    Mentioned
    43 Post(s)
    Tagged
    0 Thread(s)
    For future reference, here's a good one...

    http://www.gunlaug.no/contents/wd_additions_15.html




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse


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
  •