...

View Full Version : Help with scroll code.



Noumenon
08-27-2004, 02:05 AM
Hi.

I've written a webpage where a top frame makes the main frame scroll to various point with inserting <A HREF="javascript:scrollTo(538)" TARGET="main">BIOGRAPHY</A>.

It's scroll just like it should. how ever, I want more of a sweep feel to it.
I've tried adding parts like this in the header:
<SCRIPT>
var speed=3
</SCRIPT>


How should (or could) I do this?

-Mattias

DooM_MonkeY
08-27-2004, 03:42 AM
try this with the java:




var scroll;

function scrollerUp(theSpeed) {

window.frame1.scrollBy(0, -50);
scroll=setTimeout('scrollerUp()',theSpeed);
}
function scrollerDown(theSpeed) {

window.frame1.scrollBy(0, 50);
scroll=setTimeout('scrollerDown()',theSpeed);
}
function stop() {

clearTimeout(scroll);
}



then, the html:




<iframe name="frame1" src="yourSrc.html"></iframe>

<img src="yourUpImg.gif" style="cursor:hand;" onmousedown="scrollerUp(50);" onmouseup="stop();" onmouseout="stop();" id="scrollUp" width="22" height="22"><br>

<img src="yourDownImg.gif" style="cursor:hand;" onmousedown="scrollerDown(50);swap_img('scrollDown',image[1]);" onmouseup="stop();swap_img('scrollDown',image[0]);" onmouseout="stop();" id="scrollDown" width="22" height="22">

DooM_MonkeY
08-27-2004, 03:43 AM
NOt really on the lines of what you were doing.... but I dont really know what.. or how that would work (your code that is)

glenngv
08-27-2004, 04:04 AM
http://www.codingforums.com/showthread.php?t=39936#post209187
Just make the setTimeout interval (10 in this case) to variable or function argument.

Noumenon
08-27-2004, 01:02 PM
Don't know if I was really that clear in my first post.

The scrolling is horizontal. And it should just scroll to a specific position when a link in the menu that's placed in the top frame is clicked.

I made it work, but you don't see no scrolling. I also tried to use the code from our old asp-page, but since I'm not the writer I can't really understand it. That last code works on my page like it should, although you can only click on one link then IE crashes.

That code is this:

<SCRIPT>
<!--
document.write(unescape("%3Cscript%20language%3D%22JavaScript%22%3E%0D%0A%20%20%0D%0Avar%20x%20%3D%200%3B%20dx%20%3D%200%3B%2 0dx2%20%3D%201%3B%0D%0A%0D%0Afunction%20scrollit%28dest%29%20%7B%0D%0A%20%20%20%0D%0A%20%20dx%20%3D% 20Math.abs%28dest%20-%20x%29%20/%2030%3B%0D%0A%20%20if%20%28dx%3E50%29%20%7B%20dx%20%3D%2050%3B%20%7D%0D%0A%20%20dx2%20%3D%201%3B%0D %0A%20%20if%20%28dest%20%3C%20x%29%20%7B%20dx2%20%3D%20-1%3B%7D%0D%0A%20%20%0D%0A%20%20while%28dest%20%21%3D%20x%29%20%7B%0D%0A%0D%0A%20%20%20%20%20if%20%28 %28dx+1%29*%28dx+2%29/2%20%3C%3D%20Math.abs%28x-dest%29%29%20%7B%0D%0A%20%20%20%20%20%20%20%20dx%20%3D%20dx%20+%201%3B%0D%0A%20%20%20%20%20%7D%20els e%20%7B%0D%0A%20%20%20%20%20%20%20%20if%20%28dx*%28dx+1%29/2%20%3E%20Math.abs%28x-dest%29%29%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20dx%20%3D%20dx%20-%201%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%7D%0D%0A%09%20x%20%3D%20x%20+%20dx*dx2 %3B%0D%0A%09%20if%20%28dx%3E50%29%20%7B%20dx%20%3D%2050%3B%20%7D%0D%0A%20%0D%0A%09%20parent.main.scr ollTo%28x%2C%200%29%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%0D%0A%3C/script%3E"));
//-->
</SCRIPT>

Noumenon
08-27-2004, 02:12 PM
I've tried it with this code now:

var t;

function Bio(targetXPos) {
var x = document[getDocElName()].scrollLeft;
if (x<targetXPos){
parent.main.scrollTo(targetXPos);
t=setTimeout('Bio('+targetXPos+')',10);
}
else clearTimeout(t);
return false;
}

