...

View Full Version : Updating Mike McGrath's Topdeck Popper



Philip M
07-30-2012, 07:30 PM
I am updating Mike McGrath's Topdeck Popper Script. The below code works fine but of course will not validate as it uses deprecated tags.

I seem to have a brain blockage as I cannot turn this table code into CSS. Can anyone point me the right way?



function pop(msg,bakgrcol) {

var content ="<table width='180' border='0' cellpadding='2' cellspacing='0' bgcolor='#000000'><tr><td><table width='100%' border='0' cellpadding='0' cellspacing='0'><tr><td><center><font color='#FFFFFF' size='2' face='Arial'><b>Detailed Info</b></font></center></td></tr></table><table width='100%' border='0' cellpadding='4' cellspacing='0' bgcolor="+bakgrcol+"><tr><td><font color='#000000' size='2' face='Arial'><center>"+msg+"</center></font></td></tr></table></td></tr></table>";
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";

}

I have to say that I miss the <center> tag!:(

DrDOS
07-30-2012, 08:29 PM
<center><font color='#FFFFFF' size='2' face='Arial'><b>Detailed Info</b></font></center> replace with 'Detailed Info'

in the style sheet

table td
{
color: #ffffff;
font-family: arial;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
The vertical align may not work, the rest should.

SB65
07-30-2012, 08:59 PM
I came up with, assuming you need to keep the inline styles:


var content ="<table style='background-color:#000;text-align:center;font-family:Arial;font-size:13px;border-collapse:collapse;border:1px solid #000' width='180'><tr><td><table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFF;'><b>Detailed Info</b></td></tr></table><table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:4px'>"+msg+"</td></tr></table></td></tr></table>
"

which gives an identical result to the original html, I think, and validates to HTML4 Strict.

Philip M
07-31-2012, 11:35 AM
I came up with, assuming you need to keep the inline styles:


var content ="<table style='background-color:#000;text-align:center;font-family:Arial;font-size:13px;border-collapse:collapse;border:1px solid #000' width='180'><tr><td><table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFF;'><b>Detailed Info</b></td></tr></table><table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:4px'>"+msg+"</td></tr></table></td></tr></table>
"

which gives an identical result to the original html, I think, and validates to HTML4 Strict.

Thank you! Works fine in IE9 but in FF and GC the text is not centred in the table (message box). Fixed with:-


var content ="<table style='background-color:#000000;text-align:center;font-family:Arial;font-size:13px;border-collapse:collapse;border:1px solid #000000' width='180'><tr><td>" +
"<table style='border-collapse:collapse' width='100%'><tr><td style='color:#FFFFFF;font-family:Arial;font-size:13px;text-align:center;'><b>Detailed Info</b></td></tr></table>" +
"<table style='border-collapse:collapse;background-color:"+bakgrcol+"' width='100%'><tr><td style='padding:5px;text-align:center;font-family:Arial;font-size:13px;'>"+msg+"</td></tr></table></td></tr></table>";



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum