How can I dynamically change element's width related with parent width using only CSS? [closed]


Tags: javascript,jquery,html,css3

Problem :

I'm trying to make dynamically changed layer according to it's parent element's width using only CSS. In specific, let's suppose that a parent element called element A and childs are label a, label b, ..

If element A width is in 500px<=x px<1000px, then set label ?'s width equal to 200px.

If element A width is in 250px<=x px<500px , then set label ?'s width equal to 125px.

..

How can I do this? If it's not possible with only CSS, then what do I need?

Sorry about terrible english anyway;;



Solution :

I don't think you can do it in css alone. But you can use jQuery. A simple if condition would suffice.

var width = $('selector').width();
if (width > 500 && width < 1000) {
    $('label').css('width', '200px');
}

    CSS Howto..

    Chrome inspector not showing body outline correctly

    How is text thickness calculated according to css property “font-weight”?

    How make my CSS responsive using Bootstrap 3.1

    How to prioritize a CSS class?

    How to debug HTML5/CSS for background video in RoR app

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?

    How to define alternative font-family corresponding to font-size CSS

    How does bootstrap restrict minimum page width to 400px

    How to set css to more selectors when one of it is $(this)?

    How do you set a JavaScript onclick event to a class with css

    How to display a background image with a:hover

    How to make image override parent width and stretch to browser width?

    How to tune CSS with Isotope to display top border?

    How to Set Up a Responsive Background-Image with CSS

    How to display the bottom of an image?

    How do I remove applied css on a div by JQuery?

    how to remove css property “element{}” [closed]

    Sub menu wont show when menu item hovered over (css html)

    How to prevent left “post” section from dropping off?

    How to position absolute in scrollable area? (Css)

    How do I apply a border around a checkbox when checked?

    How does CSS resize images?

    how to set the absolute position div center align

    How to know which CSS style is applied and from where (javascript)?

    How Float divs like twitter?

    css: column-count property - how to modify it with css to modify the number of items in each column?

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How to make div horizontally and vertically centered without scripting?

    How to make a div 100% of page (not screen) height?

    How to Drop 2 nested shadows On 2 Divisions in CSS? [closed]