How do I get my div to overlay on top of other table rows?


Tags: javascript,jquery,css

Problem :

How can I make a div display over the top of a table tr, so the table row does not expand.

Wwhen I click on any of the ".property_menu_link" anchor tags to expand the menu the whole row expands. I want the menu to overlay over the top of the TR's, not expand the table, but I'm struggling on getting this to happen.

What am I doing wrong? HTML:

<table>
    <tr>
        <td valign="top" align="left">
                <div class="property_menu_container">

                    <div style="display: none;" class="property_links_box ui-corner-all">
                        <ul class="basic">
                            <li>    
                                <a onclick="open_me()" >Property Details</a>
                            </li>
                            <li>    
                                <a onclick="open_me()" >Units, Leases &amp; Occupants</a>
                            </li>
                        </ul>
                    </div>
                    <div class="property_menu_link">
                        <a>
                            <img src="images/maximize.png" id="68_p_img_folder">
                        </a>
                    </div>
                </div>                  
                <span class="page_name property_name_span">Property Name 1 Here</span>
        </td>
    </tr>
    <tr>
        <td valign="top" align="left">
                <div class="property_menu_container">

                    <div style="display: none;" class="property_links_box ui-corner-all">
                        <ul class="basic">
                            <li>    
                                <a onclick="open_me()" >Property Details</a>
                            </li>
                            <li>    
                                <a onclick="open_me()" >Units, Leases &amp; Occupants</a>
                            </li>
                        </ul>
                    </div>
                    <div class="property_menu_link">
                        <a>
                            <img src="images/maximize.png" id="68_p_img_folder">
                        </a>
                    </div>
                </div>                  
                <span class="page_name property_name_span">Property Name 2 Here</span>
        </td>
    </tr>
</table>

CSS:

/******************************
    Property Menu dropdown
******************************/
.property_menu_container {
    width: 200px;
    /*height: 300px; --> this causes the row height for properties to be 300px before it's expanded*/
    position: relative;
}
.property_name_span{position: absolute; left:40px;}
.property_links_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 15px;
    padding:10px;
    border: 3px solid #000000;
    background-color: #FFFFFF;
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/


} 
.property_menu_link {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.property_links_box{
    z-index: 10;
}

/******************************
    END Property Menu dropdown
******************************/

Javascript:

$(document).ready(function(){       

    $("div.property_menu_link a").toggle(function(){
            //1st Click
            $(this).parent().siblings(\'.property_links_box\').show();
            $(this).parent().parent(\'.property_menu_container\').css("height", "300px");
        }, function() { 
            //2nd click
            $(this).parent().siblings(\'.property_links_box\').hide();
            $(this).parent().parent(\'.property_menu_container\').css("height", "1px")
        });
});


Solution :

You need to learn about styling tables using css. You can't do what you want to do with divs and tables. You are going to have to replace the contents of the row rather than overlay the row

You will probably need to use spans (rowspan, colspan etc...)

See here for more details http://www.w3.org/TR/html4/struct/tables.html and here http://www.w3schools.com/html/html_tables.asp

On that second link you can use the try it here link and paste in the source code from your browser which is great and easier than using firebug.

Plus see the comment about slashes on you question from @TomalakGeret'kal


    CSS Howto..

    How to contol a CSS property with Javascript

    How show button hovering above an image or pressing over it? [closed]

    How to display thumbnail in dropdown CSS list along with other styling of text

    How to Write an Angular directive to update CSS class based on form validation

    how to avoid firefox to add overlay color on image click?

    How can I position some divs inside an unordered list so they line up with the root element of the list?

    how do you modify the actual css of a class rather than add a style to each element of that class? [duplicate]

    How to make css jquery autofit navigation?

    HTML CSS: How to align grid to content area?

    How to create css code that works for all browser?

    How to make two separate, independent columns (using html and css)

    How to make a div fade on hover?

    How to retain rectangular border around button when clicked

    This should be simple but want to do it right. CSS display:none; how to turn back on according to @media

    How to adjust CSS to make footer fixed height?

    How to remove table column with CSS

    How to make cards on the image

    How to make text to wrap image in editor

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

    How to Make Button Tag Only Show Image Inside of it

    How to reveal content behind a div with pure css?

    CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

    How to disable CSS style relatively to a certain parent tag?

    How to avoid CSS conflict using jquery?

    How to animate transitions triggered by links

    How to change the width of displayed text nested in a div?

    CSS: How to create buttons with reflected shine similar to iOS icons?

    How to keep layout unchanged when keyboard is displayed?

    How to set CSS class to Button control using Session value in design page

    How to create overlaying papers (pile) - CSS / HTML