Solved

Can I place a layer inside of a table cell?

Posted on 2008-10-23
7
221 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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: 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.

Question has a verified solution.

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

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…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…

623 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