Geek asks and answers

JQuery / CSS: set dynamic width by content, avoid inheritance

I am creating a jQuery based slider. There is a “display window" div 960px and another div inside, which contains all the content. The content has a dynamic width, and I want to get this size so that the script slider knows exactly how far to scroll on each side.

After loading the content (only simple PHP requests that output HTML), for some reason, the div inside is saved when another div width is infected, and I get 960px content (even if the content takes up more space). I set the div to "inherit: none! Important", and in jQuery I am looking for a way to set the initial width, then reset and look for the full width of the div. How do you approach this?

var contentWidth = $('#content').width();
$('#content').css('width', contentWidth); // Does not help resetting
alert ("#content width is " + contentWidth); // Gives me 960
+2
source share
2 answers

In reset width you need to first remove the widthCSS property and set the property display:

By default, a DIV element has a style display: blockthat forces the element to accept the entire width. Temporarily changing the property displayto get the true minimum width:

var display = $("#content").css("display"); //Get current display style
$("#content").css({display:"inline-block", width:""});

//Calculate width
var contentWidth = $('#content').width();

//Return display style, set new width
$('#content').css({width: contentWidth, display: display});
+2
source

Have you tried this ?:

$("#content").width(contentWidth);
0
source

More articles:


All Articles