...

View Full Version : Can't get text to center



anousht
11-12-2004, 07:26 PM
I'm new to Javascript. The following code is something that I downloaded from a helpful site. It's purpose is to have text scrolling upwards on my site, pausing at each line of text. I can't seem to get this text to be in the centre of the table so that it is visually pleasing on the page.

Please take a look at the script below and let me know if there are any changes I should be making. Thanks!
I've included my html <td> tags within which I've placed this javascript. Here's a live link to what the page looks like currently:
http://anoush.ca/NoofeeStuff/SITE/

Here's the code I am using:
<td colspan="3" width="455" height="110" align="center" valign="middle">
<div id="tempholder"></div>
<script language="JavaScript" src="dhtmllib.js"></script>
<script language="JavaScript" src="scroller.js"></script>
<script language="JavaScript">

//SET SCROLLER APPEARANCE AND MESSAGES
var myScroller1 = new Scroller(0, 0, 480, 55, 0, 5); //(xpos, ypos, width, height, border, padding)
myScroller1.setColors("#663300", "ffffff", "ffffff"); //(fgcolor, bgcolor, bdcolor)
myScroller1.setFont("Arial,Helvetica,Verdana", 2);
myScroller1.addItem("Scrolling text<a href='http://seabridgegold.net'>link</a> scrolling text");
myScroller1.addItem("here's another line of text");
myScroller1.addItem("Third line of scrolling text");
myScroller1.addItem("Fourth line of text");

//SET SCROLLER PAUSE
myScroller1.setPause(2800); //set pause beteen msgs, in milliseconds
myScroller1.setSpeed(70); //set speed of scrolling

function runmikescroll() {

var layer;
var mikex, mikey;

// Locate placeholder layer so we can use it to position the scrollers.

layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);

// Create the first scroller and position it.

myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(100);
myScroller1.show();
}

window.onload=runmikescroll
</script>
<div id="placeholder" style="position:relative; width:420px; height:55px;"> </div>
<!-- Scrolling text code ends here -->
</td>

Basscyst
11-12-2004, 07:29 PM
Put this in your <head>?


<style type="text/css">
table
{
text-align:center;
}
</style>


On a side note, I haven't tried your code or anything, but if the user resizes the text, does the pause in scrollling still occur at the approptiate place on each line?

Basscyst

anousht
11-12-2004, 07:36 PM
thanks Basscyst, but I don't see any code where you've indicated.
Regarding resizing of text, I hadn't thought about that - I suppose I may have to leave more room between lines just in case.
Please resend the code you meant for me to use. Also, am I to place this code in the head of my entire html page?

Basscyst
11-12-2004, 07:51 PM
Odd, you don't see this:

<style type="text/css">
table
{
text-align:center;
}
</style>


Yes put that in your head. If you only want to affect that table. give the table an ID and reference it like this:

<style type="text/css">
#tablesID
{
text-align:center;
}
</style>

Basscyst

anousht
11-12-2004, 08:14 PM
Ok, I did exactly as you said - no change!
Would you like to take a look at the entire code or would that not be of help?
BTW - thanks for your help.

Basscyst
11-13-2004, 12:09 AM
Always good to post the whole code or at least all of the code you are having problems with. Put it inside the [ code ] your code here. . [ /code ] tags though, so that it keeps it's formatting.

Basscyst

anousht
11-13-2004, 01:23 AM
Thanks.
Ok, here goes. It's a lot of code. I've modified the page since I last posted, so now there's also a drop down menu that won't work as well! Anyway, please take a look, and if you'd like to see it live, here's the link:
http://anoush.ca/NoofeeStuff/SITE/indexLayerTest.htm

