Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Copy and Paste Vertical Scroller

  1. #1
    Join Date
    May 2017
    Location
    South East Queensland Australia
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Copy and Paste Vertical Scroller

    I have copied and pasted the code from this website(http://www.javascriptkit.com/script/...scroller.shtml) but having embedded into a webpage I cannot find how to make it function.

    It seems like some other components are missing particularly a section where it calls up the content to go into the scroll boxes

    Could somebody please give me some assist with this?

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    That's a pretty old script and will not work in any modern browser. With a little tweaking, however, it can:

    Code:
    <script>
    
    //Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
    //Updated for bug fixes
    //Visit JavaScript Kit (http://javascriptkit.com) for script
    
    //ENTER CONTENT TO SCROLL BELOW.
    (function(){
    var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';
    
    var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS.
    var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS.
    var boxcolor="#FFF6e9";   // BACKGROUND BOX COLOR.
    var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
    var pixelstep=2;          // PIXELS "STEPS" PER REPITITION.
    var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE
    
    // DO NOT EDIT BEYOND THIS POINT
    
    var txt='';
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
    txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
    txt+='</div>';
    document.write(txt);
    
    function getElHeight(el){
    return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
    }
    
    function getPageLeft(el){
    var x;
    x = 0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    x+=el.offsetLeft;
    return x;
    }
    
    function getPageTop(el){
    var y;
    y=0;
    while(el.offsetParent!=null){
    y+=el.offsetTop;
    el=el.offsetParent;
    }
    y+=el.offsetTop;
    return y;
    }
    
    function scrollbox(){
    inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
    if(godown){
    if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
    }else{
    if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
    }}
    
    window.addEventListener('resize', function(){
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    }, false);
    
    window.addEventListener('load', function(){
    outer=document.getElementById('outer');
    inner=document.getElementById('inner');
    ref=document.getElementById('ref');
    elementheight=getElHeight(inner);
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    inner.style.top=((godown)? -elementheight : boxheight)+'px';
    inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
    outer.style.visibility="visible";
    setInterval(scrollbox,speed);
    }, false);
    })();
    </script>
    
    <p align="center">This free script provided by<br />
    <a href="http://www.javascriptkit.com">JavaScript
    Kit</a></p>
    If you want more help, please post a link to the page on your site that has this code on it.
    Last edited by jscheuer1; 05-15-2017 at 04:15 PM. Reason: code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2017
    Location
    South East Queensland Australia
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Last Itteration

    I had no luck John with the new code supplied so I have uploaded the page to one of my web sites so you can see what I am doing wrong

    See- http://goofygoogle.com/docs/scroller.html

    Many Thanks

    Warren

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    Well I did modify the code a few times, and settled on this:

    Code:
    <script>
    
    //Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
    //Updated for bug fixes
    //Visit JavaScript Kit (http://javascriptkit.com) for script
    
    //ENTER CONTENT TO SCROLL BELOW.
    (function(){
    var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';
    
    var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS.
    var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS.
    var boxcolor="#FFF6e9";   // BACKGROUND BOX COLOR.
    var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
    var pixelstep=2;          // PIXELS "STEPS" PER REPITITION.
    var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE
    
    // DO NOT EDIT BEYOND THIS POINT
    
    var txt='';
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
    txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
    txt+='</div>';
    document.write(txt);
    
    function getElHeight(el){
    return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
    }
    
    function getPageLeft(el){
    var x;
    x = 0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    x+=el.offsetLeft;
    return x;
    }
    
    function getPageTop(el){
    var y;
    y=0;
    while(el.offsetParent!=null){
    y+=el.offsetTop;
    el=el.offsetParent;
    }
    y+=el.offsetTop;
    return y;
    }
    
    function scrollbox(){
    inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
    if(godown){
    if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
    }else{
    if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
    }}
    
    window.addEventListener('resize', function(){
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    }, false);
    
    window.addEventListener('load', function(){
    outer=document.getElementById('outer');
    inner=document.getElementById('inner');
    ref=document.getElementById('ref');
    elementheight=getElHeight(inner);
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    inner.style.top=((godown)? -elementheight : boxheight)+'px';
    inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
    outer.style.visibility="visible";
    setInterval(scrollbox,speed);
    }, false);
    })();
    </script>
    
    <p align="center">This free script provided by<br />
    <a href="http://www.javascriptkit.com">JavaScript
    Kit</a></p>
    You should not try more than one version on the same page, though I'm not certain that was the problem. In fact looking at it closer, it looks like you added extra line breaks. In any case, it's clear this latest version works:

    http://jscheuer1.com/demos/tidbits/jkitscroller.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2017
    Location
    South East Queensland Australia
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    RE:- [QUOTE=jscheuer1;321737] Well I did modify the code a few times, and settled on this:

    Thanks John

    I have a copied and pasted the new code and put it up back on the same webpage but still the scroll does not work.

    I clicked on the link that you have at the bottom of your last response [http://jscheuer1.com/demos/tidbits/jkitscroller.htm] and I see that the scroll works perfectly.

    So what am I doing wrong (or not understanding) Iím sure it must be some small thing

    Thanks

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    Same problem as before. Somehow extra line breaks (and it looks like non-standard code as well) have been introduced. Where the page on your site has:

    Code:
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; 
    txt+height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>'; 
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; 
    txt+height:'+boxheight+'px; visibility:hidden; 
    txt+background-color:'+boxcolor+'; overflow:hidden" >'; ='<div 
    txt+id="inner"  style="position:absolute; visibility:visible; left:2px; 
    txt+top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; 
    txt+cursor:default;">'+content+'</div>';
    txt+='</div>';
    It needs to be:

    Code:
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
    txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
    txt+='</div>';
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2017
    Location
    South East Queensland Australia
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Okay I have it working now

    Thanks for all your assistance

    Warren

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    Great! And for you, or anyone else interested in this particular bit of code, I discovered some strict errors that I've fixed in this version (additions highlighted):

    Code:
    <script>
    
    //Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
    //Updated for bug fixes
    //Visit JavaScript Kit (http://javascriptkit.com) for script
    
    //ENTER CONTENT TO SCROLL BELOW.
    (function(){
    var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';
    
    var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS.
    var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS.
    var boxcolor="#FFF6e9";   // BACKGROUND BOX COLOR.
    var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
    var pixelstep=2;          // PIXELS "STEPS" PER REPITITION.
    var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE
    
    // DO NOT EDIT BEYOND THIS POINT
    
    var txt='', outer, inner, ref, elementheight;
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
    txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
    txt+='</div>';
    document.write(txt);
    
    function getElHeight(el){
    return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
    }
    
    function getPageLeft(el){
    var x;
    x = 0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    x+=el.offsetLeft;
    return x;
    }
    
    function getPageTop(el){
    var y;
    y=0;
    while(el.offsetParent!=null){
    y+=el.offsetTop;
    el=el.offsetParent;
    }
    y+=el.offsetTop;
    return y;
    }
    
    function scrollbox(){
    inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
    if(godown){
    if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
    }else{
    if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
    }}
    
    window.addEventListener('resize', function(){
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    }, false);
    
    window.addEventListener('load', function(){
    outer=document.getElementById('outer');
    inner=document.getElementById('inner');
    ref=document.getElementById('ref');
    elementheight=getElHeight(inner);
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    inner.style.top=((godown)? -elementheight : boxheight)+'px';
    inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
    outer.style.visibility="visible";
    setInterval(scrollbox,speed);
    }, false);
    })();
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    May 2017
    Location
    South East Queensland Australia
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    Yes it does the job really well.

    I have one small request and please feel comfortable in declining, but the only other feature I would really like was to be able to use a mouse over function to halt the Scroller and let it continue when the cursor was removed.

    I noticed in some of the other scroll code that is around have this feature i.e.(" onmouseover="sspeed=0;" onmouseout=" )

    Iíve tried to compare the codes to see where I might be able to insert it to garnish this facility but alas I am a stranger to JavaScript and J query so hopelessly out of my depth.

    Is it possible you could show me what and where to insert a mouse over capability?


    Regards and Thanks

    Warren

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,218
    Thanks
    74
    Thanked 3,384 Times in 3,345 Posts
    Blog Entries
    12

    Default

    Sure:

    Code:
    <script>
    
    //Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
    //Updated for bug fixes
    //Visit JavaScript Kit (http://javascriptkit.com) for script
    
    //ENTER CONTENT TO SCROLL BELOW.
    (function(){
    var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';
    
    var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS.
    var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS.
    var boxcolor="#FFF6e9";   // BACKGROUND BOX COLOR.
    var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
    var pixelstep=2;          // PIXELS "STEPS" PER REPITITION.
    var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE
    
    // DO NOT EDIT BEYOND THIS POINT
    
    var txt='', outer, inner, ref, elementheight, mouseisover;
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
    txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
    txt+='</div>';
    document.write(txt);
    
    function getElHeight(el){
    return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
    }
    
    function getPageLeft(el){
    var x;
    x = 0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    x+=el.offsetLeft;
    return x;
    }
    
    function getPageTop(el){
    var y;
    y=0;
    while(el.offsetParent!=null){
    y+=el.offsetTop;
    el=el.offsetParent;
    }
    y+=el.offsetTop;
    return y;
    }
    
    function scrollbox(){
    if(mouseisover){return;}
    inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
    if(godown){
    if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
    }else{
    if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
    }}
    
    window.addEventListener('resize', function(){
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    }, false);
    
    window.addEventListener('load', function(){
    outer=document.getElementById('outer');
    outer.addEventListener('mouseover', function(){mouseisover = true;}, false);
    outer.addEventListener('mouseout', function(){mouseisover = false;}, false);
    inner=document.getElementById('inner');
    ref=document.getElementById('ref');
    elementheight=getElHeight(inner);
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    inner.style.top=((godown)? -elementheight : boxheight)+'px';
    inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
    outer.style.visibility="visible";
    setInterval(scrollbox,speed);
    }, false);
    })();
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. [Help needed] Copy & Paste
    By Slobrob in forum JavaScript
    Replies: 2
    Last Post: 08-06-2011, 11:59 PM
  2. Copy and paste...
    By Jack in forum The lounge
    Replies: 4
    Last Post: 03-05-2011, 08:59 PM
  3. cut copy paste
    By mido911 in forum JavaScript
    Replies: 3
    Last Post: 12-25-2010, 10:18 PM
  4. Hedge for copy/paste...
    By Cagatay in forum PHP
    Replies: 5
    Last Post: 09-01-2008, 04:03 AM
  5. Disable copy & paste in Firefox
    By mrstsukiyama in forum Looking for such a script or service
    Replies: 5
    Last Post: 11-30-2007, 10:08 PM

Bookmarks

Posting Permissions

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