function Disco(targetXPos) {
var x = document[getDocElName()].scrollLeft;
if (x<targetXPos){
parent.main.scrollTo(targetXPos);
t=setTimeout('Disco('+targetXPos+')',10);
}
else clearTimeout(t);
return false;
}

function getDocElName(){
if(document.compatMode && document.compatMode == "CSS1Compat"){
return "documentElement";
}
else{
return "body";
}
}


<A HREF="#BIO" onClick="return Bio(538)">BIOGRAPHY</A> and
<A HREF="#DISCO" onClick="return Disco(1076)">DISCOGRAPHY</A>
as triggers.

It works going from bio to disco, but from disco to bio it goes mad, just blinking the two "pages" at a extreme rate. I guess this has to do with the scrollLeft variable.

I don't get a scroll feel to it, no matter how I set the time variable: t=setTimeout('Disco('+targetXPos+')',10);

I've also tried making just one function called Scrolling (instead of Bio and Disco), but that don't work at all with more than one trigger.

glenngv
08-28-2004, 10:27 AM
Try this:


var speed = 10; //in milliseconds
var scrollPixel = 50; //number of pixel to scroll for each loop
var t; //timer

function moveX(targetXPos) {
var x = document[getDocElName()].scrollLeft;
if (x<targetXPos){
parent.main.scrollBy(scrollPixel, 0); //scroll to the right
if (x<targetXPos){
t=setTimeout('moveX('+targetXPos+')', speed);
}
else{
clearTimeout(t);
}
}
else {
parent.main.scrollBy(-scrollPixel, 0); //scroll to the left
if (x>targetXPos){
t=setTimeout('moveX('+targetXPos+')', speed);
}
else{
clearTimeout(t);
}
}
return false;
}
...
<a href="#BIO" onclick="return moveX(538)">BIOGRAPHY</a>
<a href="#DISCO" onclick="return moveX(1076)">DISCOGRAPHY</a>

Noumenon
08-28-2004, 12:49 PM
I see your point, but it don't work, I just get a "error on page" msg. :(
......

ops, forgot to include the getDocElName() function.

It scrolls smoothly now. but no to the points I've entered. It just goes to the end of the page and when clicking for something that lies on the left (-ScrollBy) you have to hit the link several times to come there.

Noumenon
08-29-2004, 01:11 PM
Anyone got an idea?

glenngv
08-30-2004, 02:49 AM
Forgot to get the current position again after doing scrollBy. Try this updated code:


var speed = 10; //in milliseconds
var scrollPixel = 50; //number of pixel to scroll for each loop
var t; //timer

function moveX(targetXPos) {
var doc = document[getDocElName()]; //store in a variable for efficiency
var x = doc.scrollLeft;
if (x<targetXPos){
parent.main.scrollBy(scrollPixel, 0); //scroll to the right
x = doc.scrollLeft; //get new position
if (x<targetXPos){
t=setTimeout('moveX('+targetXPos+')', speed);
}
else{
clearTimeout(t);
}
}
else {
parent.main.scrollBy(-scrollPixel, 0); //scroll to the left
x = doc.scrollLeft; //get new position
if (x>targetXPos){
t=setTimeout('moveX('+targetXPos+')', speed);
}
else{
clearTimeout(t);
}
}
return false;
}
...
<a href="#BIO" onclick="return moveX(538)">BIOGRAPHY</a>
<a href="#DISCO" onclick="return moveX(1076)">DISCOGRAPHY</a>

Noumenon
08-30-2004, 10:21 PM
Okay, thanx alot! :D

One question though.
The contents to be scrolled have now been moved to an iframe, how do I adress it?

the script is placed in main.php and in main.php there is an iframe where body.php is placed. the iframe is named body.

I've tried changing document[getDocElName()] to document[getElementById('body')] and parent.main to document.frames['body'].
that didn't work either.

glenngv
09-01-2004, 02:02 AM
var doc = document.getElementById('body').document[getDocElName()];

Noumenon
09-01-2004, 12:24 PM
thanx for replying :)

this is the code right now, doesn't work though:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var speed = 10; //in milliseconds
var scrollPixel = 30; //number of pixel to scroll for each loop
var t; //timer

function moveX(targetXPos) {
var doc = document.getElementById('body').document[getDocElName()]; //store in a variable for efficiency
var x = doc.scrollLeft;
if (x<targetXPos){
parent.main.scrollBy(scrollPixel, 0); //scroll to the right
x = doc.scrollLeft; //get new position
if (x<targetXPos){
t=setTimeout('moveX('+targetXPos+')', speed);
}
else{
clearTimeout(t);
}
}
else {
parent.main.scrollBy(-scrollPixel, 0); //scroll to the left
x = doc.scrollLeft; //get new position
if (x>targetXPos){
t=setTimeout('moveX('+targetXPos+')', speed);
}
else{
clearTimeout(t);
}
}
return false;
}
function getDocElName(){
if(document.compatMode && document.compatMode == "CSS1Compat"){
return "documentElement";
}
else{
return "body";
}
}
//-->
</SCRIPT>

