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>
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.
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.
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
Try this:
Code:
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>
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.
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
Forgot to get the current position again after doing scrollBy. Try this updated code:
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>
<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>
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
Try this:
Code:
<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.
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?
Before you post, read our: 
