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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    28
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Access div within div

    I'm attempting to create a cascading menu, but am having difficulty accessing certain div elements. For an example, try scrolling to:

    http://www.applicachia.com/dev/test.html

    Option 2 > more... - the div that appears when you click "more.." should stay visible until the mouse leaves it, but it does not seem to be able to access the div style.

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,774
    Thanks
    19
    Thanked 155 Times in 146 Posts
    A couple of things:

    1) You should avoid using JS for functionality as important as navigation. What if JS is disabled in the browser for some reason? Your menu becomes useless.

    2) You can do virtually the same things that you are doing with JS here with CSS (using unordered lists and the :hover pseudo-class in modern browsers to toggle the display of list items)...no JS is required unless you are still developing for IE 6....

    In any case, try the following in you code:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
        <head>
            <meta http-equiv="Content-Script-Type" content="application/ecmascript">
    
            <style>
            html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
                margin:0pt;
                padding:0pt;
                font-size: 12px;
                font-family: helvetica;
            }
    
            .box-main{
                border-width:1px;
                border-style:solid;
                border-width:1px;
                margin-top:5px;
            }
    
            .box-title{
                background-color:lightgrey;
                padding: 4px;
                overflow: hidden;
                font-size: 12px;
                font-family: helvetica;
            }
    
            .box-content{
                padding:4px;
            }
    
            .box-row-highlight{
                font-size: 12px;
                font-family: helvetica;
                padding-top:1px;
                text-decoration:none;
                color:black;
                background-color:white;
                cursor:pointer;
            }
            </style>
        </head>
        <body>
            <table width="100%" height="100%" cellspacing="4" cellpadding="0">
                <tr>
    
                    <td width="190" valign="top">
                        <div id="contacts_main" class="box-main">
                            <table cellspacing="4" cellpadding="0" width="188" class="box-title">
                                <tr>
                                    <td align="left">
                                        Head
                                    </td>
                                    <td align="right">
                                        &nbsp;
    
                                    </td>
                                </tr>
                            </table>
                            <div id="contacts_body" class="box-content" style="overflow:auto; max-height:80px;">
                                <div class="box-row-highlight" onMouseOver="highlight_row(this)" onMouseOut="unhighlight_row(this)">
                                    Option 1
                                    <div style="display:none; position:absolute; left:185px; height:40px; border-style:solid; border-width:1px; border-color:black; background-color:white; width:150px;">
                                        <table cellspacing="0" cellpadding="0" width="100%" height="100%">
                                            <tr>
    
                                                <td>sub 1</td>
                                                <td>sub 2</td>
                                                <td>sub 3</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
    
                                <div class="box-row-highlight" onMouseOver="highlight_row(this)" onMouseOut="unhighlight_row(this)">
                                    Option 2
                                    <div style="display:none; position:absolute; left:185px; height:40px; border-style:solid; border-width:1px; border-color:black; background-color:white; width:150px;">
                                        <table cellspacing="0" cellpadding="0" width="100%" height="100%">
                                            <tr>
                                                <td>sub 1</td>
                                                <td>sub 2</td>
                                                <td>
    
                                                    <div onMouseOver="setDisplay(this.childNodes[2], 'inline')">
                                                        more..<br><div style="display:none; position:absolute; border-bottom:1px #000000 solid; border-right:1px #000000 solid; border-left:1px #000000 solid; background-color:white; width:100px; cursor: default;" class="box-row" onMouseOut="setDisplay(this, 'none')"><div>sub-sub 1</div><div>sub-sub 2</div><div>sub-sub 3</div><div>sub-sub 4</div></div></div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
    
                                </div>
                            </div>
                        </div>
                    </td>
                    <td valign="top">
                        tsa sasd asd as da
                    </td>
                </tr>
            </table>
    
            <script type="text/javascript">
            function highlight_row(obj)
            {
                obj.style.backgroundColor = "whitesmoke";
                obj.childNodes[1].style.display = "inline";
            }
    
            function unhighlight_row(obj)
            {
                obj.style.backgroundColor = "white";
                obj.childNodes[1].style.display = "none";
            }
    
            function setDisplay(obj, s)
            {
                obj.style.display = s;
            }
            </script>
    
        </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

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