SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    UK
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    linking javascript documet to HTML pages

    Sorry I am very new to javascript, I have written my site in HTML and CSS but I have created a drop down menu which links to about 30 pages within my site. Originally it was only available on the homepage but I would like to have it at the top of every page.

    Problem is, when I add new pages to my site I dont want to update EVERY drop down box on every page? Is there an easy way of doing this please.? I assume I can create a javascript file seperate file and link it to my pages so that every time I update the drop down box on the main file it automatically updates on every page, I just have no idea ow I do this or where I would need to place the javascript within the HEAD and BODY of each page so that it displays the updated version each time;


    This is the code I have used to create the drop down menu;

    <form name="form1" method="post">

    <b>Select</b>

    <select name="dd1" size="1">
    <option value="http://www.url.co.uk/w.htm">W</option>
    <option value="http://www.url.co.uk/x.htm">X</option>
    </select>

    <input type="button"
    onclick=
    "location =
    document.form1.dd1.options
    [document.form1.dd1.selectedIndex].value;"
    value="GO">

    </form>

    and I think this goes into the body section where I want the box to appear
    <p class="navtitle">Select<script language="javascript" type="text/javascript">document.write(dropdown)</script>


    Thanks in advance

  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    In the head section of your pages add the following:
    Code:
    <script type="text/javascript" src="path-to-file.js" ></script>
    Hope it helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    UK
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have created an external file and uploaded it to the server, then input the code you kindly provided but it is not showing my dropdown menu on the page

    Do I need to add any script in the BODY where I want it to appear please???

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Oops I think I might have misunderstood what you we're asking.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do this:

    On each page have something like
    <form>
    <select><script type="text/javascript" src="myurls.js"></script></select>
    <button....> etc etc
    </form>

    Then use code in myurls.js to write out the options for the select, containing the urls and names of sites
    myurls.js
    Code:
    // an easy-to-update array of urls
    var myURLs = [
    	["Google", "http://www.google.com"],
    	["Yahoo", "http://www.yahoo.com"],
    	["SitePoint", "http://www.sitepoint.com"]
    ];
    
    // function to return a string of options
    function myOptions() {
    	var sOpts = "";
    	for( var i in myURLs ) {
    		sOpts += "<option value='" + myURLs[i][1] + "'>" + myURLs[i][0] + "</option>";
    	}
    	return sOpts;
    }
    
    // write out the options
    document.write(myOptions());
    That way you can update myurls.js as you like without changing each page

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    UK
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this might better explain wht I have done;

    I have a pulldown navigation menu - scripted as follows;

    <form name="form">
    <select name="site" size=1>
    <option value="">Select
    <option value="http://www.xxxx.co.uk/xxxx.htm">A</option>
    <option value="http://www.xxxx.co.uk/xxxx.htm">B</option>
    <option value="http://www.xxxx.co.uk/xxxx.htm">C</option>
    </select>
    <input type=button value="Go!" onClick="javascript:formHandler(this)">
    </form>


    This works fine when the code is pasted directly into my HTML webpage but I want it to be a linked external file.
    I have copied the exact code into notepad and saved as (all files) - menu.js . Ive put the following into the HEAD
    of the web page i would like to link the external javascript file too;

    <script src="menu.js"
    language="javascript"
    type="text/javascript"></script>

    but it is not showing when i load the page, although it is not showing any error message?
    I have also tried inserting the above code into the body of the page but that doesnt work either.

    Any ideas whats wrong please?

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Javascript files must contain Javascript. They can write out HTML but to do that you need to use document.write statements called before the page finishes loading or use innerHTML or the Document Object Model to update the HTML contained within the page after it has loaded.

    Just putting the HTML into the Javascript file is like your trying to talk in English to someone who only understands Chinese.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Worship the Krome kromey's Avatar
    Join Date
    Sep 2006
    Location
    Fairbanks, AK
    Posts
    1,621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by felgall
    ...like your trying to talk in English to someone who only understands Chinese.
    I'm going to add that to my list of things I've always wanted to say!


Bookmarks

Posting Permissions

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