SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: dhtml menu

  1. #1
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post dhtml menu

    I've been making a dhtml menu, and have been trying to get it workin correctly for a while, but I'm getting confused now and need your help on this

    [list=1][*]In test 1, it lists each number as 1, 2, 3, 4, 5, 6, 7, 8, 10..etc
    This is the layout I want for all the boxes, to output. But like this so they line up


    1, 2, 3, 4, 5.
    6, 7, 8, 9, 10.
    11, 12, 13, 14, 15.
    16, 17, 18, 19, 20.
    (comma's and full stop's align)
    or

    1, 2, 3, 4, 5.
    6, 7, 8, 9, 10.
    11, 12, 13, 14, 15.
    16, 17, 18, 19, 20.
    (number's align)


    which ever looks best
    [*]Also in test 10, I have sub menu's. for each test number there i would like the sub menu indented by a certain amount of spaces. And Instead of the submenu being inside the box i would like this to align next to that item, outside the box.[/list=1]

    I would really appreciate any help with this.

    Heres the code so far: -

    PHP Code:
    <style>

    html{

    scrollbar-face-color#ffffff;
    scrollbar-shadow-color#000000;
    scrollbar-highlight-color#999999;
    scrollbar-3dlight-color#000000;
    scrollbar-darkshadow-color#999999;
    scrollbar-track-color#ffffff;
    scrollbar-arrow-color#000000;
    }


    body{

    color#000000;
    fontnormal 9pt verdanatahomasans-serif;
    padding:0px;
    margin:0px;
    }

    a{

    backgroundtransparent;
    color#000000;
    text-decorationnone;

    }

    a:hover{

    text-decorationunderline;
    backgroundtransparent;
    color#000066;
    }

    img{

    bordernone;
    }

    input{

    background#dddddd;
    color#333333;
    }

    table{

    border-collapsecollapse;
    table-layoutauto;
    }

    #features{

    positionabsolute;
    top30px;
    left:300px;
    width150px;
    height100px;
    cursorpointer;
    }

    #featuresbar{

    width150px;
    positionabsolute;
    top20px;
    left:0px;
    }

    .
    collapsed{

    display:none;
    width148px;
    background#ffffff;
    color:  #000000;
    border1px solid #999999;
    }

    </
    style>

        <
    div id="features">

    <
    script>

    function 
    SwitchIt(id)
    {
        if (
    document.getElementById)
        {
            if (
    document.getElementById(id).style.display=='block')
            {
                 
    document.getElementById(id).style.display='none';
            }
            else
            {    
                
    hidecontents(id)
                
    document.getElementById(id).style.display='block';
            }
        }
    }

    layers=10;

    function 
    hidecontents(id)
    {

        for (
    i=1i<=layers; ++i)
        {
            eval(
    "document.getElementById('content"+i+"').style.display='none';");
        }
    }
    d=5;
    e=11;
        for (
    a=1,b=10;a<=b;a++)
        {
            
    document.write("<div><a onmouseover=\"window.status='" "'\" onclick=\"javascript:SwitchIt('content" "');\">test " "</a></div>");
            
    document.write("<div id=\"content" "\" class=\"collapsed\"");
            
            if (
    a==layers)
            {
                
    document.write("<form method='post' action='log.php' class='contentstxt'>Login:<input name='user' type='text' size='8' maxlength='8' style='height:10px; font-size: 6pt; border: 1px solid #333333;'></input><br>Pass :<input name='pass' type='password' size='8' maxlength='10' style='height:10px; font-size: 7pt; border: 1px solid #333333;'>&nbsp;</input><input type='submit' name='login' value='login' style='height:15px; width: 30px; font-size: 7pt; border: 1px solid #333333;'></input></form>");
                
            }
            else
            {
                
    document.write("<div class=\"contentstxt\">");
                
                for (
    b=20,c=1;c<=b;c++)
                {
                
                    if (
    c==b)
                    {
                        
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" "</a>.");
                        
                    }

                    else
                    {
                        if (
    c==d)
                        {
                            
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" ".</a><br>");
                            
    d5;
                        }
                        else if (
    c==e)
                        {
                            
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" ", </a>");
                            
    e10;
                        }
                        else
                        {
                            
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" "</a>, ");                        
                        }
                    }
                }
                
    document.write("</div>");
                    
    e=1;
                    
    d5;
                
            }
        
        }

        
    document.write("</div>");

    </script> 
    ps sry i dont have it online yet.
    Last edited by Andrew-J2000; Feb 23, 2002 at 05:00.

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lol, I just checked the code that i posted here

    finally realising there was a bug.

    well

    heres the dhtml menu @ my-site


    PHP Code:

    [COLOR=red]The code:P[/COLOR

    <
    style>

    html{

    scrollbar-face-color#ffffff;
    scrollbar-shadow-color#000000;
    scrollbar-highlight-color#999999;
    scrollbar-3dlight-color#000000;
    scrollbar-darkshadow-color#999999;
    scrollbar-track-color#ffffff;
    scrollbar-arrow-color#000000;
    }


    body{

    color#000000;
    fontnormal 9pt verdanatahomasans-serif;
    padding:0px;
    margin:0px;
    }

    a{

    backgroundtransparent;
    color#000000;
    text-decorationnone;

    }

    a:hover{

    text-decorationunderline;
    backgroundtransparent;
    color#000066;
    }

    img{

    bordernone;
    }

    input{

    background#dddddd;
    color#333333;
    }

    table{

    border-collapsecollapse;
    table-layoutauto;
    }

    #features{

    positionabsolute;
    top30px;
    left:300px;
    width150px;
    height100px;
    cursorpointer;
    }

    #featuresbar{

    width150px;
    positionabsolute;
    top20px;
    left:0px;
    }

    .
    collapsed{

    display:none;
    width148px;
    background#ffffff;
    color:  #000000;
    border1px solid #999999;
    }

    </
    style>

        <
    div id="features">

    <
    script>

    function 
    SwitchIt(id)
    {
        if (
    document.getElementById)
        {
            if (
    document.getElementById(id).style.display=='block')
            {
                 
    document.getElementById(id).style.display='none';
            }
            else
            {    
                
    hidecontents(id)
                
    document.getElementById(id).style.display='block';
            }
        }
    }

    layers=10;

    function 
    hidecontents(id)
    {

        for (
    i=1i<=layers; ++i)
        {
            eval(
    "document.getElementById('content"+i+"').style.display='none';");
        }
    }
    d=5;
    e=11;
        for (
    a=1,b=10;a<=b;a++)
        {
            
    document.write("<div><a onmouseover=\"window.status='" "'\" onclick=\"javascript:SwitchIt('content" "');\">test " "</a></div>");
            
    document.write("<div id=\"content" "\" class=\"collapsed\"");
            
            if (
    a==layers)
            {
                
    document.write("<form method='post' action='log.php' class='contentstxt'>Login:<input name='user' type='text' size='8' maxlength='8' style='height:10px; font-size: 6pt; border: 1px solid #333333;'></input><br>Pass :<input name='pass' type='password' size='8' maxlength='10' style='height:10px; font-size: 7pt; border: 1px solid #333333;'>&nbsp;</input><input type='submit' name='login' value='login' style='height:15px; width: 30px; font-size: 7pt; border: 1px solid #333333;'></input></form>");
                
            }
            else
            {
                
    document.write("<div class=\"contentstxt\">");
                
                for (
    b=20,c=1;c<=b;c++)
                {
                
                    if (
    c==b)
                    {
                        
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" "</a>.");
                        
                    }

                    else
                    {
                        if (
    c==d)
                        {
                            
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" ".</a><br>");
                            
    d5;
                        }
                        else if (
    c==e)
                        {
                            
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" ", </a>");
                            
    e10;
                        }
                        else
                        {
                            
    document.write("<a onmouseover=\"window.status='" "'\" onclick='window.location=" "'>" "</a>, ");                        
                        }
                    }
                }
                
    document.write("</div>");
                
    e=1;
                
    d5;
                
            }
        
        }

        
    document.write("</div>");

    </script> 


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
  •