Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Use external .js to write html

  1. #1
    Join Date
    Oct 2014
    Location
    UK
    Posts
    6
    Thanks
    5
    Thanked 1 Time in 1 Post

    Default Use external .js to write html

    I'd like to use this menu here, but rather than keep adding the same html in each page I want to to go in an external .js file so that I can change the menu without having to change each page individually.

    Whats the best way to do this - sorry I know little javascript and got myself tied in knots.
    Ive managed to easily do this in php - but some of the pages are static and need .htm extension so its got to be .js for the whole lot.

    TIA for any help

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,866
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    You can use a html-file and jquery to load the menu on every page.
    Put this in the head of your pages:
    Code:
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    After that, put the following line immediately after the opening body tag of your pages (you may want to style the div):
    Code:
    <div id="menu"></div>
    Then give the html-menu a name, for instance menu.html, and put the following lines immediately before the closing body tag of your pages:
    Code:
    <script>
    $('#menu').load('menu.html')
    </script>

  3. The Following User Says Thank You to molendijk For This Useful Post:

    klaw (10-12-2014)

  4. #3
    Join Date
    Oct 2014
    Location
    UK
    Posts
    6
    Thanks
    5
    Thanked 1 Time in 1 Post

    Default

    Thanks molendijk for your reply.

    Unfortunately I don't seem to be able to get this to work. It doesn't appear to execute the javascript function correctly and doesn't show the sub menus.

    Ive tried playing with it to no avail.

    Ive created a jsfiddle so you can easily see the source.
    The basic script is here : http://jsfiddle.net/klaw/mmauk9rr/

    Ive then done a fork to try add in the jquery which is here http://jsfiddle.net/klaw/mj9kac37/2/
    I do realise that it isnt going to work properly in jsfiddle anyhow because of the same origin policy for the remote .txt file, but thought it may at least show if I've done something stupid or glaringly obvious.

    TIA

  5. The Following User Says Thank You to klaw For This Useful Post:

    kimcuongden1712 (10-06-2014)

  6. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,866
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    You shouldn't load nav.txt but nav.html.
    And you should have <script src="http://code.jquery.com/jquery-1.10.2.js"></script> in the head.

  7. The Following User Says Thank You to molendijk For This Useful Post:

    klaw (10-12-2014)

  8. #5
    Join Date
    Oct 2014
    Location
    UK
    Posts
    6
    Thanks
    5
    Thanked 1 Time in 1 Post

    Default

    Thanks for getting back

    You shouldn't load nav.txt but nav.html.
    I tried nav.html first but that didnt work either. I used .txt only after reading something elsewhere about it, so thought Id give that a shot.

    I also tried adding a semi colin and double quotes to see if that made any difference but nope
    Code:
    <script>
    $("#nav").load("nav.html");
    </script>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    I do on my own files. With jsfiddler, if you select from the LH side and it will automatically insert it for you into their header.


    The only other thing I could think was could the native .js be attempting to write before the jquery statement has excuted?

  9. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,866
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Well, I don't know right now what is happening here. Unfortunately I'll be disconnected for the next couple of days (until October 13th). I'll come back to you as soon as I'm connected again (if the problem still persists).

  10. The Following 2 Users Say Thank You to molendijk For This Useful Post:

    kimcuongden1712 (10-06-2014),klaw (10-12-2014)

  11. #7
    Join Date
    Oct 2014
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    How do fix toggle in jQuery v1.11? please hep mee

  12. #8
    Join Date
    Oct 2014
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by molendijk View Post
    Then give the html-menu a name, for instance menu.html, and put the following lines immediately before the closing body tag of your pages:
    Code:
    <script>
    $('#menu').load('menu.html')
    </script>
    .load(): enable in jQuery v 1.11?

  13. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,866
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Hello Klaw,
    I promised you to re-examine the matter as soon as I would be connected again, so here I am.

    In menu.html, put:
    Code:
    <!doctype html>
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Navigation</title>
    
    <script>
    var menuids = new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
    var submenuoffset = -2 //Offset of submenus from main menu. Default is -2 pixels.
    
        function createcssmenu() {
            for (var i = 0; i < menuids.length; i++) {
                var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
                for (var t = 0; t < ultags.length; t++) {
                    var spanref = document.createElement("span")
                    spanref.className = "arrowdiv"
                    spanref.innerHTML = "&nbsp;&nbsp;"
                    ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
                    ultags[t].parentNode.onmouseover = function () {
                        this.getElementsByTagName("ul")[0].style.left = this.parentNode.offsetWidth + submenuoffset + "px"
                        this.getElementsByTagName("ul")[0].style.display = "block"
                    }
                    ultags[t].parentNode.onmouseout = function () {
                        this.getElementsByTagName("ul")[0].style.display = "none"
                    }
                }
            }
        }
    
    
    if (window.addEventListener) window.addEventListener("load", createcssmenu, false)
    else if (window.attachEvent) window.attachEvent("onload", createcssmenu)
    </script>
    
    <style>
    .glossymenu, .glossymenu li ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 185px;
        /*WIDTH OF MAIN MENU ITEMS*/
        border: 1px solid black;
    }
    .glossymenu li {
        position: relative;
    }
    .glossymenu li a {
        background: white url(http://www.kitz.me.uk/test/images/glossyback.gif) repeat-x bottom left;
        font: bold 12px Verdana, Helvetica, sans-serif;
        color: white;
        display: block;
        width: auto;
        padding: 5px 0;
        padding-left: 10px;
        text-decoration: none;
    }
    .glossymenu li ul {
        /*SUB MENU STYLE*/
        position: absolute;
        width: 190px;
        /*WIDTH OF SUB MENU ITEMS*/
        left: 0;
        top: 0;
        display: none;
    }
    .glossymenu li ul li {
        float: left;
    }
    .glossymenu li ul a {
        width: 180px;
        /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
    }
    .glossymenu .arrowdiv {
        position: absolute;
        right: 2px;
        background: transparent url(http://www.kitz.me.uk/test/images/arrow.gif) no-repeat center right;
    }
    .glossymenu li a:visited, .glossymenu li a:active {
        color: white;
    }
    .glossymenu li a:hover {
        background-image: url(http://www.kitz.me.uk/test/images/glossyback2.gif);
    }
    /* Holly Hack for IE \*/
     * html .glossymenu li {
        float: left;
        height: 1%;
    }
    * html .glossymenu li a {
        height: 1%;
    }
    /* End */
    </style>
    
    </head>
    
    
    <body>
    <ul id="verticalmenu" class="glossymenu">
      <li><a href="page1.html">Page 1</a></li>
      <li><a href="page2.html">Page 2</a></li>
      <li><a href="#">KLAW PAGES</a>
        <ul>
          <li><a href="page1.html">Page 1</a></li>
          <li><a href="page2.html">Page 2</a></li>
        </ul>
      </li>
    </ul>
    
    </body>
    
    </html>
    In the other pages (I will call them page1.html and page2.html here) put:
    page1.html:
    Code:
    <!doctype html>
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Navigation</title>
    
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    
    </head>
    
    <body>
    <div id="nav" style="position: absolute; top: 30%"></div>
    This is page 1
    
    <script>
    $('#nav').load('menu.html')
    </script>
    </body>
    
    </html>
    page2.html:
    Code:
    <!doctype html>
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Navigation</title>
    
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
    
    </head>
    
    <body>
    <div id="nav" style="position: absolute; top: 30%"></div>
    <span style="color: red">This is page 2</span>
    
    <script>
    $('#nav').load('menu.html')
    </script>
    </body>
    
    </html>
    etc.

  14. The Following User Says Thank You to molendijk For This Useful Post:

    klaw (10-12-2014)

  15. #10
    Join Date
    Oct 2014
    Location
    UK
    Posts
    6
    Thanks
    5
    Thanked 1 Time in 1 Post

    Thumbs up

    I promised you to re-examine the matter as soon as I would be connected again, so here I am.
    Thank you so very much. :thumb:

    I see now where I was going wrong by trying to add the javascript in the main page, rather than adding it into the same page as the where I was listing the menu items.
    This works beautifully

Similar Threads

  1. load data from mysql and write html ?
    By bernhard in forum PHP
    Replies: 2
    Last Post: 06-24-2013, 09:08 PM
  2. Allowing Access to External Hard Drive but password protecting write and delete
    By neoskunk in forum Computer hardware and software
    Replies: 1
    Last Post: 04-11-2010, 10:28 PM
  3. External html-doc?
    By benjaminesbjerg in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 10-26-2009, 05:56 PM
  4. External HTML code
    By fasttempo123 in forum HTML
    Replies: 3
    Last Post: 06-17-2006, 10:57 AM
  5. Replies: 11
    Last Post: 05-08-2006, 11:57 PM

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
  •