glenngv
09-02-2004, 07:41 AM
Try this:


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

var speed = 20; //in milliseconds
var scrollPixel = 5; //number of pixel to scroll for each loop (the smaller, the slower the movement)
var t; //timer
var initialX;
var previousX;

function moveX(targetXPos, targetId) {
var target = (targetId) ? document.getElementById(targetId):window; //defaults to current window if targetId of IFrame is not specified
var targetWindow = (target.contentWindow) ? target.contentWindow:target;
var doc = (target==window) ? window.document:getIFrameDoc(targetId);
if (doc){
doc = doc[getDocElName(targetId)];
}
else {
return false;
}
var x = doc.scrollLeft;
if (typeof initialX == "undefined") initialX = x;
previousX = x;
if (x<targetXPos){
targetWindow.scrollBy(scrollPixel, 0); //scroll to the right
x = doc.scrollLeft; //get new position
if (x == initialX){ //did not scroll at all, meaning window has no scrollbar
return false;
}
if (x == previousX){ //has scrolled to the end but targetXPos is not yet reached
clearTimeout(t);
return false;
}
if (x<targetXPos){ //not yet reached the targetXPos
t=setTimeout("moveX("+targetXPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetXPos
if (x>targetXPos) targetWindow.scrollBy(-scrollPixel, 0); //prevent movement if already in the same position
clearTimeout(t);
}
}
else {
targetWindow.scrollBy(-scrollPixel, 0); //scroll to the left
x = doc.scrollLeft;
if (x == initialX){ //did not scroll at all, meaning window has no scrollbar
return false;
}
if (x == previousX){ //has scrolled to the end but targetXPos is not yet reached
clearTimeout(t);
return false;
}
if (x>targetXPos){ //not yet reached the targetXPos
t=setTimeout("moveX("+targetXPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetXPos
if (x<targetXPos) targetWindow.scrollBy(scrollPixel, 0); //prevent movement if already in the same position
clearTimeout(t);
}
}
return false;
}

function getDocElName(iframeId){
var doc = (iframeId) ? getIFrameDoc(iframeId):window.document;
if(doc && doc.compatMode && doc.compatMode == "CSS1Compat"){
return "documentElement";
}
else{
return "body";
}
}

function getIFrameDoc(iframeId)
{
var oIframe = document.getElementById(iframeId);
if (oIframe != null)
{
if (oIframe.contentDocument)
return oIframe.contentDocument;
else if (oIframe.contentWindow)
return oIframe.contentWindow.document;
else if (oIframe.document)
return oIframe.document;
}
return null;
}
</script>
</head>
<body>
<a href="test.htm#bio" target="bodyFrame" onclick="return moveX(538, 'bodyFrame')">BIO</a>
<a href="test.htm#disco" target="bodyFrame" onclick="return moveX(1076, 'bodyFrame')">DISCOGRAPHY</a>
<iframe src="test.htm" id="bodyFrame" name="bodyFrame" style="width:800px"></iframe>
</body>
</html>

Rename the id of the iframe from body to something else (I used bodyFrame in my solution). It conflicts with the document.body. Change all occurrences of test.htm with your actual page in the iframe.

The moveX() can be used to scroll an IFrame or the current window. Just specify the id of the iframe in the second parameter to scroll an iframe or don't specify the parameter if the target is the current window.

Noumenon
09-02-2004, 11:39 AM
Thanx alot!
It works wonderful! :D :thumbsup:

Say that I add two other iframes in the future and want to do the same thing with them, could I use the same script and just change the moveX(0, 'bodyFrame')-frame tag to the different names of the iframes, or do I have to duplicate the code?

and one last question *S*
could I change all the x-parameters and scrollLeft to y and scrollTop to scroll it vertically?

Once again, thanx alot!

glenngv
09-02-2004, 12:02 PM
Say that I add two other iframes in the future and want to do the same thing with them, could I use the same script and just change the moveX(0, 'bodyFrame')-frame tag to the different names of the iframes, or do I have to duplicate the code?

No need to duplicate the code, just specify the id of the target frame.
For the vertical scrolling, try this. Not tested.


var initialY;
var previousY;

function moveY(targetYPos, targetId) {
var target = (targetId) ? document.getElementById(targetId):window; //defaults to current window if targetId of IFrame is not specified
var targetWindow = (target.contentWindow) ? target.contentWindow:target;
var doc = (target==window) ? window.document:getIFrameDoc(targetId);
if (doc){
doc = doc[getDocElName(targetId)];
}
else {
return false;
}
var y = doc.scrollTop;
if (typeof initialY == "undefined") initialY = y;
previousY = y;
if (y<targetYPos){
targetWindow.scrollBy(0, scrollPixel); //scroll to the right
y = doc.scrollTop; //get new position
if (y == initialY){ //did not scroll at all, meaning window has no scrollbar
return false;
}
if (y == previousY){ //has scrolled to the end but targetYPos is not yet reached
clearTimeout(t);
return false;
}
if (y<targetYPos){ //not yet reached the targetYPos
t=setTimeout("moveY("+targetYPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetYPos
if (y>targetYPos) targetWindow.scrollBy(0, -scrollPixel); //prevent movement if already in the same position
clearTimeout(t);
}
}
else {
targetWindow.scrollBy(0, -scrollPixel); //scroll to the left
y = doc.scrollTop;
if (y == initialY){ //did not scroll at all, meaning window has no scrollbar
return false;
}
if (y == previousY){ //has scrolled to the end but targetYPos is not yet reached
clearTimeout(t);
return false;
}
if (y>targetYPos){ //not yet reached the targetYPos
t=setTimeout("moveY("+targetYPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetYPos
if (y<targetYPos) targetWindow.scrollBy(0, scrollPixel); //prevent movement if already in the same position
clearTimeout(t);
}
}
return false;
}

MikeFoster
09-02-2004, 04:32 PM
Cool stuff :)

I wrote something similar a while back... xWinScrollTo() (http://cross-browser.com/x/examples/xwinscrollto.html). Scrolls window with sinusoidal rate in specified time.

Noumenon
09-02-2004, 10:47 PM
glenngv, once again, thanx alot!

MikeFoster, sinuwhat? :)

<edit>
Oh yeah, will those two scripts collide (moveX and moveY), or can I put them in one file, scroll.php, and insert them to the pages that need them without problem? :)
</edit>

MikeFoster
09-02-2004, 11:20 PM
MikeFoster, sinuwhat? :)

It's a rare mutation of sinus-infection ;) LOL!

glenngv
09-03-2004, 05:00 AM
glenngv, once again, thanx alot!

MikeFoster, sinuwhat? :)

