Results 1 to 6 of 6

Thread: Help needed to shorten some jacascript code

  1. #1
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Help needed to shorten some jacascript code

    SOS! JavaScript-"Guru" wanted!

    The SuckerTree menu has two bullet images to show the underlying menus.
    How can I shorten the code if these arrows are not required?
    I'm grateful for any advice!

    Greetings and thanks from Wimi



    http://www.dynamicdrive.com/style/cs...orizontal/P10/

    Code:
    <style type="text/css">
    
    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
    }
    
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
    }
    
    </style>
    
    <script type="text/javascript">
    
    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
    		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    		}
    		else{ //else if this is a sub level menu (ul)
    		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
    		}
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.visibility="visible"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.visibility="hidden"
        }
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)
    
    </script>

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    593
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    As I mentioned before when you had another thread about this.

    The css adds the arrow images.

    Code:
    <style type="text/css">
    
    .suckertreemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .suckertreemenu ul li{
    position: relative;
    display: inline;
    float: left;
    background-color: #F3F3F3; /*overall menu background color*/
    }
    
    /*Top level menu link items style*/
    .suckertreemenu ul li a{
    display: block;
    width: 90px; /*Width of top level menu link items*/
    padding: 1px 8px;
    border: 1px solid black;
    border-left-width: 0;
    text-decoration: none;
    color: navy;
    }
    	
    /*1st sub level menu*/
    .suckertreemenu ul li ul{
    left: 0;
    position: absolute;
    top: 1em; /* no need to change, as true value set by script */
    display: block;
    visibility: hidden;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .suckertreemenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels offset after 1st level sub menu */
    .suckertreemenu ul li ul li ul{ 
    left: 159px; /* no need to change, as true value set by script */
    top: 0;
    }
    
    /* Sub level menu links style */
    .suckertreemenu ul li ul li a{
    display: block;
    width: 160px; /*width of sub menu levels*/
    color: navy;
    text-decoration: none;
    padding: 1px 5px;
    border: 1px solid #ccc;
    }
    
    .suckertreemenu ul li a:hover{
    background-color: black;
    color: white;
    }
    
    /*Background image for top level menu list links */
    .suckertreemenu .mainfoldericon{
    background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
    }
    
    /*Background image for subsequent level menu list links */
    .suckertreemenu .subfoldericon{
    background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
    }
    
    * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
    padding-top: 1em;
    }
    	
    /* Holly Hack for IE \*/
    * html .suckertreemenu ul li { float: left; height: 1%; }
    * html .suckertreemenu ul li a { height: 1%; }
    /* End */
    
    </style>
    
    <script type="text/javascript">
    
    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
    		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    		}
    		else{ //else if this is a sub level menu (ul)
    		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
    		}
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.visibility="visible"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.visibility="hidden"
        }
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)
    
    </script>
    just leave the

    Code:
    background: #F3F3F3;
    I was not corrected by anyone so I presume that the javascript is only to make the menu work and has nothing to do with the images(arrows) as I mentioned in your other thread.

    Pleas,if I am wrong,any one,correct me with this.
    Thanks,

    Bud

  3. #3
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hi Bud,

    nice to see you again!

    We have already written about it: I think, CSS provides only the style and the path.

    The instruction, which menu items get an arrow (only those which have another submenu) should come from javascript (as I understand programming and this language).

    Greetings and thanks from Wimi
    Last edited by wtronic-germany; 03-23-2013 at 08:44 AM.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    The class names for the submenus icons only appear to be referenced in 2 lines of JavaScript - Im not a JavaScript guru but I believe you could take those out.
    Code:
    <script type="text/javascript">
    
    //SuckerTree Horizontal Menu (Sept 14th, 06)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
    
    function buildsubmenus_horizontal(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
    		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
    			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
    			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
    		}
    		else{ //else if this is a sub level menu (ul)
    		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        	ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
    		}
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.visibility="visible"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.visibility="hidden"
        }
        }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent("onload", buildsubmenus_horizontal)
    
    </script>
    The easiest way to remove the arrows would be to do it via the CSS though, as already detailed.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

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

    wtronic-germany (03-23-2013)

  6. #5
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Lightbulb

    Thank you for the hint, Beverleyh!

    I had already tried that, but I had also deleted the next closing } accidentally.

    Of course it would work with commenting out the CSS code, but I was looking for clean javascript code.

    Greetings and thanks from Wimi

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,933
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    9

    Default

    No problem - glad to help
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Shorten description - Advanced RSS Ticker
    By mcolombian in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-30-2009, 03:00 AM
  2. Replies: 2
    Last Post: 02-03-2009, 11:02 AM
  3. Shorten your PHP Code, and make it easy.
    By Nile in forum Coding tips & tutorials threads
    Replies: 6
    Last Post: 06-26-2008, 07:23 PM
  4. Shorten a string?
    By alexjewell in forum PHP
    Replies: 23
    Last Post: 12-06-2007, 06:04 PM
  5. how to shorten affiliate url
    By sam212 in forum PHP
    Replies: 2
    Last Post: 04-02-2007, 11:16 AM

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
  •