asked on

Can I place a layer inside of a table cell?

I am desperately trying to get some text that scrolls inside of a cell. It must be inside of the cell so that if a user resizes the window the scrolling text box will remain centered. I am using a dreamweaver extension that creates a scrolling text box in a layer. Is there any way to confine this layer to the center column of my table? Or does anyone have another idea of how I can get scrolling text inside of a cell. Here is what I have now:

http://www.glowfishtw.com/flagfootball/index.aspx

and my code is attached. Thanks for any help.

<script type="text/JavaScript">
<!--
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function flvS3(v1){//v1.2
var v2=MM_findObj(v1);if (!v2){this.x=this.y=this.h=this.w=0;return;}var v3,v4,v5,v6,v7=(document.layers)?v2:v2.style;v3=isNaN(parseInt(v7.left))?v2.offsetLeft:parseInt(v7.left);v4=isNaN(parseInt(v7.top))?v4=v2.offsetTop:parseInt(v7.top);if (v2.offsetHeight){v5=v2.offsetHeight;v6=v2.offsetWidth;}else if (document.layers){v5=v7.clip.height;v6=v7.clip.width;}else {v5=v6=0;}this.x=parseInt(v3);this.y=parseInt(v4);this.h=parseInt(v5);this.w=parseInt(v6);}
 
function flvS8(v1,v2,v3){//v1.0
var v4=(document.layers)?v1:v1.style;var v5=flvS5();eval("v4.left='"+v2+v5+"'");eval("v4.top='"+v3+v5+"'");}
 
function flvS5(){//v1.0
var v1=((parseInt(navigator.appVersion)>4||navigator.userAgent.indexOf("MSIE")>-1)&&(!window.opera))?"px":"";return v1;}
 
function flvXAS1(){
var v1=arguments,v2=v1.length,v3='AutoScrollContainer',v4='AutoScrollContent';var v5=MM_findObj(v3),v6=MM_findObj(v4);if (!v5){return;}if (v5.XAS1!=null){clearTimeout(v5.XAS1);}var v7=(v2>0)?parseInt(v1[0]):1;if (v7){var v8=(v2>1)?parseInt(v1[1]):1,v9=(v2>2)?parseInt(v1[2]):50,v10=(v2>3)?parseInt(v1[3]):1;var v11=new flvS3(v3),v12=new flvS3(v4);var v13=v12.x,v14=v12.y,v15=0,v16=0;if (v10==1){var v17=-1*v12.h;v15=v12.x;if (v14>=v17){v16=v12.y-v8;}else {v16=v11.h;}}else {var v18=-1*v12.w;v16=v12.y;if (v13>=v18){v15=v12.x-v8;}else {v15=v11.w;}}flvS8(v6,v15,v16);v5.XAS1=setTimeout("flvXAS1("+v7+","+v8+","+v9+","+v10+")",v9);}}
//-->
</script>
<style type="text/css">
<!-- 
#AutoScrollContainer {
	position:absolute;
	top:363px;
	left:12px;
	width:690px;
	height:25px;
	clip:rect(0,690,25,0);
	overflow:hidden;
	z-index:1;
	visibility:visible;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	background-image: url(images/topbar.jpg);
}
#AutoScrollContent {
	position:absolute;
	top:1px;
	left:692px;
	width:1000px;
	visibility:visible;
}
.style2 {color: #CCCCCC}
#titiiiaLay {
	position:absolute;
	width:304px;
	height:162px;
	z-index:2;
	left: 586px;
	top: 262px;
	visibility: inherit;
}
--> 
</style>
</head>
<body onload="flvXAS1(1,1,50,0)">
<!-- Start absolute positioned Cross-browser AutoScroller -->
<!-- Do NOT change these layer ID's -->
<div id="AutoScrollContainer">
  <!-- Do NOT define (additional) styles for the following nested layer here. 
       If required, modify the styles in the head section -->
  <div id="AutoScrollContent">
    <table width='1000' cellpadding='2' border='0' cellspacing='0'>
      <tr>
        <td nowrap> <span class="style2">Put your scrolling content here...&nbsp;&nbsp; 
          If you 'MouseOver' this <a href="javascript:;" onMouseOver="flvXAS1(0)" onMouseOut="flvXAS1(1,1,50,0)">nowhere link</a>, the scrolling will stop.&nbsp;&nbsp;On 'MouseOut' the scrolling will continue again. </span></td>
      </tr>
    </table>
  </div>
</div>
<table width="100%" height="241" border="1">
  <!--DWLayoutTable-->
  <tr>
    <td width="50%" height="169" valign="top" bgcolor="#999999"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="328" valign="top">I need to get the scrolling layer to stay in the box when the window resizes. </td>
    <td width="50%" valign="top" bgcolor="#999999"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="64">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Open in new window

Jason C. Levine

Yes, just put the div inside the table cell. The difference is that the 0,0 coordinates will now start from the cell's 0,0

elliottbenzle

ASKER

I tried that but the layer is still being placed based on this, and not on where the actual div tag is placed.

<style type="text/css">
<!--
#AutoScrollContainer {
      position:absolute;
      top:256px; <--------------------------
      left:36px; <-----------------------------

attached is the whole code

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function flvS3(v1){//v1.2
var v2=MM_findObj(v1);if (!v2){this.x=this.y=this.h=this.w=0;return;}var v3,v4,v5,v6,v7=(document.layers)?v2:v2.style;v3=isNaN(parseInt(v7.left))?v2.offsetLeft:parseInt(v7.left);v4=isNaN(parseInt(v7.top))?v4=v2.offsetTop:parseInt(v7.top);if (v2.offsetHeight){v5=v2.offsetHeight;v6=v2.offsetWidth;}else if (document.layers){v5=v7.clip.height;v6=v7.clip.width;}else {v5=v6=0;}this.x=parseInt(v3);this.y=parseInt(v4);this.h=parseInt(v5);this.w=parseInt(v6);}
 
