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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    verticall scroll text

    i am using the following javascript in atable column.
    my table column height is dynamic. can any one specify me how to assign tablecolumn height to box height

    <script language="javascript">

    //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.
    var content='Enter text here to be scrolled<br><p>';
    var boxheight=100
    ; // BACKGROUND BOX height in PIXELS.
    var boxwidth=350; // BACKGROUND BOX WIDTH in PIXELS.
    var boxcolor="#FFF6e9"; // BACKGROUND BOX COLOR.
    var speed=150; // 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 outer,inner,elementheight,ref,refX,refY;
    var w3c=(document.getElementById)?true:false;
    var ns4=(document.layers)?true:false;
    var ie4=(document.all && !w3c)?true:false;
    var ie5=(document.all && w3c)?true:false;
    var ns6=(w3c && navigator.appName.indexof("Netscape")>=0)?true:false;
    var txt='';
    if(ns4){
    txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
    txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
    txt+='</td></tr></table>'
    txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
    txt+='<layer name="inner" width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
    txt+='</layer>';
    }else{
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
    txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
    txt+='</div>';
    }
    document.write(txt);

    function getElheight(el){
    if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
    else if(ie4¦¦ie5)return (el.style.height)? el.style.height : el.clientheight;
    else return (el.style.height)? parseint(el.style.height)arseint(el.offsetheight);
    }

    function getPageLeft(el){
    var x;
    if(ns4)return el.pageX;
    if(ie4¦¦w3c){
    x = 0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    x+=el.offsetLeft;
    return x;
    }}

    function getPagetop(el){
    var y;
    if(ns4)return el.pageY;
    if(ie4¦¦w3c){
    y=0;
    while(el.offsetParent!=null){
    y+=el.offsettop;
    el=el.offsetParent;
    }
    y+=el.offsettop;
    return y;
    }}

    function scrollbox(){
    if(ns4){
    inner.top+=(godown)? pixelstep: -pixelstep;
    if(godown){
    if(inner.top>boxheight)inner.top=-elementheight;
    }else{
    if(inner.top<2-elementheight)inner.top=boxheight+2;
    }}else{
    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.onresize=function(){
    if(ns4)setTimeout('history.go(0)', 400);
    else{
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPagetop(ref)+'px';
    }}

    window.onload=function(){
    outer=(ns4)?document.layers['outer']ie4)?document.all['outer']:document.getElementById('outer');
    inner=(ns4)?outer.document.layers['inner']ie4)?document.all['inner']:document.getElementById('inner');
    ref=(ns4)?document.layers['ref']ie4)?document.all['ref']:document.getElementById('ref');
    elementheight=getElheight(inner);
    if(ns4){
    outer.moveto(getPageLeft(ref),getPagetop(ref));
    outer.clip.width=boxwidth;
    outer.clip.height=boxheight;
    inner.top=(godown)? -elementheight : boxheight-2;
    inner.clip.width=boxwidth-4;
    inner.clip.height=elementheight;
    outer.visibility="show";
    inner.visibility="show";
    }else{
    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);
    }
    </script>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    error in posted coide so cant test

    but
    Code:
    window.onload=function(){
    boxheight=document.getElementById('fred').offseHeight;
    ....
    where fred is the ID of your table
    Code:
    <table id="fred"  width="100" height="333" border="1">
     <tr>

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    correct javascript code

    <script language="javascript">

    //ENTER CONTENT TO SCROLL BELOW.
    var content='<font face="verdana" style=FONT-SIZE:8pt>hello how are you</font>';

    var boxheight=111; // BACKGROUND BOX HEIGHT IN PIXELS.
    var boxwidth=208; // BACKGROUND BOX WIDTH IN PIXELS.
    var boxcolor="#FFFFFF"; // BACKGROUND BOX COLOR.
    var speed=100; // 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 outer,inner,elementheight,ref,refX,refY;
    var w3c=(document.getElementById)?true:false;
    var ns4=(document.layers)?true:false;
    var ie4=(document.all && !w3c)?true:false;
    var ie5=(document.all && w3c)?true:false;
    var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
    var txt='';
    if(ns4){
    txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
    txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
    txt+='</td></tr></table>'
    txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
    txt+='<layer name="inner" width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
    txt+='</layer>';
    }else{
    txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
    txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
    txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
    txt+='</div>';
    }
    document.write(txt);

    function getElHeight(el){
    if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
    else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
    else return (el.style.height)? parseInt(el.style.height)arseInt(el.offsetHeight);
    }

    function getPageLeft(el){
    var x;
    if(ns4)return el.pageX;
    if(ie4||w3c){
    x = 0;
    while(el.offsetParent!=null){
    x+=el.offsetLeft;
    el=el.offsetParent;
    }
    x+=el.offsetLeft;
    return x;
    }}

    function getPageTop(el){
    var y;
    if(ns4)return el.pageY;
    if(ie4||w3c){
    y=0;
    while(el.offsetParent!=null){
    y+=el.offsetTop;
    el=el.offsetParent;
    }
    y+=el.offsetTop;
    return y;
    }}

    function scrollbox(){
    if(ns4){
    inner.top+=(godown)? pixelstep: -pixelstep;
    if(godown){
    if(inner.top>boxheight)inner.top=-elementheight;
    }else{
    if(inner.top<2-elementheight)inner.top=boxheight+2;
    }}else{
    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.onresize=function(){
    if(ns4)setTimeout('history.go(0)', 400);
    else{
    outer.style.left=getPageLeft(ref)+'px';
    outer.style.top=getPageTop(ref)+'px';
    }}

    window.onload=function(){
    outer=(ns4)?document.layers['outer']ie4)?document.all['outer']:document.getElementById('outer');
    inner=(ns4)?outer.document.layers['inner']ie4)?document.all['inner']:document.getElementById('inner');
    ref=(ns4)?document.layers['ref']ie4)?document.all['ref']:document.getElementById('ref');
    elementheight=getElHeight(inner);
    if(ns4){
    outer.moveTo(getPageLeft(ref),getPageTop(ref));
    outer.clip.width=boxwidth;
    outer.clip.height=boxheight;
    inner.top=(godown)? -elementheight : boxheight-2;
    inner.clip.width=boxwidth-4;
    inner.clip.height=elementheight;
    outer.visibility="show";
    inner.visibility="show";
    }else{
    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);
    }
    </script>

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    have you tried the mod I posted?


    and please use the code tag maked as # on the reply/post panel

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    re

    it is not working. i could not specify the height of the table. idepending on the page content height will increase or decrease. so scroll area should increase or decrese

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    you do not need to specify the height
    offsetHeight will find the height.


  •  

    Posting Permissions

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