i wanted to know if there is some way to load js content into a css styled table. The js content is an array and i would like each line to be loaded into a seperate table row. the js file currently has 10 links but they are all currently loading into 1 table row. so in short, 1 have 9 table rows that are empty. any help would be creatly appreciated.
// JavaScript Document
function linkDisplay() {
var links = new Array();
links[0]="Toronto - Puerto Plata from $317 + tx - Dept Feb 25";
links[1]="Book a romantic getaway from C$249 for flight + 3 nights! - Expires 2/13/10";
var linkURL = new Array();
linkURL[0]="http://www.nolitours.com/web2/offerlist";
linkURL[1]="=http://www.tkqlhce.com/click-2585324-10744260 target=_top";
for (i=0; i<links.length; i++) {
document.write("<ol>"+links[i].link(linkURL[i])+"</ol>");
}
}
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"> <!-- src="link.js" -->
// From: http://www.webdeveloper.com/forum/showthread.php?t=224222
var links = [
["Toronto - Puerto Plata from $317 + tx - Dept Feb 25","http://www.nolitours.com/web2/offerlist"],
["Book a romantic getaway from C$249 for flight + 3 nights! - Expires 2/13/10",
"http://www.tkqlhce.com/click-2585324-10744260 target=_top"] // NOTE: no comma after last entry
];
function linkDisplay() {
var str = '';
for (i=0; i<links.length; i++) {
str += '<tr><td id="'+i+'">';
str += "<ol><a href="+links[i][1]+">"+links[i][1]+"</a></ol>";
str += "</td></tr>";
}
document.write(str);
}
</script>
<style type="text/css">
#table1 {
position:absolute;
width:495px;
height:39px;
z-index:1;
border-collapse: collapse;
border: 0px solid;
border-color:#CCCCCC;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 11px;
}
#table1 tbody tr:hover td {
background: #d0dafd;
}
#table1 td {
color: #00CCFF;
}
#table1 th {
color: #3399FF;
border-bottom: 1px dashed #69c;
}
</style>
</head>
<body>
<table width="400" border="0" cellpadding="0" cellspacing="0" id="table1">
<script type="text/javascript">linkDisplay();</script>
</table>
</body>
</html>
BTW, a couple of comments ...
1. It's a good idea to: Wrap you script between [ code] and [ /code] tags (without the spaces)
2. It's a bad idea to: Use ID's with HTML tag values, ie id="table" changed to id="table1"
Hey that is great. that is exactly what i wanted. they only thing is that i forgot to mention was that i wanted the js code to load from an external source.
the reason i asked is that i did not wanted the js code to be embedded into the html file since it will slow down the page load time.
Hey that is great. that is exactly what i wanted. they only thing is that i forgot to mention was that i wanted the js code to load from an external source.
the reason i asked is that i did not wanted the js code to be embedded into the html file since it will slow down the page load time.
You can supply the information from an external file or from a database or use an AJAX load of the information, but that would involve more JS.
BTW, I don't think the JS code will slow down the page load time significantly for only 10 rows.
I only included the JS within the program because I did not want to manage another external file.
So do you think it is better to embedd the js code in the HTML.
I just did not want people to see the js code that's all.
No, all I'm saying is that it doesn't matter insofar as speed of loading is concerned.
External JS is fine, I just embedded it into the program for MY convience.
No, all I'm saying is that it doesn't matter insofar as speed of loading is concerned.
External JS is fine, I just embedded it into the program for MY convience.
i disagree. script placement probably has the single largest performance impact of any tag.
external js is cached, whereas inline <script> tags take up space with each page load.
I'ts not the size of the javascript that slows you down, it's the latency of the server that host the script. an extra connection takes time to establish, so using an external file is actually slightly slower for the first visit.
if you don't want to wait on the external scripts, place the external script tags at the end of your document, just before </body>. this is good idea in general as it lets visitors see the HTML while the script loads. If the script tag were in the head, you'd have to wait on it to finish before you see anything...
hey thanks that worked. But for the life of me, i cannot centre the words within the middle of each row. if you notice in IE, it's at the top but in FF it's in the centre. www.iheartvacation.com/toronto
Assuming you are referring to the table contents, try this ...
Code:
function linkDisplay() {
var str = '';
for (i=0; i<links.length; i++) {
str += '<tr><th id="'+i+'">';
str += "<ol><a href="+links[i][1]+">"+links[i][1]+"</a></ol>";
str += "</th></tr>";
}
document.write(str);
}
Another possibility would be to remove the <ol> and </ol> tags since they are not being used with an <li> tag anyway.
Yeah tried that but for some reason, it does not do the hover thing anymore. i tried it by deleting the <ol> tag but that just makes it look weird in FF..weird
Put the <ol> tags back in, although I don't see the purpose as you are not using the <li> tags to display an 'ordered list'.
Try taking them out again later after you get it to work to your satisfaction to see if they have any effect on the final display.
Reply With Quote
Consider these changes ...
Originally Posted by khujo56
Try again ...
Bookmarks