CODEWITHSUNDEEP
javascriptjquerycsshtml
Petya petrov
Petya petrov

Reputation: 2213

Show div with jQuery. css question

I have three divs with display: inline-block. In every div i have div with display: none when im trying to show hiding div with $('#div-id').show(1000) nearest divs 'jump around' What should i change? I do like to see div under div just draw and the left or right div doesn't change his place. For example two divs with my problem there (hide div shows up onchange in the textbox)

Upvotes: 4

Views: 447

Answers (7)

Eric Fortin
Eric Fortin

Reputation: 7603

When using display: none, the element does not render at all so it doesn't use any space on the rendered web page. I think you might want to use visibility:hidden to hide your element but still make the space usage calculation.

EDIT: It appears jQuery method works only on the display style so my answer is not applicable and indeed a fixed offset is necessary to avoid side effects in the page flow.

Upvotes: 1

krtek
krtek

Reputation: 26597

You must set a fixed size for your divs, so when the new one appears, it's constrained with the given side. I updated your JSFiddle : http://jsfiddle.net/WZCJu/16/

Have a look at how I constrain the size for your divs in the CSS. To improve layout, I took the liberty to add some styling to the submit button, so the HTML is a little bit modified too.

If you have any trouble understanding my solution, ask some questions.

Upvotes: 1

John Himmelman
John Himmelman

Reputation: 22000

Try using css's visibility property instead since it retains the element's position in the flow.

Docs: http://www.w3schools.com/css/pr_class_visibility.asp

Example:

<div id="herp" style="width: 100px; height: 40px; visibility: hidden;">plarp</div>
<div id="derp" style="width: 100px; height: 40px; visibility: visible;">slarp</div>

Upvotes: 3

Joshua Carmody
Joshua Carmody

Reputation: 13730

Changing an HTML element from display: none to display: block or some other value will always cause it to change the flow of other elements around it in the tree. To prevent the DIVs from jumping around, you have a few options. Here are a couple simple ones:

First, you could "pad" the DIV in another DIV with a fixed size. For example:

<div style="width: 100%; height: 2em;">
    <div id="js-amount" style="display: none">    
        <p>You will achieve this goal by:</p>
        <p id="achieved-date"> <p>
        <p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
    </div>
</div>

Secondly, you could use absolute positioning to remove your DIV from the flow of the document:

<div id="js-amount" style="display: none; position: absolute; top: 200px; left: 50px;">    
    <p>You will achieve this goal by:</p>
    <p id="achieved-date"> <p>
    <p id="weekly-limit-amount">Your weekly limit will be decreased by $100</p>
</div>

Upvotes: 1

axatrikx
axatrikx

Reputation: 396

display none removes the element completely from the document. there wont be any space reserved for it. so when u bring it back(show) it ll rearrange the nearby divs. so try using visibility:hidden which will retain the space but keep the div hidden..

Upvotes: 1

thirtydot
thirtydot

Reputation: 228162

http://jsfiddle.net/WZCJu/13/

I added this CSS:

#amount-div, #specific-div {
    width: 300px;
    vertical-align: top
}

Version without the width, you may like it better:

http://jsfiddle.net/WZCJu/15/

Upvotes: 3

jessegavin
jessegavin

Reputation: 75650

If you change the divs to use float: left; with a specified width you can avoid the "jump around".

See my updated example at: http://jsfiddle.net/WZCJu/12/

I changed the following:

<div id="amount-div" style="display:inline-block;">
...
<div id="specific-div" style="display:inline-block;">

To use floats with a specified width.

<div id="amount-div" style="float:left;width:220px;">
...
<div id="specific-div" style="float:left;width:220px;">

I also changed the <br> tag which preceeds the submit button so that it will clear the floated divs like so (though, there are better ways of handling that in my opinion):

<br style="clear:both">

Upvotes: 2

Related Questions