PDA

View Full Version : Iframe Scroller Question



maniac1aw
12-16-2004, 08:26 PM
http://www.dynamicdrive.com/dynamicindex2/iframe-scroller.htm

My question is regarding the above script. I have it working and it is great. My only question is this: Is there a way I can get it to scroll in the oposite direction from how it is scrolling now? I checked out the sourcecode and I really don't understand very well how it is working.

Thanks in advance!

Nick :)

cr3ative
12-16-2004, 08:35 PM
By "opposite direction", do you mean left to right or down to up?

Merry Christmas
cr3ative

maniac1aw
12-16-2004, 08:39 PM
I'm sorry I wasn't even aware that it could go left to right! It is currently scrolling UP and I would want it to go scroll down. Please view my webpage under construction at the following link http://www.savvior.com/8sharp/pmw/. You can get to the source of the right frame at http://www.savvior.com/8sharp/pmw/right_scroll.php

cr3ative
12-16-2004, 08:46 PM
Ooh. This could be quite a difficult one, as it'd have to start from the bottom of the iframe and then go upwards.

I don't have the time to do this (it should be simple enough) due to exam commitments.

Merry Christmas
cr3ative

maniac1aw
12-20-2004, 12:58 AM
This is now working. It uses the mouse position to go up or down and control the speed....

To give the impression of a continuous scroll we divided the height by 2 and repeated the content twice. So when it resets it is in the same position..

take a look at the right bar here:

http://www.savvior.com/8sharp/pmw/





<script language="JavaScript1.2">
<!--

/***********************************************
* IFRAME Scroller script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=2;

//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500;


// all of the following stuff is just to get the mouse(x,y)
// in a browser-compatible way....

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false;

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE);

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;

// Main function to retrieve mouse x-y pos.s
// (get the mouse x, y coordinates and set the scrollspeed var accordingly)
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
//document.Show.MouseX.value = tempX;
//document.Show.MouseY.value = tempY;

if(tempX >= 0 && tempX <= 158 && tempY >= 0 && tempY <= 530)
bInDiv = true;
else
bInDiv = false;
//document.Show2.inDiv.value = bInDiv;
//document.Show2.yOffset.value = tempY - 265;

//if (bInDiv)
scrollspeed = (8 * ((tempY - 265) / 265 ));

return true
}
// end mouse x,y stuff



//




// attach listener (different for each browser)
if (window.addEventListener)
window.addEventListener("load", initializeScroller, false);
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller);
else
window.onload=initializeScroller;


function initializeScroller(){
// get the object reference for the div
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer");
// set the div vertical position
dataobj.style.top="5px";
// do function after 1/2 second
setTimeout("getdataheight()", initialdelay);
}

function getdataheight(){
// get the object's height (half)
thelength=dataobj.offsetHeight/2-2;
if (thelength==0)
setTimeout("getdataheight()",10);
else
scrollDiv();
}

function scrollDiv(){
// set the vertical position of the div
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px";
// if the position is smaller than the height then reset
if (scrollspeed > 0) {
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px";
}
else {
if (parseInt(dataobj.style.top)>0)
dataobj.style.top = (parseInt(dataobj.style.top) - (thelength)) + "px";
}
setTimeout("scrollDiv()",40);
}

//-->
</SCRIPT>

ddadmin
12-21-2004, 12:13 AM
Interesting modification! I like the feature of using the mouse to control its direction.