Solved

Can I place a layer inside of a table cell?

Posted on 2008-10-23
7
202 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
FINDNOCASE 2 536
COLDFUSION 9 DEVELOPMENT SERVER STOPPED WORKING 9 437
Adobe Web Premium CS3 5 363
Dreamweaver FTP Access 12 81
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

758 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now