Solved

Can I place a layer inside of a table cell?

Posted on 2008-10-23
7
216 Views
Last Modified: 2010-07-27
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

0
Comment
Question by:elliottbenzle
  • 4
  • 3
7 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22793128
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
0
 
LVL 4

Author Comment

by:elliottbenzle
ID: 22795531
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

0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22798367
Remove position: absolute from both div declarations...
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 4

Author Comment

by:elliottbenzle
ID: 22800997
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">
<!--

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 {
      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 {
      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><!-- 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>

0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 22801819
Interesting.  I'm using Firefox with Firebug and I can see the style on AutoScrollContent counting up into negative numbers (scrolling).  When I hover on the nowhere link, the counting stops.  When I mouseout, it starts again.

For all intents and purposes, the script is working, it just doesn't actually scroll...

Did you write this one or did you get it from somewhere?
0
 
LVL 4

Author Comment

by:elliottbenzle
ID: 22803822
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
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 22804566
>> I used it years ago for another site.

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question