Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
Reply to this topicStart new topic
> How To Make An Item Scroll With You On The Page.
Rating 5 V
jjaenagle
post Jun 15 2008, 09:28 PM
Post #1


Member [Level 1]
****

Group: [HOSTED]
Posts: 62
Joined: 7-May 08
From: richmond, va
Member No.: 61,838



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?
Go to the top of the page
 
+Quote Post
oxida
post Jun 17 2008, 08:59 AM
Post #2


Member [Level 1]
****

Group: [HOSTED]
Posts: 53
Joined: 12-June 08
From: Netherlands
Member No.: 63,541



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.

Go to the top of the page
 
+Quote Post
jjaenagle
post Jun 17 2008, 09:46 PM
Post #3


Member [Level 1]
****

Group: [HOSTED]
Posts: 62
Joined: 7-May 08
From: richmond, va
Member No.: 61,838



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!
Go to the top of the page
 
+Quote Post
oxida
post Jun 18 2008, 08:08 AM
Post #4


Member [Level 1]
****

Group: [HOSTED]
Posts: 53
Joined: 12-June 08
From: Netherlands
Member No.: 63,541



No problem, It is copy & paste ready, you only have to put in some content in the div box.
Go to the top of the page
 
+Quote Post
etycto
post Jun 18 2008, 02:54 PM
Post #5


Super Member
*********

Group: [HOSTED]
Posts: 275
Joined: 2-June 07
From: U to the S to the A (but i'm haitian)
Member No.: 44,040



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;


}
Go to the top of the page
 
+Quote Post
jjaenagle
post Jun 18 2008, 05:11 PM
Post #6


Member [Level 1]
****

Group: [HOSTED]
Posts: 62
Joined: 7-May 08
From: richmond, va
Member No.: 61,838



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?

This post has been edited by jjaenagle: Jun 18 2008, 09:07 PM
Go to the top of the page
 
+Quote Post
oxida
post Jun 19 2008, 06:18 PM
Post #7


Member [Level 1]
****

Group: [HOSTED]
Posts: 53
Joined: 12-June 08
From: Netherlands
Member No.: 63,541



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
Go to the top of the page
 
+Quote Post
Archangel_Baw
post Jun 19 2008, 06:22 PM
Post #8


Super Member
*********

Group: Members
Posts: 221
Joined: 2-August 07
From: Ontario, Canada
Member No.: 47,468



thanx etycto that was very helpful.
Go to the top of the page
 
+Quote Post
oxida