function flvS8(v1,v2,v3){//v1.0
var v4=(document.layers)?v1:v1.style;var v5=flvS5();eval("v4.left='"+v2+v5+"'");eval("v4.top='"+v3+v5+"'");}
 
function flvS5(){//v1.0
var v1=((parseInt(navigator.appVersion)>4||navigator.userAgent.indexOf("MSIE")>-1)&&(!window.opera))?"px":"";return v1;}
 
function flvXAS1(){
var v1=arguments,v2=v1.length,v3='AutoScrollContainer',v4='AutoScrollContent';var v5=MM_findObj(v3),v6=MM_findObj(v4);if (!v5){return;}if (v5.XAS1!=null){clearTimeout(v5.XAS1);}var v7=(v2>0)?parseInt(v1[0]):1;if (v7){var v8=(v2>1)?parseInt(v1[1]):1,v9=(v2>2)?parseInt(v1[2]):50,v10=(v2>3)?parseInt(v1[3]):1;var v11=new flvS3(v3),v12=new flvS3(v4);var v13=v12.x,v14=v12.y,v15=0,v16=0;if (v10==1){var v17=-1*v12.h;v15=v12.x;if (v14>=v17){v16=v12.y-v8;}else {v16=v11.h;}}else {var v18=-1*v12.w;v16=v12.y;if (v13>=v18){v15=v12.x-v8;}else {v15=v11.w;}}flvS8(v6,v15,v16);v5.XAS1=setTimeout("flvXAS1("+v7+","+v8+","+v9+","+v10+")",v9);}}
//-->
</script>
<style type="text/css">
<!-- 
#AutoScrollContainer {
	position:absolute;
	top:256px;
	left:36px;
	width:690px;
	height:25px;
	clip:rect(0,690,25,0);
	overflow:hidden;
	z-index:1;
	visibility:visible;
	background-color: #FFFFFF;
	layer-background-color: #FFFFFF;
	border: 1px none #000000;
	background-image: url(images/topbar.jpg);
}
#AutoScrollContent {
	position:absolute;
	top:1px;
	left:692px;
	width:1000px;
	visibility:visible;
}
.style2 {color: #CCCCCC}
 
--> 
</style>
</head>
<body onload="flvXAS1(1,1,50,0)">
 
<table width="100%" height="241" border="1">
  <!--DWLayoutTable-->
  <tr>
    <td width="50%" height="169" valign="top" bgcolor="#999999"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="328" valign="top"> <p>I want the scroll box to go here. 
        <!-- Start absolute positioned Cross-browser AutoScroller -->
        <!-- Do NOT change these layer ID's -->
        </p>
      <div id="AutoScrollContainer">
  <!-- Do NOT define (additional) styles for the following nested layer here. 
       If required, modify the styles in the head section -->
  <div id="AutoScrollContent">
    <table width='1000' cellpadding='2' border='0' cellspacing='0'>
      <tr>
        <td nowrap> <span class="style2">Put your scrolling content here...&nbsp;&nbsp; 
          If you 'MouseOver' this <a href="javascript:;" onMouseOver="flvXAS1(0)" onMouseOut="flvXAS1(1,1,50,0)">nowhere link</a>, the scrolling will stop.&nbsp;&nbsp;On 'MouseOut' the scrolling will continue again. </span> </td>
      </tr>
    </table>
  </div>
</div> 
 
</td>
    <td width="50%" valign="top" bgcolor="#999999"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="64">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<!-- End absolute positioned Cross-browser AutoScroller -->
 
<!-- Start absolute positioned Cross-browser AutoScroller -->
<!-- Do NOT change these layer ID's -->
<!-- End absolute positioned Cross-browser AutoScroller -->
</body>
</html>

Open in new window

Jason C. Levine

Remove position: absolute from both div declarations...

elliottbenzle

ASKER

I've remove the position:absolute from the div declarations.

The layer is now situated in the cell but it doesn't scroll.

here is the new code and new result page:

http://www.glowfishtw.com/flagfootball/index.aspx

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">

</script>
<style type="text/css">

</style>
</head>
<body onload="flvXAS1(1,1,50,0)">

<table width="100%" height="241" border="1">

<tr>
<td width="50%" height="169" valign="top" bgcolor="#999999"> </td>
<td width="328" valign="top"><p>

</p>
<div id="AutoScrollContainer">

<div id="AutoScrollContent">
<table width='1000' cellpadding='2' border='0' cellspacing='0'>
<tr>
<td nowrap> <span class="style2">Put your scrolling content here...  
If you 'MouseOver' this <a href="javascript:;" onMouseOver="flvXAS1(0)" onMouseOut="flvXAS1(1,1,50,0)">nowhere link</a>, the scrolling will stop.  On 'MouseOut' the scrolling will continue again. </span> </td>
</tr>
</table>
</div>
</div>

</td>
<td width="50%" valign="top" bgcolor="#999999"> </td>
</tr>
<tr>
<td height="64"> </td>
<td> </td>
<td> </td>
</tr>
</table>





</body>
</html>

ASKER CERTIFIED SOLUTION

Jason C. Levine

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

elliottbenzle

ASKER

It's a script from FlevOOware, I didn't write it. I used it years ago for another site. "I think that I found another script that works better for this particular problem.

/***********************************
* http://javascripts.vbarsan.com/
* This notice may not be removed
***********************************/

Thanks for all your help.
E

Jason C. Levine

>> I used it years ago for another site.

I'll bet that the javascript/scrolling method used is now deprecated in the new browsers.