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

Thread: Problem with Suckertree

  1. #1
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Problem with Suckertree

    1) Script Title: SuckerTree Horizontal Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...nu-horizontal/

    3) Describe problem: If I use the code in a page it will work just fine... as can be seen in this example http://www.cityofmayfield.org/_borders/topnew.htm but I am trying to use it as a shared top border on the website...when I do that...the code breaks out into a list...I know that is not much information but hopefully this screen shot will explain it better




    Hopefully someone can figure out what I am doing wrong or at least point me to a previous forum dealing with this issue...so far my searches for a solution on your website has not been lucky....thanks for any help

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    The css is not being set.

  3. #3
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Feel free to call me a dummy....but how would I set the css?

  4. #4
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    can you post a link to a page where it is not working and i'll show you there or paste the code to a page that is not working

  5. #5
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You can now view the problem at www.cityofmayfield.org

    Here you can see it does work if the code is on a page by itself http://www.cityofmayfield.org/_borders/topnew.htm
    If is just when I try to use the same code on a shared border at the top that it quits working

  6. #6
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    The problem page is missing all of this
    <style type="text/css">

    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    .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: 125px; /*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: 130px; /* 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: 130px; /*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>

  7. #7
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    So the code that you have listed needs to be put on every page in the website for the suckertree menu to work?

  8. #8
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    They can be put as separate sheets and linked with

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

    style.css contains

    Code:
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .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: 125px; /*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: 130px; /* 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: 130px; /*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 */
    <script type="text/javascript" src="javascript.js"></script>

    javascript.js contains

    Code:
    //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)
    Put the two files on your server then use the link and script tags to reference them in the heads of pages you want them in.

  9. #9
    Join Date
    Sep 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you for all your help....I uploaded the two pages you suggested....the border does collapse.....unfortunately this has created a new problem....when I try to go to the submenus...the links will disappear...not giving me enough time to click on them....any suggestions?

    www.cityofmayfield.org to view the problem

    I have only added the lines you suggested to the index page....figured I would get it going before I added the lines to the rest of the webpages

  10. #10
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Is this in IE only or in another browser as well? This appears to function fine in my browser, I'm on a mac so I can't help you if it is IE only.

  11. The Following User Says Thank You to bluewalrus For This Useful Post:

    jlamb (09-16-2009)

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
  •