SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Aug 2003
    Location
    NJ
    Posts
    1,219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS for ads to scroll into view then remain visible as page scrolls further?

    In the past year I've noticed on some big sites a newer ad format, basically wide skyscraper type ads which remain in view in a sidebar area as the viewer scrolls down the page.

    I'd like to do something similar. Would it be possible for an ad which begins out of view to remain in view once the visitor goes to scroll past it?

    I would be wanting to setup this type of ad as the last item in my sidebar area. This way for longer pages the sidebar has an ad that remains in view rather than blank unused whitespace.

    Any ideas on where I might find a script that works like this?

    Thanks in advance for any help.
    For HTML Help visit: HTML Help Central
    For Graphic Design help visit: GFXVoid.com
    If you're a GEEK then go where geeks go....

  2. #2
    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)
    Use CSS's position:fixed.

    If that's not what you mean, and you want it to become fixed only after a certain distance has been scrolled, you need to do some measuring, specifically how much has been scrolled (document.documentElement.scrollTop) and how far from the top the ad is (ad.offsetTop).

    You have to be careful with offsetTop though, because the top of the window may not be the element's offsetParent.

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This works in all browsers. All settings are at the top of the script. "Starting point" is the place where the advert box starts. You can vary the time between checks on the position. Initially it is set a 800 msecs. You might like to play with the movement, so that it slides into position.

    <html>

    <head>
    <meta http-equiv="Content-Language" content="en-au">

    <script type="text/javascript">
    <!--
    // range of travel relative to top of box
    var lowestTravel=900, highestTravel=12, startPoint=400; // global travel limits
    //
    // global variables
    var currentOffset=500, newOffset=0, boxObj=null, slideStarted=false;
    // ======= pause between checks set here ====================
    //
    var timeBetweenChecks=800; // in millisecs
    // ==========================================================
    //
    function chk()
    { // determine scroll offset
    if(document.body && typeof document.body.scrollTop !="undefined")
    { newOffset= document.body.scrollTop } // modern browsers
    else
    { if(document.body && typeof window.scrollY !="undefined")
    { newOffset= window.scrollY } // not IE but others
    }
    //
    // check if slide started
    if(slideStarted || newOffset>startPoint)
    { slideStarted=true;
    // box has not moved
    if(currentOffset==newOffset)
    { setTime_out(); return; }
    // ----------
    // if box has moved
    boxObj=document.getElementById("advertR");
    currentOffset=newOffset;
    boxObj.style.top=((currentOffset<=highestTravel)?highestTravel : (currentOffset>lowestTravel)?lowestTravel : currentOffset+12)+"px";
    }
    setTime_out();
    }

    // ========= ======
    var timeOutID=null; // global
    //
    // checks to see if page has been scrolled
    function setTime_out()
    { clearTimeout(timeOutID);
    timeOutID=window.setTimeout("chk()", timeBetweenChecks)
    }
    //

    //-->
    </script>
    <style type="text/css">
    <!--
    body { font-family:arial, sans-serif; font-weight:normal; color:#000; }
    #bdr_bdy { position:relative; top:10px; left:10px; width:920px; height:1500px; border:1px solid #C0C0C0; }
    #txtL { border:1px solid red; position:absolute; top:10px; left:10px; width:500px; height:1450px; text-align:left; padding:5px; }
    #advertR { border:1px solid red; position:absolute; top:400px; right:30px; width:350px; text-align:center; padding:5px; }
    #advertR p { margin-top:0px; margin-bottom:5px; }
    .a13B { font-size:13px; }
    -->
    </style>
    </head>

    <body onload="window.setTimeout('chk()',800)">

    <div id="bdr_bdy">
    <div id="txtL">
    <p class="a13B">The side box will stay at its starting point until the page
    scrolls down to cover it. At this point it will slide up and down until the
    page reloads. Starting point for the box and upper and lower travel limits
    can be set in the script.
    </div>
    <!-- end txtL -->
    <div id="advertR">
    <p class="a"><b>Et anno quidem illo intermissa erant studia mea, dum mihi
    reducto a Madauris, in qua vicina urbe iam coeperam litteraturae atque
    oratoriae percipiendae gratia peregrinari, longinquioris apud</b>.</p>
    <p class="a">Karthaginem peregrinationis sumptus parabantur, animositate
    magis quam opibus patris, municipis Thagastensis admodum tenuis. cui narro
    haec? neque enim tibi, deus meus, sed apud.</p>
    <p class="a">Tte narro haec generi meo, generi humano, quantulacumque ex
    particula incidere potest in istas meas litteras. et ut quid hoc? ut
    videlicet ego et quisquis haec legit cogitemus, de quam profundo clamandum
    sit ad te. et quid propius auribus tuis, si cor
    </div>
    </div>

    </body>

    </html>


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
  •