Results 1 to 4 of 4

Thread: trying to create seperate js file

  1. #1
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default trying to create seperate js file

    I have created a horizontal spry menu bar. I would like to put the code for the dropdown menus in a seperate js file and reference this file..so when I change the menus I only need to change this file. The code for the submenus is in the second code box below (bold). I have tried different ways but its not working. The test page is at http://www.auburnfireandrescue.org/city

    Any ideas? Thanks in advance

    Code:
    <html>
    <head>
    <title>City Of Auburn, Illinois</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="cityweb.css" rel="stylesheet" type="text/css">
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_nbGroup(event, grpName) { //v6.0
      var i,img,nbArr,args=MM_nbGroup.arguments;
      if (event == "init" && args.length > 2) {
        if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
          img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
          if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
          nbArr[nbArr.length] = img;
          for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
            if (!img.MM_up) img.MM_up = img.src;
            img.src = img.MM_dn = args[i+1];
            nbArr[nbArr.length] = img;
        } }
      } else if (event == "over") {
        document.MM_nbOver = nbArr = new Array();
        for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
          nbArr[nbArr.length] = img;
        }
      } else if (event == "out" ) {
        for (i=0; i < document.MM_nbOver.length; i++) {
          img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
      } else if (event == "down") {
        nbArr = document[grpName];
        if (nbArr)
          for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
        document[grpName] = nbArr = new Array();
        for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
          nbArr[nbArr.length] = img;
      } }
    }
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    body {
    	margin-top: 25px;
    }
    #Table_01 tr td table tr td table tr td h5 {
    	color: #FFF;
    	font: arial;
    }
    #Table_01 tr td table tr td .mainbody u strong {
    	color: #000080;
    }
    #Table_01 tr td table tr td .mainbody strong u {
    	color: #000080;
    }
    -->
    </style>
    </head>


    Code:
    <td><ul id="MenuBar1" class="MenuBarHorizontal">
    		      <li><a class="MenuBarItemSubmenu" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image35','','images/gov_tab2.gif',1)"><img src="images/gov_tab.gif" name="Image35" width="87" height="33" border="0"></a>
    		        <ul>
    		          <li><a href="#" class="MenuBarItemSubmenu">City Hall</a>
    		            <ul>
                          <li><a href="#">Boil Orders</a></li>
                          <li><a href="#">Building Permits</a>
                        <ul>
                        <li><a href="#">application</a></li> 
                        </ul>
                          <li><a href="#">City Maps</a></li>
                          <li><a href="#">Community Center Rental</a></li>
    					  <li><a href="#">Tap Fees</a></li>
                          <li><a href="utilitypaymnet.html">Utility Payments</a></li>
                          <li><a href="#">Water Quality Reports</a></li>
                          <li><a href="#">FAQs</a></li>
                          <li><a href="#">Online Publications</a></li>
    		            </ul>
    		          </li>
    		          <li><a href="#" class="MenuBarItemSubmenu">Public Works</a>
    		            <ul>
                          <li><a href="#">Building Permits</a></li>
                          <li><a href="#">Public Water Supply</a></li>
                          <li><a href="#">Wastewater Treatment</a></li>
                          <li><a href="#">Upcoming Road Work</a></li>
                          <li><a href="#">FAQs</a></li>
    		            </ul>
    		          </li>
                      <li><a href="#" class="MenuBarItemSubmenu">Police Department</a>
                        <ul>
                          <li><a href="#">Untitled Item</a></li>
                          <li><a href="#">Untitled Item</a></li>
                        </ul>
                      </li>


    Code:
    <script type="text/javascript">
    //anylinkmenu.init("menu_anchors_class") //call this function at the very *end* of the document!
    anylinkmenu.init("menuanchorclass")
    </script>
    <!-- End Save for Web Slices -->
    </body>

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    There are many many ways to do it. The old fashioned but solid way is to do it with the help of a html --> javascript converter. Go to this converter, follow the instructions and put your new external js-file in the head section of your pages (and remove the HTML that you converted (with the help of the converter), but keep it somewhere just in case).
    ===
    Arie Molendijk.

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

    cbridges (04-12-2009)

  4. #3
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Arie...the converter worked great. The only issue I have is that I don't want to have to convert it each time the menus change. I would like to just update the js file and upload it (plus I will have another person updating the menus as they change and that person...not computer literate). What are some other good ways to do it. Thanks!

  5. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    cbridges,
    Here's another way. Create a file 'menu.html'. Put your listmenu into it (and remove the listmenu from your file(s)). Then in the head of each file:
    Code:
    <script type="text/javascript">
    if(window.opera)
    {document.write('<iframe src="menu.html" width="0" height="0" name="menu"></iframe>');}
    else document.write('<object type="text/html" data="menu.html" width="0" height="0" name="menu" ></object>');
    function extractMenu(){
    try{
    document.body.innerHTML+=window.frames['menu'].body.innerHTML;
    }
    catch(e){
    document.body.innerHTML+=window.frames['menu'].document.body.innerHTML;
    }
    }
    window.onload=extractMenu; 
    </script>
    (or put the script in some_external.js. (without the script tags), and put in the head of each file: <script type="text/javascript" src="some_external.js"></script>).
    ===
    Arie Molendijk.

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
  •