CODEWITHSUNDEEP
javascriptjquerycssdynamic
glenn
glenn

Reputation: 94

How can I dynamically apply the "left" px to a div's width, within the same parent element, using jQuery

So, in the most basic terms, I have this set up:

<div id=parent_element>

    <div class="child_one"></div>
    <div class="child_two"></div>

</div>

Currently, .child_one has a left css value that changes dynamically. What I'd like to do is keep the width value of .child_two exactly the same as the left value of .child_one, on the fly.

I've tried this:

$('.child_two').width($(this).parent($(this).closest('.child_one').css("left")));

...but, to no avail. Am I even on the right track or is there a better way of doing this?

More accurate code:

<div class="mCSB_draggerContainer">
    <div oncontextmenu="return false;" style="position: absolute; width: 266px; left: 0px;" class="mCSB_dragger">
        <div style="position:relative;" class="mCSB_dragger_bar"></div>
    </div>
    <div class="mCSB_draggerRail"></div>
    <div class="slide_progress" style="width: 0px;"></div>
</div>


<script>
    $('.mCSB_draggerContainer').append("<div class=slide_progress></div>");

    var progress_width = $('.mCSB_dragger').css('left');
    $('.slide_progress').css('width', progress_width);
</script>

Also, I should have mentioned that the .slide_progress div is added with jQuery .append().

Upvotes: 1

Views: 599

Answers (1)

DaniP
DaniP

Reputation: 38252

Seems your problem here is you get a value with px from left but you can't paste it on width directly because it doesn't handle units : see more here Width()

You can do this :

var twoWidth = $('.child_one').css('left');
$('.child_two').css('width', twoWidth);

With this you're getting some value of left on px and then assign it to the width of second div.

To make this work you need to identify the correct place on your function or your code: here are some examples:

Fire event with Button Click

Fire event on Time

Upvotes: 1

Related Questions