CODEWITHSUNDEEP
htmlcss
sun
sun

Reputation: 1668

how to position a button div in a dynamically changeable div?

Hi I created a slider in which I want to give a button to the slider Which should look like thisBefore Slider Div **Width** Changes

I created The Button To the slider with the following code.all looks good

#sliderdiv 
{
    top:30%;     
    right: -2px; 
    position:fixed;
    width:300px;
    height:270px;
    margin-right: -300px;
}
#buttondiv
{                  
    height:110px;
    width:40px;
    background:aqua;
    position:absolute;
    float:left;
    margin-left: -39px;                                     
}

<div id="sliderdiv">
    <div id="buttondiv">
    </div>
</div>

Now when the width of the slider changes the button moves from it like thiswhen slider width changed

I Know This is because of the margin-left value which i give to the button div.Here is the question i have is there a way to position it correctly even when the slider div is automatically changed?

Or Is there a way to place the button to slider div without any gap and without changing the button div values?

Thanks...

Here is the Fiddle http://jsfiddle.net/sNgxR/3/

Upvotes: 0

Views: 442

Answers (1)

bboy
bboy

Reputation: 1408

check this out: 

var mywidth = $("#buttondiv").width();
$("#buttondiv").css("margin-left", -mywidth);

http://jsfiddle.net/sNgxR/4/

edit the Width of your button and hit run.

if you change the val of the slider, it works fine

Upvotes: 1

Related Questions