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
Solved

Can I place a layer inside of a table cell?

Posted on 2008-10-23
7
213 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

840 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