Nov 21, 2009
Pages: 1, 2

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

free web hosting

Read Latest Entries..: (Post #17) by iGuest on Nov 4 2009, 10:40 PM.
Can you have two instances on a page? How To Make An Item Scroll With You On The Page. Firstly, thank you for this code, it is just what I was looking for, as it can work with relative positioning to keep a div moving within another div. Problem is, I am trying to use this code on a site with a menu on the left and one on the right, and I can't get both to scroll. Is there something in the script that prevents it working with 2 items on one page? -question by f1end...
read more.
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion > MODERATED AREA > 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?

Comment/Reply (w/o sign-up)

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.

 

 

 


Comment/Reply (w/o sign-up)

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!

Comment/Reply (w/o sign-up)

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

Comment/Reply (w/o sign-up)

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;


}

Comment/Reply (w/o sign-up)

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?

Comment/Reply (w/o sign-up)

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

Comment/Reply (w/o sign-up)

Archangel_Baw
thanx etycto that was very helpful.

Comment/Reply (w/o sign-up)

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

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

Comment/Reply (w/o sign-up)

jjaenagle
Thats Awesome! Thanks for that!

Comment/Reply (w/o sign-up)

Latest Entries

iGuest
Can you have two instances on a page?
How To Make An Item Scroll With You On The Page.

Firstly, thank you for this code, it is just what I was looking for, as it can work with relative positioning to keep a div moving within another div.

Problem is, I am trying to use this code on a site with a menu on the left and one on the right, and I can't get both to scroll. Is there something in the script that prevents it working with 2 items on one page?

-question by f1end

Comment/Reply (w/o sign-up)

iGuest

For the css method to work in internet explorer you need to define a doctype

http://www.W3schools.Com/tags/tag_DOCTYPE.Asp 

-reply by Chrykal


Comment/Reply (w/o sign-up)

iGuest
ie7 or ie8
How To Make An Item Scroll With You On The Page.

Thanks etycto.

Your suggestion works very well on Safari (Mac and Windows XP and Windows 7) and also on Firefox (mac and PC) but not on IE7 in Windows XP nor IE8 in Windows 7.

For some unknown reason, the division is not correctly placed on page.

Any ideas? 

-reply by eddyk

Comment/Reply (w/o sign-up)

iGuest
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

Comment/Reply (w/o sign-up)

veerumits
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


QUOTE (oxida @ Jun 17 2008, 02:29 PM) *

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"></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.






Comment/Reply (w/o sign-up)



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*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Pages: 1, 2

Searching Video's for make, item, scroll, page,
See Also,
advertisement


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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com