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
    597
    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 09:44 AM.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    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
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    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, 04:00 AM
  2. Replies: 2
    Last Post: 02-03-2009, 12:02 PM
  3. Shorten your PHP Code, and make it easy.
    By Nile in forum Coding tips & tutorials threads
    Replies: 6
    Last Post: 06-26-2008, 08:23 PM
  4. Shorten a string?
    By alexjewell in forum PHP
    Replies: 23
    Last Post: 12-06-2007, 07:04 PM
  5. how to shorten affiliate url
    By sam212 in forum PHP
    Replies: 2
    Last Post: 04-02-2007, 12:16 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
  •