如何在不影响页面布局的情况下使用jQuery扩展框的大小

Question

I would like to run a jquery which extends a box(div) without affecting on page layout.Here is a sample http://themes.ddwebstudios.net/?theme=photon&type=html

As you can see if you mouse over on the small transparent box under the image (accross the page) the box will be slideup without changing the page size.

I know how to use .hide() and .show() or slidedown and slideup functions with a display:hidden; box format but as you know there are some issue here as I would likw to display a portion of box and also I dont want to have any changes on pagelayout

Here is the sample which I tried to figure out how to do it, Can you please take a look at that and let me know how I can add a portion of magicDiv box (5% of top) before the row_3 and extend it to full size using jquery functions without affecting(defarming) the page layout?

http://jsfiddle.net/Behseini/nuC69/2/

Thanks for your time in advance.

Answer 1

The boxes do not change the page size because they use absolute positioning and z-index.

If you inspect the album-thumbs div by right clicking on it when it opens, you'll see that it's done with CSS:

The key elements being:

position: absolute;
z-index: 10;

Additionally, and this wasn't part of your question, you would use display: none; to avoid affecting page layout or visibility: hidden; to still have the div affect page layout. ( display: hidden; , as you wrote it, is not valid CSS)

Answer 2

Kato is spot on. Here is a little snippet for show hide() portion of jQuery()

Mine is a little different as I like to use arrays to store the height of expanding windows. This allows me to have expanding windows of various heights and less jQuery code

$(document).ready(function () {
    //create a string array to store various window sizes then based upon the attribute id of the element


        //load the apporaiate array value
        var winHeight = ["220px",
                         "100px",
                         "90px",
                         "400px",
                         "150px"];

    $(function () {
        $('.div1').hide();
    });

    $('.div2').click(function () {
        var cssProp = winHeight[$(this).attr('id')];

        if ($('.div1').is(':hidden')) {
            $('.div1').show();
            $('.div1').animate({ "height": cssProp }, 'slow');
        }
        else {
            $('.div1').hide("slow");
            $('.div1').animate({ "height": "0px" }, 'slow');
        }
    });

The only css applied was

.div1
{
    margin: 5px;
    height: 0px;
    font-size: .9em;
    margin-left: auto;
    margin-right: auto;
}

The value is assigned by picking up the attribute id in the div element

<div id="1" class="div2" /> // would set the height to 100px

when using hide() it attaches the attribute hidden to the element which is how I am testing to see the "visual" state of the div element. In this example I have this on a click event but you could change your event logic to .hover() if needed

I have modified your original jsFiddle file to show a working example