Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to condense code

    Hi

    On my website (www.hilite.org/IndexTest.htm), there is a large section of code that I'd like condensed to another file so that I only need one line of code to call it or something of that nature...to make it easy to paste that into like 50 other pages linked to it with that same banner..

    It starts with:

    Code:
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    font:normal 12px Verdana;
    color: #FFCC33;
    line-height:18px;
    z-index:100;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    and ends with

    Code:
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    
    </script>
    </head>
    All of this is basically one big javascript thing for drop down menus and a style thingy before it...so I was wondering if that code be just ONE line of code..or two depending on if you split the arrays (which would be better) and the actual method part after the arrays...

    Then also is there a way to condense this section of code which uses this drop down script in a line of code possibly:

    Code:
    <!-- BANNER LINKS -->
    
    <tr> 
    <td height="15">
    
    <a href="http://www.hilite.org"><img name="Image10" border="0" src="http://www.hilite.org/images/navindex1.jpg"></a>
    <a href="http://www.hilite.org/front" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img name="Image11" border="0" src="http://www.hilite.org/images/navfront1.jpg"></a>
    <a href="http://www.hilite.org/news" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><img name="Image12" border="0" src="http://www.hilite.org/images/navnews1.jpg"></a>
    <a href="http://www.hilite.org/sports" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><img name="Image13" border="0" src="http://www.hilite.org/images/navsports1.jpg"></a>
    <a href="http://www.hilite.org/entertainment" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><img name="Image14" border="0" src="http://www.hilite.org/images/naventer1.jpg"></a>
    <a href="http://www.hilite.org/feature" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()"><img name="Image15" border="0" src="http://www.hilite.org/images/navfeat1.jpg"></a>
    <a href="http://www.hilite.org/perspectives" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()"><img name="Image16" border="0" src="http://www.hilite.org/images/navpers1.jpg"></a>
    <a href="http://www.hilite.org/fame" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()"><img name="Image17" border="0" src="http://www.hilite.org/images/navfame1.jpg"></a>
    <img src="http://www.hilite.org/images/hiliteorg.jpg" width="106" height="15"></td>
     
     </tr>
    </table>
    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    well you can make one js file for the actual script, the way u do this is you take everything in between the script tags and put them in notepad and click file save as, change file type to all files, and just save it with a .js extension, then you can call it in the page as
    Code:
    <script type="text/javascript" src="dropdownmenu.js"></script>
    then your images, you can do something similar but i would use document.write for the javascript, this will be another seperate js file
    Code:
    <!--
    document.write('<a href="http://www.hilite.org"><img name="Image10" border="0" src="http://www.hilite.org/images/navindex1.jpg"></a>');
    document.write('<a href="http://www.hilite.org/front" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img name="Image11" border="0" src="http://www.hilite.org/images/navfront1.jpg"></a>');
    document.write('<a href="http://www.hilite.org/news" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><img name="Image12" border="0" src="http://www.hilite.org/images/navnews1.jpg"></a>');
    document.write('<a href="http://www.hilite.org/sports" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><img name="Image13" border="0" src="http://www.hilite.org/images/navsports1.jpg"></a>');
    document.write('<a href="http://www.hilite.org/entertainment" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><img name="Image14" border="0" src="http://www.hilite.org/images/naventer1.jpg"></a>');
    document.write('<a href="http://www.hilite.org/feature" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()"><img name="Image15" border="0" src="http://www.hilite.org/images/navfeat1.jpg"></a>');
    document.write('<a href="http://www.hilite.org/perspectives" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()"><img name="Image16" border="0" src="http://www.hilite.org/images/navpers1.jpg"></a>');
    document.write('<a href="http://www.hilite.org/fame" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()"><img name="Image17" border="0" src="http://www.hilite.org/images/navfame1.jpg"></a>');
    document.write('<img src="http://www.hilite.org/images/hiliteorg.jpg" width="106" height="15">');
    //-->
    i haven't tested the above yet so not sure if it will work or not that was just off the top of my head, the function calls in the onmouseout and mouseover may cause some errors
    then you would call it the same way as the dropdownmenu.js and if you have this in all of your pages and you just have to update the 2 js files and it will disperse through out the rest of the pages, or another possible solution which would be more beneficial is to use php includes, that is of course your browser supports php, i learned how to do this from this site.
    Last edited by _Aerospace_Eng_; 03-10-2005 at 02:02 AM.

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    is document.write a reserved java function or do i have to make it up....

    www.hilite.org/indexscrollertest.htm

    I added those two lines of code and made those two .js files... but now the banner isnt even showing up

    also the style sheet needs to be put where?

    (teh small style thing before the script lines in the first thing i put)

    Thanks again

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    yeah i know what the css is, well like i said does ur server support php? it would be easier to do this with php includes, document.write is a reserved javascript function, i thought i saw some attempt to use a php include in the page, but it may have been commented out, and like i said the document.write might fail because of the function calls, you may need to use innerHTML i dunno that even gets tricky do a search for innerHTML, and dont confuse java and javascript they are two totally different languages

  • #5
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    k well i think the problem is that the document.write is definatly not displaying...so if it cant be condensed without php (because most browsers do but some dont...and it needs to be universal) ill have to edit those lines indiv.

  • #6
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    k so im getting some syntax error....someone wanna help me here

    compare the two codes:

    http://www.hilite.org/IndexTest.htm (working but long code)

    http://www.hilite.org/indexscrollertest.htm (not working but augmented code with syntax errors on 2 and 23 before page loads fully)

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    if your host supports php, it will be universal.
    your host will use the php script to make the html page. it then sends the page to the browser and the browser doesn't even know there was php.

    As for the styles, pretty much the same as for the javascript.
    you put everything that's in the style tags in notepad, and save with a .css extension.
    then in your html, you simply add:

    <link rel="stylesheet" type="text/css" href="Styles.css" />

    in the <head>

    That should do it.
    Shawn

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    just as stated above php includes are more universal than javascript, users can't stop php from running unlike javascript which can be disabled, a php include will consist of html and the browser will parse it as html, its just easier to edit because you are only editing like one or two files instead of one file for every page u have

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    for the more complex part of adding all the links in your html, there are a couple of solutions..

    What you want. To have the least stuff as possible in your html, and everything in your .js file.

    1. You add a div with an id in which your links should go, but you put nothing in that div.
    Then, you use javascript to change that div's innerHTML.
    Code:
    var newHTML="<a href='wtv.html'>link</a> etc";
    document.getElementById('yourDivsId').innerHTML=newHTML;
    2. Same as above, but not using innerHTML.

    Use nodes.
    Code:
    var link=document.createElement('a');
    link.setAttribute('href','wtv.html');
    link.appendChild(document.createTextNode('link'));
    document.getElementById('yourDivsId').appendChild.link;
    3.in your html, you put
    Code:
    <script type="text/javascript" src="yourjsfile.js"></script>
    and you use document.write('your links');

    The best method, in my opinion, is the PHP.
    You create a .txt file containing the HTML, and with php, you include to every single page. no accessibility issues. simple scripting. works well. But you need your host to work with php.

    I didn't go in much depth for any of my explanations...
    So if you have any questions about what I said, don't hesitate a second


    p.s One small thing I noticed in your js is that you use
    Code:
    menu1[0]=....
    menu1[1]=...
    
    menu2[0]=...
    menu2[1]=...
    You could use 2d arrays.
    var menu=new Array;
    menu[0]=new Array;
    menu[0][0]=something;

    If you want details, ask
    Shawn

  • #10
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok the whole div concept is confusing but ill toy with the php idea if i can figure it out...

  • #11
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    k php is pretty badass and works so now i gotta add ONE line of code and rename to .php

    thats freakin tight

  • #12
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    k new problem (well not problem but a how to needed)

    www.hilite.org/indextest.php

    the color of the links need to be yellow....or dark yellow preferrably

    where do i change that setting....and how do i change it so when you viewed it it switches to white?

  • #13
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That would be in your stylesheet.

    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    font:normal 12px Verdana;
    color: #FFCC33;
    line-height:18px;
    z-index:100;
    }

    #dropmenudiv a { color: yellow; }
    #dropmennudiv a:visited { color: white; }
    Shawn

  • #14
    New Coder
    Join Date
    Mar 2005
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    k i got it to work sorta.....thanks for help guys


  •  

    Posting Permissions

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