[ code ]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#ScrollTable
{
text-align:center;
}
</style>
<title>Seabridge Gold</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">function mmLoadMenus() {
if (window.mm_menu_1112180011_0) return;
window.mm_menu_1112180011_0 = new Menu("root",154,17,"Arial, Helvetica, sans-serif",11,"#FFFFFF","#FFFFFF","#996600","#999999","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_1112180011_0.addMenuItem("Corporate*Overview","location='AboutUs.htm'");
mm_menu_1112180011_0.addMenuItem("Corporate*Strategy","location='AboutUs.htm'");
mm_menu_1112180011_0.hideOnMouseOut=true;
mm_menu_1112180011_0.bgColor='#333333';
mm_menu_1112180011_0.menuBorder=1;
mm_menu_1112180011_0.menuLiteBgColor='#FFFFFF';
mm_menu_1112180011_0.menuBorderBgColor='#FFFFFF';

window.mm_menu_1112180451_0 = new Menu("root",152,14,"Arial, Helvetica, sans-serif",10,"#FFFFFF","#FFFFFF","#660000","#666666","left","middle",2,0,1000,-5,7,true,true,true,0,false,true);
mm_menu_1112180451_0.addMenuItem("Corporate&nbsp;Overview","location='AboutUs.htm'");
mm_menu_1112180451_0.addMenuItem("Corporate&nbsp;Strategy","location='AboutUs.htm'");
mm_menu_1112180451_0.addMenuItem("Directors/Management","location='AboutUs.htm'");
mm_menu_1112180451_0.addMenuItem("Share&nbsp;Structure","location='AboutUs.htm'");
mm_menu_1112180451_0.addMenuItem("Investor&nbsp;Kit","location='AboutUs.htm'");
mm_menu_1112180451_0.addMenuItem("Slide&nbsp;Show","location='AboutUs.htm'");
mm_menu_1112180451_0.addMenuItem("The&nbsp;Case&nbsp;For&nbsp;Gold","location='AboutUs.htm'");
mm_menu_1112180451_0.addMenuItem("Disclaimer","location='AboutUs.htm'");
mm_menu_1112180451_0.hideOnMouseOut=true;
mm_menu_1112180451_0.bgColor='#333333';
mm_menu_1112180451_0.menuBorder=1;
mm_menu_1112180451_0.menuLiteBgColor='#990000';
mm_menu_1112180451_0.menuBorderBgColor='#333333';

mm_menu_1112180451_0.writeMenus();
} // mmLoadMenus()
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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 MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script language="JavaScript" src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/mm_menu.js"></script>
</head>

<body onLoad="MM_preloadImages('file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRAbout.gif','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRQuotes.gif','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRProg.gif','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRProjects.gif','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRNews.gif','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRResource.gif')" link="#ffffff">
<script language="JavaScript1.2">mmLoadMenus();</script>
<!-- Main Site Table begins here -->

<font color="#ffffff">
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeSeabridge.gif" width="443" height="61"></td>
<td colspan="4" align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeTopRight.gif" width="208" height="61"></td>
</tr>
<tr>
<td><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk1.gif" width="443" height="11"></td>
<td><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk1A.gif" width="66" height="11"></td>
<td><a href="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/siteMap.htm"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HSiteMapBut.gif" width="61" height="11" border="0"></a></td>
<td><a href="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/contact.htm"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HContactBut.gif" width="68" height="11" border="0"></a></td>
<td><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk2.gif" width="13" height="11"></td>
</tr>
<tr>
<td><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk3.gif" width="443" height="11"></td>
<td colspan="4"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk4.gif" width="208" height="11"></td>
</tr>
<tr align="left">
<td colspan="5">
<!-- Nested Table for Top Navigation Bar begins here -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk5.gif" width="21" height="31"></td>
<td align="left"><a href="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/about.htm" onMouseOut="MM_swapImgRestore();MM_startTimeout();" onMouseOver="MM_swapImage('AboutUs','','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRAbout.gif',1);MM_showMenu(window.mm_menu_1112180451_0,0,37,null,'AboutUs')"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBAbout.gif" name="AboutUs" width="72" height="31" border="0"></a></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk6.gif" width="26" height="31"></td>
<td align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Quotes','','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRQuotes.gif',1)"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBQuotes.gif" name="Quotes" width="91" height="31" border="0"></a></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk7.gif" width="25" height="31"></td>
<td align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('CurrentPrograms','','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRProg.gif',1)"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBProg.gif" name="CurrentPrograms" width="78" height="31" border="0"></a></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk8.gif" width="30" height="31"></td>
<td align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Projects','','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRProjects.gif',1)"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBProjects.gif" name="Projects" width="73" height="31" border="0"></a></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk9.gif" width="27" height="31"></td>
<td align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('News','','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRNews.gif',1)"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBNews.gif" name="News" width="66" height="31" border="0"></a></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk10.gif" width="35" height="31"></td>
<td align="left"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Resources','','file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBRResource.gif',1)"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HBResource.gif" name="Resources" width="91" height="31" border="0"></a></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk11.gif" width="16" height="31"></td>
</tr>
</table>
<!-- Nested Table for Top Navigation Bar ends here -->
<tr>
<td colspan="5" align="left">
<!-- Nested Table for Blank Horizontal piece after NavBar starts here! -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk12.gif" width="128" height="17"></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk13.gif" width="523" height="17"></td>
</tr>
</table>
<!-- Nested Table for Blank Horizontal piece after NavBar ends here! -->
</td>
</tr>
<tr>
<td colspan="5" align="left" valign="top">
<!-- Nested Table for Everything else starts here -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<!-- Double Nested Table for Left Nav Bar starts here! -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnkLF14.gif"></td>
</tr>
<tr>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeCopyrt.gif"></td>
</tr>
<tr>
<td align="left" valign="top"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBtmStretch.gif"></td>
</tr>
</table>
<!-- Double Nested Table for Left Nav Bar ends here! -->
</td>
<td align="left" valign="top">
<!-- Double Nested Table for Central items starts here -->
<table border="0" cellpadding="0" cellspacing="0" id="ScrollTable" valign="top">
<tr valign="middle">
<!-- Scrolling text!!!! -->
<td colspan="3" width="455" height="110" align="center" valign="middle">
<div id="tempholder"></div>
<script language="JavaScript" src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/dhtmllib.js"></script> <script language="JavaScript" src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/scroller.js"></script>
<script language="JavaScript">

