Width of the Parent Container with Jquery

Width of the parent container with jquery

Or something like ...

http://jsfiddle.net/y3597/2/

$('#object').width($('#object').parent().width());

How to find a parent element width in JavaScript or jQuery?

var x = $("#typehead").parent().width();

jQuery. Element width depending on its parent width

You could use a child selector like this

$('tr:first td > input').each(function(){
    $(this).width($(this).parent().width());
});

This code should select all td of the first row and give them the width of their parent.

Jquery on resize apply parent width to child

You can do:

var $window = $(window);
$window.resize(function() {
    $('ul li').each(function () {
        var parentWidth = $(this).width();
        if ($(this).find('a').length) {
            $(this).find('a').width(parentWidth)
        }
    });
});

Updated Fiddle

Calculate the width and height of parent div and apply to image accordingly

Using jQuery you can use .height(), .innerHeight() or .outerHeight().

The differences are:

• height() returns just the height of the element, no borders, no margins and no padding
• innerHeight() returns the element height and the padding
• outerHeight() returns the element height, the padding and borders
• outerHeight(true) returns the element height, the padding, borders and margins

I have more details including output examples using jsFiddle in this post here.

For width you can use width(), innerWidth() or outerWidth().

The same logic applies as with height.

All values are in pixels.

To get the height/width you can use it similar to this:

// The below is an example, you need to add your element references as required.

// Use height(), innerHeight() or outerHeight() as needed.
var newHeight = $("#slider-wrapper").height();

// Use width(), innerWidth() or outerWidth() as needed.
var newWidth = $("#slider-wrapper").width();

To set the height/width you can use it similar to:

// The below is an example, you need to add your element references as required.
var newHeight = $("#slider-wrapper img").height(newHeight);
var newWidth = $("#slider-wrapper img").width(newWidth);

Adjust a width based on parent w/ jQuery

What you have should work but I would probably change it to this:

$(".myClass").css("width",$(".myClass").parent().css("width"));

You might be able to use this instead of the second $(".myClass"), but you'd have to test that.

Keep in mind that it's not changing the class itself. It's changing the width of any element that uses that class.

UPDATE:

If you are going to be doing any sort of calculations with the parent width then you should probably stick with your original method. I like css when you are applying styles "as is" but that is a personal preference. If you are doing any kind of modifications to the parent value then width is probably better.

From the width documentation:

The .width() method is recommended
when an element's width needs to be
used in a mathematical calculation.

How to set percentage width for a nested element not of direct parent but of parent's parent?

That can be done with CSS, where you set position: relative to the outermost div and position: absolute to the innermost.

Doing like that the innermost relates its position and size to the outermost

Updated

To position the innermost next to the middle div, use this for its left position: left:'+ util +'%;

<div>"sfin" is 50%</div>
<table>  <tr>    <td id="tnum">      <div style="height: 20px; width: 100px; position: relative;">        <div id="did" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: red; font-weight: bold;font-family: Arial Black; width:50%;overflow: hidden;">          weekno.TotalUtilization          <div style="position: absolute; top:0; left: 50%; height: 20px; background-color: rgb(102,197,232);width:50%;"></div>        </div>      </div>    </td>  </tr></table>
<div>"sfin" is 25%</div>
<table>  <tr>    <td id="tnum">      <div style="height: 20px; width: 100px; position: relative;">        <div id="did" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: red; font-weight: bold;font-family: Arial Black; width:50%;overflow: hidden;">          weekno.TotalUtilization          <div style="position: absolute; top:0; left: 50%; height: 20px; background-color: rgb(102,197,232);width:25%;"></div>        </div>      </div>    </td>  </tr></table>

Set child's width to the height of the parent in pure CSS

Based on this specific demo, you could use viewport relative units and it will work as expected.

Use width: 80vh in this case - updated example. You can find browser support here.

Since #parent-div has a height of 80% of the viewport, you can use 80vh to set #child-div's width to the same height. This clearly won't work if #parent-div doesn't have a height of 80% of the viewport, though.

As an alternative, you would have to avoid rotating the child element, and just rotate the parent element and give the child element a height of 100%.

---

Related Topics