<edit>
Oh yeah, will those two scripts collide (moveX and moveY), or can I put them in one file, scroll.php, and insert them to the pages that need them without problem? :)
</edit>
There should be no problem. But it's better to test it.

Noumenon
09-03-2004, 11:58 AM
glenngv. okay :)

mikefoster. haha ookay. I'm gonna checked it out. :)

Noumenon
09-05-2004, 10:36 PM
glenngv. can't tell if those two work together since the vertical scroller doesn't work at all. all it does is reload itself in the iframe. :confused:

like this
'page' with 'iframe'.
when I click the link to scroll the contents of iframe it loads the 'page' in the 'iframe'

glenngv
09-06-2004, 02:01 AM
I tested it in IE6 and Firefox and it works for me. There might be some other codes of yours that affects it.


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

var speed = 20; //in milliseconds
var scrollPixel = 5; //number of pixel to scroll for each loop (the smaller, the slower the movement)
var t; //timer
var initialX;
var previousX;
var initialY;
var previousY;

function moveX(targetXPos, targetId) {
var target = (targetId) ? document.getElementById(targetId):window; //defaults to current window if targetId of IFrame is not

specified
var targetWindow = (target.contentWindow) ? target.contentWindow:target;
var doc = (target==window) ? window.document:getIFrameDoc(targetId);
if (doc){
doc = doc[getDocElName(targetId)];
}
else {
return false;
}
var x = doc.scrollLeft;
if (typeof initialX == "undefined") initialX = x;
previousX = x;
if (x<targetXPos){
targetWindow.scrollBy(scrollPixel, 0); //scroll to the right
x = doc.scrollLeft; //get new position
if (x == initialX){ //did not scroll, assume window has no scrollbar
return false;
}
if (x == previousX){ //has scrolled to the end but targetXPos is not yet reached
clearTimeout(t);
return false;
}
if (x<targetXPos){ //not yet reached the targetXPos
t=setTimeout("moveX("+targetXPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetXPos
if (x>targetXPos) targetWindow.scrollBy(-scrollPixel, 0); //prevent movement if already in the same position
clearTimeout(t);
}
}
else {
targetWindow.scrollBy(-scrollPixel, 0); //scroll to the left
x = doc.scrollLeft;
if (x == initialX){ //did not scroll, assume window has no scrollbar
return false;
}
if (x == previousX){ //has scrolled to the end but targetXPos is not yet reached
clearTimeout(t);
return false;
}
if (x>targetXPos){ //not yet reached the targetXPos
t=setTimeout("moveX("+targetXPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetXPos
if (x<targetXPos) targetWindow.scrollBy(scrollPixel, 0); //prevent movement if already in the same position
clearTimeout(t);
}
}
return false;
}

function moveY(targetYPos, targetId) {
var target = (targetId) ? document.getElementById(targetId):window; //defaults to current window if targetId of IFrame is not

specified
var targetWindow = (target.contentWindow) ? target.contentWindow:target;
var doc = (target==window) ? window.document:getIFrameDoc(targetId);
if (doc){
doc = doc[getDocElName(targetId)];
}
else {
return false;
}
var y = doc.scrollTop;
if (typeof initialY == "undefined") initialY = y;
previousY = y;
if (y<targetYPos){
targetWindow.scrollBy(0, scrollPixel); //scroll downward
y = doc.scrollTop; //get new position
if (y == initialY){ //did not scroll at all, meaning window has no scrollbar
return false;
}
if (y == previousY){ //has scrolled to the end but targetYPos is not yet reached
clearTimeout(t);
return false;
}
if (y<targetYPos){ //not yet reached the targetYPos
t=setTimeout("moveY("+targetYPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetYPos
if (y>targetYPos) targetWindow.scrollBy(0, -scrollPixel); //prevent movement if already in the same position
clearTimeout(t);
}
}
else {
targetWindow.scrollBy(0, -scrollPixel); //scroll upward
y = doc.scrollTop;
if (y == initialY){ //did not scroll at all, meaning window has no scrollbar
return false;
}
if (y == previousY){ //has scrolled to the end but targetYPos is not yet reached
clearTimeout(t);
return false;
}
if (y>targetYPos){ //not yet reached the targetYPos
t=setTimeout("moveY("+targetYPos+",'"+targetId+"')", speed);
}
else{ //has reached the targetYPos
if (y<targetYPos) targetWindow.scrollBy(0, scrollPixel); //prevent movement if already in the same position
clearTimeout(t);
}
}
return false;
}

function getDocElName(iframeId){
var doc = (iframeId) ? getIFrameDoc(iframeId):window.document;
if(doc && doc.compatMode && doc.compatMode == "CSS1Compat"){
return "documentElement";
}
else{
return "body";
}
}

function getIFrameDoc(iframeId)
{
var oIframe = document.getElementById(iframeId);
if (oIframe != null)
{
if (oIframe.contentDocument)
return oIframe.contentDocument;
else if (oIframe.contentWindow)
return oIframe.contentWindow.document;
else if (oIframe.document)
return oIframe.document;
}
return null;
}
</script>
</head>
<body>
<a href="test.htm#bio" target="bodyFrame" onclick="return moveX(300,'bodyFrame')">BIO - horizontal</a>
<a href="test.htm#disco" target="bodyFrame" onclick="return moveX(500,'bodyFrame')">DISCOGRAPHY - horizontal</a>
<a href="test.htm#bio" target="bodyFrame" onclick="return moveY(300,'bodyFrame')">BIO - vertical</a>
<a href="test.htm#disco" target="bodyFrame" onclick="return moveY(500,'bodyFrame')">DISCOGRAPHY - vertical</a><br />
<iframe src="test.htm" id="bodyFrame" name="bodyFrame" style="width:400px"></iframe>
</body>
</html>

Noumenon
09-06-2004, 09:40 AM
Hm okay. I'll have to go through it all once more since neither of them worked in firefox. Thanx anyway :)

Noumenon
09-06-2004, 10:27 AM
I found the problem.
Removing the line with "specefied" solved it.
The debug was complaining about it.

One thing that disturbs me is that in IE you can set the <FRAME Scrolling="no"> to no and it still works, but in firefox it just scrolls 22 pixels each time I hit the link. (22 pixels is what I have specefied in scrollPixel.)

Noumenon
09-10-2004, 01:27 AM
to see what I mean look here: http://212.112.183.83/main.php

one funny thing I noticed was that the scroller on my mouse has no effect in IE but it scrolls the pages in Firefox :P

glenngv
09-10-2004, 02:53 AM
I've already seen the behavior in Firefox when you first said about that scrolling="no". I haven't think of a solution at the moment. What I've seen in Firefox is the page scrolls when scrollBy() is called but scrollLeft() still returns 0. So I can't detect if the page is really scrollable or not.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum