I am trying to set a width dynamically on a div. This is correctly working with Safari, Chrome and Firefox but not in IE8. This is using jQuery UI for the slider function. Here is my code so far:
var ourStoryPosts = $(".ourStory .grid_12mod").children();
var ourStoryLength = ourStoryPosts.length;
var ourStoryWidth = $(ourStoryPosts[2]).outerWidth(true);
var ourStoryWrapperWidth = ourStoryLength * ourStoryWidth;
var maxSlider = ourStoryWrapperWidth - 1020;
$(".ourStory .grid_12mod").width(ourStoryWrapperWidth);
$(".ourStorySlider").slider({
step: 1,
max: maxSlider,
slide: function( event, ui) {
$(".ourStory").css({
"left" : -ui.value
});
}
});
As you can see, I am using variables to set these values. The width()
method is not working as expected.
I have tried using the String()
constructor to explicitly cast to a string. I have tried using + "px"
at the end of the expression as well. Each time, the div is being set to 0px
. Why is this not working correctly?
您可以尝试设置CSS属性的宽度吗?
$(".ourStory .grid_12mod").css('width', ourStoryWrapperWidth.toString() + 'px');
Not sure what the actual issue was, but using native JS fixed it for me:
var elem = document.querySelector(".grid_12mod");
var ourStoryChildren = elem.children;
Using the jQuery 1.9 method of children()
logged a result of 5
elements in Safari, Chrome and Firefox, while IE8 logged 1
. Using the native children
attribute of the elem
object fixed the problem and logged 5
for all browsers.
The reason this was logging 0
is because IE8 was returning only 1
child element, when 5
existed, therefore the math was off and IE8 was trying to find the second array element when it only found 1
element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.