//SET SCROLLER APPEARANCE AND MESSAGES
var myScroller1 = new Scroller(0, 0, 480, 55, 0, 5); //(xpos, ypos, width, height, border, padding)
myScroller1.setColors("#663300", "ffffff", "ffffff"); //(fgcolor, bgcolor, bdcolor)
myScroller1.setFont("Arial,Helvetica,Verdana", 2);
myScroller1.addItem("Scrolling text<a href='http://seabridgegold.net'>link</a> scrolling text");
myScroller1.addItem("here's another line of text");
myScroller1.addItem("Third line of scrolling text");
myScroller1.addItem("Fourth line of text");

//SET SCROLLER PAUSE
myScroller1.setPause(2800); //set pause beteen msgs, in milliseconds
myScroller1.setSpeed(70); //set speed of scrolling

function runmikescroll() {

var layer;
var mikex, mikey;

// Locate placeholder layer so we can use it to position the scrollers.

layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);

// Create the first scroller and position it.

myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(100);
myScroller1.show();
}

window.onload=runmikescroll
</script>
<div id="placeholder" style="position:relative; width:420px; height:55px;">
</div>

<!-- Scrolling text code ends here -->
</td>
<td align="left" valign="middle"></td>
</tr>
<tr>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HQrtzTitle.gif"></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBnlk15.gif"></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HCouragTitle.gif"></td>
<td align="left"></td>
</tr>
<tr>
<td width="215" align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/QtzMtnBearingBreccSML.gif" width="215" height="149"></td>
<td width="25" align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk16..gif" width="25" height="149" border="0"></td>
<td width="215" align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/courage-lake-012SML.gif" width="215" height="149"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HQuartzBnrAGif.gif" width="215" border="0"></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HomeBlnk17.gif"></td>
<td align="left"><img src="file:///Spoof/Working%20Files/GloriaFiles/NEW%20Seabridge%20Site-Oct%3A04/SITE/Images/HCourageBnrAGif.gif"></td>
<td align="left"></td>
</tr>
<tr>
<td colspan="4" align="left" valign="top"></td>
</tr>
</table>
<!-- Double Nested Table Central items ends here -->
</td>
</tr>
</table></td>
</tr>
</table>
<!-- Main Site Table ends here -->
</font>
</body>
</html>

[ /code ]

Jalenack
11-13-2004, 01:36 AM
Put text-align: center in your 'placeholder' style

Find the code


<div id="placeholder" style="position:relative; width:420px; height:55px;"> </div>

and change it to


<div id="placeholder" style="position:relative; width:420px; height:55px; text-align: center"> </div>

Basscyst
11-13-2004, 01:51 AM
And just for future reference eliminate the space between the brackets in the [ code ] tags I put it there just so the forum would not interperet them.

Basscyst

anousht
11-14-2004, 08:02 PM
nope. no go. Still on the left.
Maybe this is faulty code - does it look like decent code to you?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum