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.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Looking for a specific script - without success.

    A while back I was surfing some sites to get a few new ideas for a re-design I'm doing for a client.

    I came across the result of a fantastic little script that scrolls text - much like in an iFrame - using a "miniature" version of the standard browser scroll bar for a user-controlled news scroller.

    I don't know if I can do this or not without crossing a rule or two, but I guess the best way to demonstrate what I mean is by leading you to one of the sites that employ this little gem - the news scroller on www.koves.net.

    I have been searching high and low for 3 days now for even a bare-bones version of this script that I can build on, and have found nothing that comes close to what I'm looking for. I have found, however, a couple of scripts on some of the more popular archives but they are not easily manipulated.

    I don't know if anyone can help me out on this, but any assistance is greatly appreciated.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wrote this myself and give you (Well anyone really) the right to use it as you see fit:

    Code:
    <html>
    
    <head>
    <title></title>
    <script>
    
    box_h = 300
    box_w = 100
    
    function loader() {
    go=false;
    document.getElementById("tbl").height = box_h;
    document.getElementById("box").style.height = box_h;
    document.getElementById("box").style.width = box_w;
    h = -(document.getElementById("scr").scrollHeight-parseInt(document.getElementById("box").style.height));
    }
    
    function Scroll(x){
    x2 = x;
    y = parseInt(document.getElementById("scr").style.top);
    if (y>0) {
    document.getElementById("scr").style.top = 0;
    }else if (y<h) {
    document.getElementById("scr").style.top = h;
    }else{
    document.getElementById("scr").style.top = y+parseInt(x);
    }
    tmp = (-y/-h)*(box_h-60);
    //alert(h)
    document.getElementById("block").style.top = tmp;
    if (go) {
    setTimeout("Scroll(x2)",10);
    }
    }
    window.onload=loader;
    </script>
    </head>
    
    <body>
    
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <div style="overflow-y: hidden; width:150; height: 10; background-color:red; color: white;" id="box">
          <div id="scr" style="position: relative; top: 0px;">
          Hello<br><br>
          1<br>
          2<br>
          3<br>
          4<br>
          5<br>
          6<br>
          7<br>
          8<br>
          9<br>
          10<br>
          11<br>
          12<br>
          13<br>
          14<br>
          15<br>
          16<br>
          17<br>
          18<br>
          19<br>
          20
          </div></div>
        </td>
        <td>
          <table border="0" cellspacing="0" cellpadding="0" bgcolor="blue" id="tbl" width="8" height="100%">
            <tr>
              <td height="20" onmousedown="go=true; Scroll('1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
            </tr>
            <tr>
              <td id="empty" height="0" valign="top"><div style="position: relative; background-color: yellow; width: 100%; height: 20;" id="block"></div></td>
            </tr>
            <tr>
              <td height="20" onmousedown="go=true; Scroll('-1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    
    </body>
    
    </html>

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you VERY much. I'm going to play around with it, try to set it up so it fits in nice with my client's re-design, but this puts me MUCH further ahead than I have been in 3 days!

    I really appreciate it. Now all I have to do is try to get the "status" bar between the up/down buttons to work like the browser scroller does, and I'm all set. :-)

    Again, thank you VERY much. I hope I can someday return the favor!

    Dave

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    change:
    }else if (y<=h) {
    to:
    }else if (y<=h&&x==-1) {

    and:
    if (y>=0) {
    to:
    if (y>=0&&x==1) {

    and it will get rid of the jumping when you hit bottom/top

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Moz compatible:

    Code:
    <html>
    
    <head>
    <script>
    
    box_h = 300
    box_w = 100
    
    function loader() {
    go=false;
    document.getElementById("empty").height = box_h-40;
    document.getElementById("box").style.height = box_h;
    document.getElementById("box").style.width = box_w;
    document.getElementById("thetd").width = box_w;
    h = -(document.getElementById("scr").scrollHeight-parseInt(document.getElementById("box").style.height));
    }
    
    function Scroll(x){
    x2 = x;
    y = parseInt(document.getElementById("scr").style.top);
    if (y>=0&&x==1) {
    document.getElementById("scr").style.top = 0;
    }else if (y<=h&&x==-1) {
    document.getElementById("scr").style.top = h;
    }else{
    document.getElementById("scr").style.top = y+parseInt(x);
    }
    tmp = (-y/-h)*(box_h-60);
    //alert(h)
    document.getElementById("block").style.top = tmp;
    if (go) {
    setTimeout("Scroll(x2)",10);
    }
    }
    window.onload=loader;
    </script>
    </head>
    
    <body>
    
    <table height="0" bgcolor="blue" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td rowspan="3" id="thetd">
          <div style="overflow: hidden; width:10; height: 10; background-color:red; color: white;" id="box">
          <div id="scr" style="position: relative; top: 0px;">
          Hello<br><br>
          1<br>
          2<br>
          3<br>
          4<br>
          5<br>
          6<br>
          7<br>
          8<br>
          9<br>
          10<br>
          11<br>
          12<br>
          13<br>
          14<br>
          15<br>
          16<br>
          17<br>
          18<br>
          19<br>
          20
          </div></div>
        </td>
        <td height="20" width="10" onmousedown="go=true; Scroll('1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
      </tr>
      <tr>
        <td id="empty" height="0" width="10" valign="top"><div style="position: relative; background-color: yellow; width: 10; height: 20;" id="block"></div></td>
      </tr>
      <tr>
        <td height="20" width="10" onmousedown="go=true; Scroll('-1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
      </tr>
    </table>
    
    
    
    </body>
    
    </html>

  • #6
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I applied the changes you sent me, it eliminated the jumping just fine - unfortunately, it eliminated the stop at the top/bottom of the page as well.

    I tried playing with the code a bit, but I haven't been able to make it work properly.

    I'm fairly new to programming in Java, so you'll have to forgive my ignorance in these matters - I'm more of a graphic developer with no programming background than anything else who's trying to "straighten the learning curve" as quickly as possible.

    I'll keep at it, but you've been a great help this far! Thanks!

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Final version, fixed to your specs:

    Code:
    <html>
    
    <head>
    
    <script>
    
    box_h = 300
    box_w = 100
    
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    
    document.onmousemove = capmouse;
    
    var X = 0
    var Y = 0
    
    function capmouse(e) {
    if (ie) {
    Y = event.clientY + document.body.scrollTop
    }else if (ns6) {
    Y = e.pageY
    }
    }
    
    function loader() {
    go=false;
    jump=false;
    document.getElementById("empty").height = box_h-40;
    document.getElementById("box").style.height = box_h;
    document.getElementById("box").style.width = box_w;
    document.getElementById("thetd").width = box_w;
    h = -(document.getElementById("scr").scrollHeight-parseInt(document.getElementById("box").style.height));
    }
    
    function Scroll(x){
    x2 = x;
    y = parseInt(document.getElementById("scr").style.top);
    if (y>=0&&x==1) {
    document.getElementById("scr").style.top = 0;
    }else if (y<=h&&x==-1) {
    document.getElementById("scr").style.top = h;
    }else{
    document.getElementById("scr").style.top = y+parseInt(x);
    }
    tmp = (-y/-h)*(box_h-60);
    document.getElementById("block").style.top = tmp;
    if (go) {
    setTimeout("Scroll(x2)",10);
    }
    }
    function jumpto() {
    T = (Y-(document.getElementById("empty").offsetTop+document.getElementById("tbl").offsetTop))-10;
    if (T<0) {
    document.getElementById("block").style.top = 0;
    document.getElementById("scr").style.top = 0;
    }else if (T>box_h-60){
    document.getElementById("block").style.top = box_h-60;
    document.getElementById("scr").style.top = h;
    }else{
    document.getElementById("block").style.top = T;
    document.getElementById("scr").style.top = h*(T/(box_h-60));
    }
    if (jump) {
    setTimeout("jumpto()",10);
    }
    }
    window.onload=loader;
    </script>
    
    </head>
    
    <body onmousemove="return false;" onmouseup="go=false; jump=false;">
    
    <table height="0" bgcolor="blue" border="0" cellspacing="0" cellpadding="0" id="tbl">
      <tr>
        <td rowspan="3" id="thetd">
          <div style="overflow: hidden; width:10; height: 10; background-color:red; color: white;" id="box">
          <div id="scr" style="position: relative; top: 0px;">
          Hello<br><br>
          1<br>
          2<br>
          3<br>
          4<br>
          5<br>
          6<br>
          7<br>
          8<br>
          9<br>
          10<br>
          11<br>
          12<br>
          13<br>
          14<br>
          15<br>
          16<br>
          17<br>
          18<br>
          19<br>
          20
          </div></div>
        </td>
        <td height="20" width="10" onmousedown="go=true; Scroll('1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
      </tr>
      <tr>
        <td id="empty" height="0" width="10" valign="top" onmousedown="jump=true; jumpto();" onmouseup="jump=false;"><div style="position: relative; background-color: yellow; width: 10; height: 20;" id="block"></div></td>
      </tr>
      <tr>
        <td height="20" width="10" onmousedown="go=true; Scroll('-1');" onmouseup="go=false;" bgcolor="#c0c0c0"></td>
      </tr>
    </table>
    
    
    
    </body>
    
    </html>


  •  

    Posting Permissions

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