58 users online (0 members and 58 guests)  


  Results 1 to 5 of 5

Related

  1. Replies: 1
  2. Replies: 4
  3. Want Separate Tables    Forum: Myspace Forum
    Replies: 2
  4. Replies: 0
  5. Replies: 2
  1. #1
    PetePope's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2004
    Location
    London UK
    Posts
    5

    Question JS in a separate file?

    I have just made a JS Mouseover NavBar using the JS Mouseover Tool.

    I read in an Echoecho tutorial that if the JS is put in a separate file, the browser caches it on the first page and subsequent pages load faster.

    This is the example given:
    "First a plain HTML example:

    <html>
    <head>
    <title>Plain HTML example</title>
    </head>
    <body>
    <table><tr><td bgcolor="yellow">
    This is the Top Banner!
    </td></tr></table>
    <br>
    This is the content for the page.<br>
    bla bla bla...
    </body>
    </html>


    Assume that we wanted to place the top banner in an external
    javascript.
    In that case we'd write this to a file called banner.js:

    document.write('<table><tr><td bgcolor="yellow">');
    document.write('This is the Top Banner!');
    document.write('</td></tr></table>');


    The HTML file would look like this:

    <html>
    <head>
    <title>Plain HTML example</title>
    </head>
    <body>
    <script type="text/javascript" src="banner.js"></script>
    <br>
    This is the content for the page.<br>
    bla bla bla...
    </body>
    </html>"

    This is the code generated by the Mouseover Maker:

    <table cellpadding="0" cellspacing="0" border="0" border="0" summary="menu">
    <tr>
    <td bgcolor="#00ffff">
    <table cellpadding="5" cellspacing="5" border="0" summary="menu">
    <tr>
    <!-- Begin Cell 1 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://petepope.net/index.html';" title="Home">Home</td>

    <!-- End Cell 1 -->

    </tr>
    <tr>
    <!-- Begin Cell 2 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://petepope.net/about.html';" title="About Us">About Us</td>

    <!-- End Cell 2 -->

    </tr>
    <tr>
    <!-- Begin Cell 3 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://';" title="link3">link3</td>

    <!-- End Cell 3 -->

    </tr>
    <tr>
    <!-- Begin Cell 4 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://';" title="link4">link4</td>

    <!-- End Cell 4 -->

    </tr>
    <tr>
    <!-- Begin Cell 5 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://';" title="link5">link5</td>

    <!-- End Cell 5 -->

    </tr>
    <tr>
    <!-- Begin Cell 6 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://';" title="link6">link6</td>

    <!-- End Cell 6 -->

    </tr>
    <tr>
    <!-- Begin Cell 7 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://';" title="link7">link7</td>

    <!-- End Cell 7 -->

    </tr>
    <tr>
    <!-- Begin Cell 8 -->

    <td nowrap="nowrap" bgcolor="#efefef" onmouseover="this.style.background='#000099'; this.style.color='#ffff00'" onmouseout="this.style.background='#efefef'; this.style.color=''" style="font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;" height="30" width="60" onclick="window.location.href='http://';" title="link8">link8</td>

    <!-- End Cell 8 -->

    </tr>
    </table>
    </td>
    </tr>
    </table>

    How would I adapt this to put it in a separate file? I'm brand new to JS (and this Forum) and would be very grateful for any help or tips anyone can provide.

    Many thanks,

    Pete

  2. #2
    dogfish3's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Posts
    10
    Hey, PetePope,

    Copy this code into a .js file.

    Code:
    document.write(
    "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" border=\"0\" summary=\"menu\">" +
    "<tr>" +
    "<td bgcolor=\"#00ffff\">" +
    "<table cellpadding=\"5\" cellspacing=\"5\" border=\"0\" summary=\"menu\">" +
    "<tr>" +
    "<!-- Begin Cell 1 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://petepope.net/index.html';\" title=\"Home\">Home</td>" +
    "<!-- End Cell 1 -->" +
    "</tr>" +
    "<tr>" +
    "<!-- Begin Cell 2 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://petepope.net/about.html';\" title=\"About Us\">About Us</td>" +
    "<!-- End Cell 2 -->" +
    "</tr>" +
    "<tr>" +
    "<!-- Begin Cell 3 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://';\" title=\"link3\">link3</td>" +
    "<!-- End Cell 3 -->" +
    "</tr>" +
    "<tr>" +
    "<!-- Begin Cell 4 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://';\" title=\"link4\">link4</td>" +
    "<!-- End Cell 4 -->" +
    "</tr>" +
    "<tr>" +
    "<!-- Begin Cell 5 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://';\" title=\"link5\">link5</td>" +
    "<!-- End Cell 5 -->" +
    "</tr>" +
    "<tr>" +
    "<!-- Begin Cell 6 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://';\" title=\"link6\">link6</td>" +
    "<!-- End Cell 6 -->" +
    "</tr>" +
    "<tr>" +
    "<!-- Begin Cell 7 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://';\" title=\"link7\">link7</td>" +
    "<!-- End Cell 7 -->" +
    "</tr>" +
    "<tr>" +
    "<!-- Begin Cell 8 -->" +
    "<td nowrap=\"nowrap\" bgcolor=\"#efefef\" onmouseover=\"this.style.background='#000099'; this.style.color='#ffff00'\" onmouseout=\"this.style.background='#efefef'; this.style.color=''\" style=\"font-weight: normal; color: ; font-family: Arial,sans-serif;font-size: 13px; text-align: center;cursor: hand; border: 5px solid #000000;\" height=\"30\" width=\"60\" onclick=\"window.location.href='http://';\" title=\"link8\">link8</td>" +
    "<!-- End Cell 8 -->" +
    "</tr>" +
    "</table>" +
    "</td>" +
    "</tr>" +
    "</table>");
    Just do this to address it:
    Code:
    <html>
    <head>
    </head>
    <body>
    <script src="blah.js"></script>
    </body>
    </html>

  3. #3
    PetePope's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2004
    Location
    London UK
    Posts
    5
    And, presumably, I just drop the address in where I want the menu to appear?

    Great, I'll give it a try!

    Thanks very much for such a quick response.

    Pete

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there PetePope,

    no disrespect to dogfish3 but that is very poor coding

    Your page should look something like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>mouseover cells</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <link rel="stylesheet" type="text/css" href="mouseover.css"/>
    <script type="text/javascript" src="mouseover.js"></script>
    
    </head>
    <body>
    
    <div  id="container">
    <table summary="menu"><tr>
    <td id="one">
    <table id="tbl" cellspacing="5" summary="menu">
    <tr>
    <td class="butts" onmouseover="swap(this)" onclick="window.location.href='http://petepope.net/index.html'" title="Home">Home</td>
    </tr><tr>
    <td class="butts" onmouseover="swap(this)" onclick="window.location.href='http://petepope.net/about.html'" title="About Us">About Us</td>
    </tr><tr>
    <td class="butts" onmouseover="swap(this)" onclick="window.location.href='#'" title="link3">link3</td>
    </tr><tr>
    <td class="butts" onmouseover="swap(this)" onclick="window.location.href='#'" title="link4">link4</td>
    </tr><tr>
    <td class="butts" onmouseover="swap(this)" onclick="window.location.href='#'" title="link5">link5</td>
    </tr><tr>
    <td class="butts" onmouseover="swap(this)" onclick="window.location.href='#'" title="link6">link6</td>
    </tr><tr>
    <td class="butts" onmouseover="swap(this)" onclick="window.location.href='#'" title="link7">link7</td>
    </tr><tr>
    <td class="butts" onmouseover="swap(this)"  onclick="window.location.href='#'" title="link8">link8</td>
    </tr></table>
    </td>
    </tr></table>
    </div>
    
    </body>
    </html>
    
    mouseover.css.....
    Code:
    
    /*<![CDATA[*/
    
    #container {
         position:absolute;
         top:50px;         /*adjust this value for vertical positioning*/
         left:100px;       /*adjust this value for horizontal positioning*/
     }
    #tbl {
         border-collapse:separate;
         border-spacing:5px;
     }
    #one {
         background: #00ffff;
     } 
    .butts {
         font-family: Arial,sans-serif;
         font-size: 13px; 
         font-weight: normal; 
         color: #000000;     
         text-align: center;
         cursor: pointer; 
         border: 5px solid #000000; 
         height:15px;
         width: 60px;
         background: #efefef;
         padding:5px;
     }
    
    /*//]]>*/
    mouseover.js.....
    Code:
    
    //<![CDATA[
    
    function swap(el) {
         el.style.background="#000099";
         el.style.color="#ffff00"; 
    el.onmouseout=function() {
         el.style.background="#efefef";
         el.style.color="#000000";
      }
    }
    
    //]]>
    


    coothead

  5. #5
    PetePope's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2004
    Location
    London UK
    Posts
    5
    Well, I've managed to comb enough glitches out of it for it to show up in a browser (from an HTML Editor) the proper shape and size, but I haven't managed to get it to link as an external file yet.

    It's actually been a great learning experience realising that I was going to have to desecrate the coding of another and getting on with it, but I confess I'm about ready for a lifeline now...

    Just for the record (although people are probably sick of hearing it), code attachments don't show in IE 5.2 running on Mac OS 9.2 - I just get an empty slot-shape. I guess the short term answer is for me to publish my email address (does it have to be the one I signed up with?) so I can exchange code with people that way, and in the (much) longer term, to be a reasonably well-off webmaster with a slightly larger and more up to date machine!

    Anyway, I can tell you the help is seriously appreciated!

    Pete



Tags for this Thread