PDA

Click to See Complete Forum and Search --> : verticall text scroolling

soniyakapoor03
January 27th, 2006, 06:40 AM
hi,
i want to scroll text from top to bottom in a web page ,but i cannot specify the heigt.depending on the the main content height, this text should start scrolling from bottom to top on th leftern side of the web page..
code urgently required.
regards
soniya
PeejAvery
January 27th, 2006, 05:10 PM
How about this...

<html>
<body marginwidth=0 marginheight=0 topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0>
<center>

<table width=800 height=100%>
<tr>
<td width=650>
</td>
<td>
<marquee scrollamount=5 scrolldelay=0 direction="up" style="height:100%">
Use the marquee.<br><br>
It is supported by almost all browsers.<br><br>
Only the old Netscape can't accept this.<br>
</marquee>
</td>
</tr>
</table>

</center>
</body>
</html>
soniyakapoor03
January 27th, 2006, 11:37 PM
i tried this code earlier. height% will not working in ie,
regards
soniya
PeejAvery
January 28th, 2006, 01:07 AM
i tried this code earlier. height% will not working in ie...
I don't have IE but I did think of that. Did you try my code out because I used the style.height not just the plain height parameter. The height parameter wouldn't work for Safari either but the style.height did.
soniyakapoor03
January 28th, 2006, 03:09 AM
hi, its working now.
soniyakapoor03
January 28th, 2006, 03:38 AM
marquee is not working because it is not comming from bottom of a table
PeejAvery
January 28th, 2006, 05:22 AM
Well, which is it? Working or not? Please post your code and we will fix it.
soniyakapoor03
January 28th, 2006, 05:51 AM
hi,
marquee is not working .
it is starting from the middle.
i want to scroll from bottom to top
i am pasting the full html code here.



<body>
<center>
<form id="Form1" method="post" runat="server">
<table id="AutoNumber1" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="775" border="0">
<tr>
<td width="775">
<table id="AutoNumber2" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="775" border="0">
<tr>
<td width="775">
<table id="AutoNumber3" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="775" border="0">
<tr>
<td width="345" height="87">&nbsp;</td>
<td vAlign="top" width="445" height="87">
<table id="AutoNumber4" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="87"
cellSpacing="0" cellPadding="0" width="430" border="0">
<tr>
<td width="409">
<table id="AutoNumber22" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="409" border="0">
<tr>
<td width="220">&nbsp;</td>
<td width="150">
&nbsp;</td>
<td width="25">&nbsp;</td>
</tr>
</table>
</td>
<td width="21" background="images/logo_toprightstrip.gif">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="775">
<table id="AutoNumber41" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="775" border="0">
<tr>
<td width="423">&nbsp;</td>
<td vAlign="top" width="331">&nbsp;</td>
<td width="21" background="images/logo_toprightstrip.gif">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="775">
<table id="AutoNumber42" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="775" border="0">
<tr>
<td width="99">&nbsp;</td>
<td width="116">&nbsp;</td>
<td width="105">&nbsp;</td>
<td width="122">&nbsp;</td>
<td width="105">&nbsp;</td>
<td width="104">&nbsp;</td>
<td width="103"></A></td>
<td width="21" background="images/logo_toprightstrip.gif">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="775">
<table id="AutoNumber43" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="775" border="0">
<tr>
<td width="22" background="images/bg_leftstrip.gif"></td>
<td width="732">
<table id="AutoNumber44" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="732" border="1">
<tr>
<td vAlign="top" width="170">


<marquee scrollamount=5 scrolldelay=0 direction="up" style.height:100%">
Use the marquee.<br><br>
It is supported by almost all browsers.<br><br>
Only the old Netscape can't accept this.<br>
</marquee>

</td>



<td vAlign="top" width="562">
<table class="left_bordertable" id="AutoNumber46" style="BORDER-COLLAPSE: collapse" borderColor="#111111"
cellSpacing="0" cellPadding="0" width="562" border="0">
<tr>
<td width="562">
<table id="AutoNumber50" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="562" border="0">
<tr>
<td width="100%">
<table id="AutoNumber51" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="562" border="0">
<tr>
<td width="562" colSpan="4" height="24"></td>
</tr>
<tr>
<td width="19">&nbsp;</td>
<td width="521" colSpan="2">&nbsp;</td>
<td width="22">&nbsp;</td>
</tr>
<tr>
<td width="562" colSpan="4" height="10"></td>
</tr>
<tr vAlign="top">
<td width="19"></td>
<td width="5"></td>
<td class="content" width="516">

content area

</td>
<td width="22">&nbsp;</td>
</tr>
<tr>
<td width="562" colSpan="4" height="9"></td>
</tr>
<tr>
<td width="19"></td>
<td width="5"></td>
<td width="516">
<hr color="#c7c7c7" SIZE="1">
</hr>
</td>
<td width="22"></td>
</tr>
<tr>
<td width="562" colSpan="4" height="10"></td>
</tr>
<tr>
<td width="19"></td>
<td width="5"></td>
<td width="516"></td>
<td width="22"></td>
</tr>
<tr>
<td width="19"></td>
<td width="5"></td>
<td width="516">
<table id="AutoNumber52" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="516" bgColor="#eeeeee" border="0">
<tr>
<td width="516">
<table id="AutoNumber53" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="516" border="0">
<tr>
<td width="516" colSpan="3" height="10"></td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">
<table id="AutoNumber54" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="481" border="0">
<tr class="form_content1">
<td width="155">&nbsp;</td>
<td width="91">&nbsp;</td>
<td width="48">&nbsp;</td>
<td width="32">&nbsp;</td>
<td width="155">&nbsp;</td>
</tr>
<tr>
<td width="155"><asp:textbox id="txtIndexFirstName" runat="server" CssClass="inputText"></asp:textbox></td>
<td width="91">&nbsp;</td>
<td width="48"><asp:textbox id="txtIndexMI" runat="server" CssClass="inputText" Width="71px"></asp:textbox></td>
<td width="32">&nbsp;</td>
<td width="155"><asp:textbox id="txtIndexLastName" runat="server" CssClass="inputText"></asp:textbox></td>
</tr>
</table>
</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">&nbsp;</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">
<table class="bodytabletext" id="AutoNumber35" style="BORDER-COLLAPSE: collapse" borderColor="#111111"
cellSpacing="0" cellPadding="0" width="481" border="0">
<tr>
<td class="form_content" width="481">&nbsp;</td>
</tr>
</table>
</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">&nbsp;</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td class="form_content" width="481">&nbsp;</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">&nbsp;</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td class="form_content" width="481">&nbsp;</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">&nbsp;</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td class="form_content" width="481">I</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">&nbsp;</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="8">&nbsp;</td>
<td width="481">
<table id="AutoNumber55" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="481" border="0">
<tr>
<td class="form_content" width="165">
<asp:dropdownlist id="ddlIndexState" runat="server" CssClass="inputSelectSmall" DESIGNTIMEDRAGDROP="225">
&nbsp;</asp:dropdownlist></td>
<td width="316"><asp:imagebutton id="imgSubmitBtn" runat="server" ImageUrl="images/btn_submit.gif"></asp:imagebutton><A href="loanapplication.aspx"></A></td>
</tr>
</table>
</td>
<td width="27">&nbsp;</td>
</tr>
<tr>
<td width="516" colSpan="3" height="34">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="22"></td>
</tr>
<tr>
<td width="562" colSpan="4" height="22">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="21" background="images/logo_toprightstrip.gif">&nbsp;</td>
</tr>
<tr>
<td width="22">&nbsp;</td>
<td vAlign="middle" width="732" background="images/bg_btmstrip.gif">
&nbsp;</td>
<td width="21" background="images/logo_toprightstrip.gif">
<p align="right">&nbsp;</p>
</td>
</tr>
<tr>
<td width="22" background="images/bg_leftstrip.gif">&nbsp;</td>
<td width="732">
<table id="AutoNumber57" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="52"
cellSpacing="0" cellPadding="0" width="732" border="0">
<tr>
<td width="732">
<table id="AutoNumber58" style="BORDER-COLLAPSE: collapse" borderColor="#111111" cellSpacing="0"
cellPadding="0" width="732" border="0">
<tr>
<td class="copyright" align="center" width="732">&nbsp;</td>
</tr>
<tr>
<td align="right" width="732">&nbsp;
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="21" background="images/logo_toprightstrip.gif">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
</body>
PeejAvery
January 28th, 2006, 06:10 AM
First off, if you look at your code, you will notice that you put style.height:100%. You misunderstood what I meant about parameters. It should be style="height:100%". But you must remember that unless you set height boundaries on the table this marquee will expand itself tall enough that it does not have to scroll but it will show every line instead.
soniyakapoor03
January 28th, 2006, 06:17 AM
if i put like this style="height:100%" it will not work on IE.
i tried it.
i cannot give the table height.it depends on the content area .
as content gets longer, scrolling length also gets longer.
vice versa.
height cannot be given.
PeejAvery
January 28th, 2006, 06:47 AM
If a marquee is set to 100% height, then it will keep expanding until it reaches 100%. Since you are setting no limits to the table, it will never reach 100% and therefore keep enlarging itself.

Now let's consider viewing size. You want a marquee to scroll from the bottom of the page all the way to the top. Say that page has 10 paragraphs of text. The marquee isn't even going to be seen since it is all the way at the bottom and has to make its way to the top. The person may not even see the marquee for half a minute.

I would suggest making the marquee sideways near the top. It is more practical and more professional.

By the way, marquees are not commonly used due to their nature. They tend to not really be the eye candy most web designers like. What are you using it for?
soniyakapoor03
January 28th, 2006, 06:58 AM
i want to scroll tesimonials of the customers from bottom to top.
i cannot change that requirement.

i used javascript problem is that i could not specify the height.
any option to find the table height on page load.
dynamically i have to determine the page height
web page is same i posted earlier.

any other option to scroll text vertically
PeejAvery
January 28th, 2006, 07:35 AM
any other option to scroll text vertically
Like I mentioned in your other thread, you can search Google for a JavaScript scrolling marquee.

Just remember that if you scroll it vertically and your page is taller than the screens view height, it may take a while before the marquee even becomes visible.

i want to scroll tesimonials of the customers from bottom to top.
Professionally, testimonials should be on a page where a visitor of your website should not have to follow text but be able to read the text easily. Keep this in mind if this site is to be advertising for a company.
soniyakapoor03
January 28th, 2006, 07:53 AM
i got a javascript code
i want to dynamically specify the height of the table column to the box height

javascript code

if we specify height like 500,300, it is working fine. but i want to dynamically specify the height.so that it goes from the bottom of the table to top.
please check the code. it is acode. i want use this javascript in my table.


<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):parseint(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>
soniyakapoor03
January 28th, 2006, 08:23 AM
i want to specify the height of the table column to the box height in the
javascript code below

<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):parseInt(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>
PeejAvery
January 28th, 2006, 08:40 AM
i got a javascript code
i want to dynamically specify the height of the table column to the box height

javascript code

if we specify height like 500,300, it is working fine. but i want to dynamically specify the height.so that it goes from the bottom of the table to top.
The only way you can do this is if you dynamically write the whole table through JavaScript. Then you could pick up the column's height.