load js code into css table

khujo56 · #1 02-06-2010, 08:10 PM

Hi guys,

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.

thanks

JMRKER · #2 02-06-2010, 09:11 PM

How about posting some code to evaluate?
What is the JS content to display?
What are the CSS style parameters?

khujo56 · #3 02-06-2010, 09:53 PM

ok this is the js code.

// 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>");
}
}

and this is the test html file.

<!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"></script>
<style type="text/css">

</style>
</head>

<body>
<table width="400" border="0" cellpadding="0" cellspacing="0" id="table">
<tr>
<td id="0"><script type="text/javascript">linkDisplay();</script></td>
</tr>
<tr>
<td id="1"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>

JMRKER · #4 02-07-2010, 10:24 AM

Have not forgotten about you. I'll be back later ... too much Superbowl stuff to do it now!

JMRKER · #5 02-07-2010, 06:59 PM

Is this what you are trying to do ...

Code:

<!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"

Good Luck!

khujo56 · #6 02-07-2010, 10:54 PM

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.

JMRKER · #7 02-08-2010, 09:11 AM

Quote:

Originally Posted by khujo56

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.

But, use what you want and discard the rest.

Good Luck!

khujo56 · #8 02-08-2010, 10:25 AM

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.

JMRKER · #9 02-08-2010, 10:57 AM

Quote:

Originally Posted by khujo56

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.

khujo56 · #10 02-08-2010, 03:38 PM

Ok so last question, would the js code be alot different if i was to load it from an external source? How much more coding are we taking?

rnd me · #11 02-08-2010, 03:56 PM

Quote:

Originally Posted by JMRKER

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...

JMRKER · #12 02-09-2010, 08:50 AM

In response to PM.

Look like an change in post #5 for the 'linkDisplay()' function. Change to ...

Code:

function linkDisplay() {
  var str = '';
  for (i=0; i<links.length; i++) {
	str += '<tr><td id="'+i+'">';
    str += "<ol><a href="+links[i][0]+">"+links[i][1]+"</a></ol>";
    str += "</td></tr>";
  }
  document.write(str);
}

Appears you reversed the order of the link and display in the array.
Assumes links in array are correct and valid.

Let me know if you continue to have a problem.

JMRKER · #13 02-10-2010, 10:49 AM

In response to another PM

Quote:

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.

Better ???

khujo56 · #14 02-10-2010, 08:04 PM

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

JMRKER · #15 02-10-2010, 08:24 PM

OK, it is probably in your CSS definitions.

The :hover seems to be controlled by...

Code:

#table1 tbody tr:hover td {
	background-color:#d0dafd;
}

So try changing it to...

Code:

#table1 tbody tr:hover th {
	background-color:#d0dafd;
}

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.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)