Jump to content
xisto Community
jjaenagle

How To Make An Item Scroll With You On The Page.

Recommended Posts

ok im not sure where or how to really ask this... but you can find an example at http://www.demonoid.pw/lr.php?ru=%2F

the ad that is on the right side scrolls with you basically to the bottom of the page. I know they use an iframe but can you show me how that works or what makes it do that?

i tried to copy the source and css but it did not work..


any advice?

Share this post


Link to post
Share on other sites

2 years ago I was looking for this to but then a friend and I made a script (he knew javascript).First we made a div box:

<div id="floatdiv" style="       position:absolute;       width:200px;height:50px;left:0px;top:0px;       padding:16px;background:#FFFFFF;       border:2px solid #2266AA">   !!CONENT HERE!!   </div> 

Then after the div box code:

<script type="text/javascript"><!--   var floatingMenuId = 'floatdiv';   var floatingMenu =   {       targetX: -250,       targetY: 10,         hasInner: typeof(window.innerWidth) == 'number',       hasElement: document.documentElement           && document.documentElement.clientWidth,         menu:           document.getElementById           ? document.getElementById(floatingMenuId)           : document.all             ? document.all[floatingMenuId]             : document.layers[floatingMenuId]   };     floatingMenu.move = function ()   {       if (document.layers)       {           floatingMenu.menu.left = floatingMenu.nextX;           floatingMenu.menu.top = floatingMenu.nextY;       }       else      {           floatingMenu.menu.style.left = floatingMenu.nextX + 'px';           floatingMenu.menu.style.top = floatingMenu.nextY + 'px';       }   }     floatingMenu.computeShifts = function ()   {       var de = document.documentElement;         floatingMenu.shiftX =           floatingMenu.hasInner           ? pageXOffset           : floatingMenu.hasElement             ? de.scrollLeft             : document.body.scrollLeft;       if (floatingMenu.targetX < 0)       {           if (floatingMenu.hasElement && floatingMenu.hasInner)           {               // Handle Opera 8 problems               floatingMenu.shiftX +=                   de.clientWidth > window.innerWidth                   ? window.innerWidth                   : de.clientWidth           }           else          {               floatingMenu.shiftX +=                   floatingMenu.hasElement                   ? de.clientWidth                   : floatingMenu.hasInner                     ? window.innerWidth                     : document.body.clientWidth;           }       }         floatingMenu.shiftY =            floatingMenu.hasInner           ? pageYOffset           : floatingMenu.hasElement             ? de.scrollTop             : document.body.scrollTop;       if (floatingMenu.targetY < 0)       {           if (floatingMenu.hasElement && floatingMenu.hasInner)           {               // Handle Opera 8 problems               floatingMenu.shiftY +=                   de.clientHeight > window.innerHeight                   ? window.innerHeight                   : de.clientHeight           }           else          {               floatingMenu.shiftY +=                   floatingMenu.hasElement                   ? document.documentElement.clientHeight                   : floatingMenu.hasInner                     ? window.innerHeight                     : document.body.clientHeight;           }       }   }     floatingMenu.doFloat = function()   {       var stepX, stepY;         floatingMenu.computeShifts();         stepX = (floatingMenu.shiftX +            floatingMenu.targetX - floatingMenu.nextX) * .07;       if (Math.abs(stepX) < .5)       {           stepX = floatingMenu.shiftX +               floatingMenu.targetX - floatingMenu.nextX;       }         stepY = (floatingMenu.shiftY +            floatingMenu.targetY - floatingMenu.nextY) * .07;       if (Math.abs(stepY) < .5)       {           stepY = floatingMenu.shiftY +                floatingMenu.targetY - floatingMenu.nextY;       }         if (Math.abs(stepX) > 0 ||           Math.abs(stepY) > 0)       {           floatingMenu.nextX += stepX;           floatingMenu.nextY += stepY;           floatingMenu.move();       }         setTimeout('floatingMenu.doFloat()', 20);   };     // addEvent designed by Aaron Moore   floatingMenu.addEvent = function(element, listener, handler)   {       if(typeof element[listener] != 'function' ||           typeof element[listener + '_num'] == 'undefined')       {           element[listener + '_num'] = 0;           if (typeof element[listener] == 'function')           {               element[listener + 0] = element[listener];               element[listener + '_num']++;           }           element[listener] = function(e)           {               var r = true;               e = (e) ? e : window.event;               for(var i = element[listener + '_num'] -1; i >= 0; i--)               {                   if(element[listener + i](e) == false)                       r = false;               }               return r;           }       }         //if handler is not already stored, assign it       for(var i = 0; i < element[listener + '_num']; i++)           if(element[listener + i] == handler)               return;       element[listener + element[listener + '_num']] = handler;       element[listener + '_num']++;   };     floatingMenu.init = function()   {       floatingMenu.initSecondary();       floatingMenu.doFloat();   };     // Some browsers init scrollbars only after   // full document load.   floatingMenu.initSecondary = function()   {       floatingMenu.computeShifts();       floatingMenu.nextX = floatingMenu.shiftX +           floatingMenu.targetX;       floatingMenu.nextY = floatingMenu.shiftY +           floatingMenu.targetY;       floatingMenu.move();   }     if (document.layers)       floatingMenu.addEvent(window, 'onload', floatingMenu.init);   else  {       floatingMenu.init();       floatingMenu.addEvent(window, 'onload',           floatingMenu.initSecondary);   }     //--></script>  

The target_x and target_y variables represent the desired distance from the top left corner of the menu to the window borders. Positive values mean distance from left and top border and negative - from right and bottom.I hope this is wat you where looking fore. :D Some parts of the code where note made by me or my friend, those where code snippets found on the web.

Share this post


Link to post
Share on other sites

oh wow... that may be it. i dont know anything about javascript so it may take me a while to try and get it up, but i will let you know how it goes! thanks!

Share this post


Link to post
Share on other sites

No problem, It is copy & paste ready, you only have to put in some content in the div box.

Share this post


Link to post
Share on other sites

funny LOL i'm actualy doing this same thing for a website.an easy way to do is is using fixed positioningthis the HTML code

<div id="nomove" >stay where you at</div> <div id="other">this moves balsjshs hskhgdgd dghjdhg hgdghdghdgdhgd dhgdhgd dh</div>

this is the CSS and lets keep #nomove to left foreever and 50px from top

#nomove { position:fixed;  left:0; top:50px;}

Share this post


Link to post
Share on other sites

hey etycto... i will try that as well...

I have a test one that im trying... http://forums.xisto.com/no_longer_exists/


this is the test of oxida's script... the idea is exactly what i need but it does not work like it should.
http://forums.xisto.com/no_longer_exists/

any suggestions?

Edited by jjaenagle (see edit history)

Share this post


Link to post
Share on other sites

hmm thats weard, because I used the same way you are yousing it,But give me some time and i will look for a fix :D

Share this post


Link to post
Share on other sites

Code not working, please help

How To Make An Item Scroll With You On The Page.

 

Replying to oxida

 

The code is not working, as it is unable to find the div by GetElementbyID. It always return null. Can you please help

 

-reply by Manoj

Share this post


Link to post
Share on other sites

Hey oxida, great little script, thanks.Just one thing, I would like to use this effect 2 times on the same page but when I try it does not seem to work, only one works and the other just stays still at top left of the page.For example, I have your code working for the vertical google ads at right of the article at http://forums.xisto.com/no_longer_exists/ but I would also like the TBS English-Speaking Services Guide to the right of the google ads to move with the page as well.Any tips?Saludos,Jer...-question by jeremy

Share this post


Link to post
Share on other sites

Woah! This is totally wicked! Thanks for sharing this! Im gonna use this for my site, now I know a way to make adverts AND text AND images scroll with the user! Its gonna be so annoying for them :) Thanks!

Share this post


Link to post
Share on other sites

Really your information produce here is very usefull.
can you please explain each and every term with details.
i need more information in this topic.
thanks


2 years ago I was looking for this to but then a friend and I made a script (he knew javascript).
First we made a div box:

<div id="floatdiv" style="       position:absolute;       width:200px;height:50px;left:0px;top:0px;       padding:16px;background:#FFFFFF;       border:2px solid #2266AA">   !!CONENT HERE!!   </div>

Then after the div box code:

<script type="text/javascript"></script>

The target_x and target_y variables represent the desired distance from the top left corner of the menu to the window borders.
Positive values mean distance from left and top border and negative - from right and bottom.

I hope this is wat you where looking fore. :)


Some parts of the code where note made by me or my friend, those where code snippets found on the web.



Share this post


Link to post
Share on other sites
Thanks a lot for this!How To Make An Item Scroll With You On The Page.Thanks dear! This tutorial really saved me alot! I've been searching for it on famous javascript sites but all in vein. Thanks again bro! Keep up the good work!-reply by Ahmad Mushtaq

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.