Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with scroll code.

    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
    Last edited by Noumenon; 08-27-2004 at 02:16 AM.

  • #2
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this with the java:

    Code:
    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:

    Code:
    <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">
    Last edited by DooM_MonkeY; 08-27-2004 at 03:47 AM. Reason: Fixing the "swapIMG" code.. that was for a different javascript
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    đ­˘M_M÷˝kŔą

  • #3
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    đ­˘M_M÷˝kŔą

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Smooth scrolling with javascript...
    Just make the setTimeout interval (10 in this case) to variable or function argument.

  • #5
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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%20dx2%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%20else%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.scrollTo%28x%2C%200%29%3B%0D%0A%20%20%7D%0D%0A%7D%0D%0A%0D%0A%3C/script%3E"));
    //-->
    </SCRIPT>

  • #6
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried it with this code now:
    Code:
    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.
    Last edited by Noumenon; 08-27-2004 at 02:16 PM.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 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>

  • #8
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Noumenon; 08-28-2004 at 12:55 PM.

  • #9
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone got an idea?

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 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>

  • #11
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, thanx alot!

    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.
    Last edited by Noumenon; 09-01-2004 at 12:48 AM.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    var doc = document.getElementById('body').document[getDocElName()];

  • #13
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanx for replying

    this is the code right now, doesn't work though:
    PHP Code:
    <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 doc.scrollLeft;
        if (
    x<targetXPos){
            
    parent.main.scrollBy(scrollPixel0); //scroll to the right
            
    doc.scrollLeft//get new position
            
    if (x<targetXPos){
               
    t=setTimeout('moveX('+targetXPos+')'speed);
            }
            else{
               
    clearTimeout(t);
            }
        }
        else {
            
    parent.main.scrollBy(-scrollPixel0); //scroll to the left
            
    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> 
    Last edited by Noumenon; 09-01-2004 at 12:35 PM.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 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.

  • #15
    New Coder
    Join Date
    Aug 2004
    Location
    Uppsala, Sweden
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanx alot!
    It works wonderful!

    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!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •