www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: load js code into css table

  1. #1
    Join Date
    Oct 2006
    Posts
    120

    load js code into css table

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    How about posting some code to evaluate?
    What is the JS content to display?
    What are the CSS style parameters?

  3. #3
    Join Date
    Oct 2006
    Posts
    120
    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">
    <!--
    #table {
    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;
    }

    #table tbody tr:hover td {
    background: #d0dafd;
    }

    #table td {
    color: #00CCFF;
    }
    #table th
    {
    color: #3399FF;
    border-bottom: 1px dashed #69c;
    }
    -->
    </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>

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Have not forgotten about you. I'll be back later ... too much Superbowl stuff to do it now!

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb Consider these changes ...

    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!

  6. #6
    Join Date
    Oct 2006
    Posts
    120
    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.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Arrow

    Quote Originally Posted by khujo56 View Post
    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!

  8. #8
    Join Date
    Oct 2006
    Posts
    120
    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.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Arrow

    Quote Originally Posted by khujo56 View Post
    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.

  10. #10
    Join Date
    Oct 2006
    Posts
    120
    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?

  11. #11
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by JMRKER View Post
    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...

  12. #12
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    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.
    Last edited by JMRKER; 02-09-2010 at 08:53 AM.

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb Try this ...

    In response to another PM
    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 ???

  14. #14
    Join Date
    Oct 2006
    Posts
    120
    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

  15. #15
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Exclamation Try again ...

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles