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

free web hosting
Free Web Hosting, No Ads > CONTRIBUTE > The Internet > Web Design

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

jjaenagle
ok im not sure where or how to really ask this... but you can find an example at http://www.demonoid.com

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?

Reply

oxida
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:

CODE
<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:

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. laugh.gif


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

 

 

 


Reply

jjaenagle
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!

Reply

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

Reply

etycto
funny LOL i'm actualy doing this same thing for a website.

an easy way to do is is using fixed positioning
this the HTML code
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

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


}

Reply

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

I have a test one that im trying... http://www.theidoctor.org/test1.html


this is the test of oxida's script... the idea is exactly what i need but it does not work like it should.
http://www.theidoctor.org/test2.html

any suggestions?

Reply

oxida
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 rolleyes.gif

Reply

Archangel_Baw
thanx etycto that was very helpful.

Reply

oxida
http://www.dynamicdrive.com/dynamicindex1/staticmenu.htm

look at this site, there is an easy code that whill do the trick i think.

Reply

jjaenagle
Thats Awesome! Thanks for that!

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. scrolling words on bottom of my page - 3.78 hr back. (1)
  2. javascript scroll listener - 8.93 hr back. (1)
  3. make ads scroll with page - 10.22 hr back. (1)
  4. scrolling words at top of page - 23.80 hr back. (1)
  5. scrolling words on top of my page - 24.35 hr back. (1)
  6. where do i put my scrolling wat if i the at the top of my page - 26.64 hr back. (1)
  7. how to make a scrool box with your friends init - 28.20 hr back. (1)
  8. a website where u can get scrolling words on yo page - 32.03 hr back. (1)
  9. make a div move with scroll - 46.94 hr back. (1)
  10. item moves as you scroll - 51.55 hr back. (1)
  11. keep div fixed when page scrolling - 51.78 hr back. (2)
  12. make div stay at top of screen - 55.10 hr back. (1)
  13. make div element scroll with page - 56.61 hr back. (1)
  14. move div page scrolled - 59.03 hr back. (1)
Similar Topics

Keywords : make, item, scroll, page,

  1. Scroll Message On Top Of Your Browser..
    (3)
  2. Scroll And Pan The Screen Via Mouse In Flash
    does anyone know how to pan across the screen using the mouse in flash (1)
    Hi Need help for a project , hope u guys could help out and teach me a little something. I saw some
    flash that if you click on a icon or if u point ur mouse to the left of the screen it will keep
    going left, and if right it'll keep scrolling right, as if ur checking out a room Or something
    like this website.. www.mcdonalds.com.au , and choose broadband if you see on that site, when user
    clicks on the icon to the right. the rest of the icons would kinda shift.. does anyone know how to
    do that or know if there is anywhere out there a tutorial to do that? if u do.. it&....
  3. Making A Scroll Bar In Flash
    with an image and words on it (4)
    does anybody know how to make a scrollbar for my game page I am making on my site. This whole site
    is completely in flash. I know how to make a scrollbar for just words but not when there is an
    image on there also. Does anybody know?....
  4. Does Frame Have To Scroll?
    (5)
    I have problem with my site.I have never againe made a site,and now that I have somehow created it
    with the use of 3 frames,it gets on my nerves that the left frame has scroll bar.Is there any way
    that it could be just like an ordinary box,instead of scrolling. You can see it at My Webpage ....

    1. Looking for make, item, scroll, page,

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for make, item, scroll, page,

*MORE FROM TRAP17.COM*
advertisement



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



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE