CODEWITHSUNDEEP
jquerycss
paynestrike
paynestrike

Reputation: 4658

How to hide a part of div when appending it to dom

normally when i want to hide a part a div,i will do 

postion:absolute;
left:-1000px;

this works,and the scroll bar wont show. but when i try to append a div using the same style, the scroll bar shows up,any idea why and how to fix it.

by the way i tryed overflow:hidden, it wont work.

here is the code

#container{
width: 85%;
height: 900px;
margin: 0px auto;
overflow: hidden;
/*background-color: green;*/

}

.work_area{
width: 1090px;
height: 700px;
margin: 10px 0px;
/*padding-top: 200px;*/
background-color: #FFF;
box-shadow:0px 0px 13px #666;
/*border-radius: 8px;*/
position: absolute;
right:-1020px;

}

   $('#container').append("<div id='realapp_wrapper' class='work_area'></div>")

Upvotes: 0

Views: 112

Answers (4)

Ivan Turovets
Ivan Turovets

Reputation: 164

Try to add position: relative to #container

Upvotes: 0

Razmig
Razmig

Reputation: 629

You can also do it in jquery:

$('.slider').appendTo('body');
$('.slider').css({
    "position": "absolute",
    "left" : "-1000px"
});​

Upvotes: 0

The Disintegrator
The Disintegrator

Reputation: 4187

A better approach would be to have a css class for this

.hidden {display: none}

or

.hidden {visibility: hidden}

Then, append the div assigning the hidden class to it.
When you need to show the div, simply remove the class from it.

Upvotes: 0

Chau Chi Thien
Chau Chi Thien

Reputation: 31

try: overflow:hidden; http://www.w3schools.com/cssref/pr_pos_overflow.asp

Upvotes: 1

Related Questions