Div width set to 100% in CSS breaks the width of my script

Question

I have a Div Slider that swaps out Divs on click. If I change the css to the following:

.hslide-item {width: 100%};

Then the entire div width is ignored by the script. I need .hslide-item to fill its parent div 100% without breaking the JS side of things.

 // Add markup $('.hslide').wrapInner('<div class="hslide-stage" />'); // Calculate Conditions & Set Vars // var playTimer = 9, slideQty = $('.hslide-item').length, slideWidth = $('.hslide-item').width(), stageWidth = $('.hslide-stage').width(), contWidth = $('.hslide').width(); if ((slideQty*slideWidth) < contWidth) { $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev'); $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next'); } else { $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled'); $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled'); } $(window).resize(function() { var slideQty = $('.hslide-item').length, slideWidth = $('.hslide-item').width(), stageWidth = $('.hslide-stage').width(), contWidth = $('.hslide').width(); if ((slideQty*slideWidth) < contWidth) { $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev'); $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next'); } else { $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled'); $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled'); } }); $('.hslide-next').live('click', function(event) { event.preventDefault(); $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() { $('.hslide-item:first').appendTo('.hslide-stage'); $('.hslide-stage').css({left: '0px'}); }); }); $('.hslide-prev').live('click', function(event) { event.preventDefault(); $('.hslide-item:last').prependTo('.hslide-stage'); $('.hslide-stage').css({left: -(slideWidth)}); $('.hslide-stage').animate({left: '0px'}, 500, function() { }); }); function moveForward() { $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() { $('.hslide-item:first').appendTo('.hslide-stage'); $('.hslide-stage').css({left: '0px'}); }); } var timer = setInterval(moveForward,playTimer); $('.hslide, .hslide-prev, .hslide-next').hover(function(ev){ // clearInterval(timer); }, function(ev){ // timer = setInterval( moveForward, playTimer); });

 body { font-family:sans-serif; } .hslide { height:100px; width:100%; background:#eee; font-size:0; position:relative; overflow:hidden; } .hslide-stage { position:absolute; white-space:nowrap; } .hslide-item { display:inline-block; background:#ccc; box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255); width:500px; height:100px; font-size:12px; text-align:center; } .hslide-prev, .hslide-next { display:inline-block; background:#eee; color:#000; text-decoration:none; padding:10px; margin:5px 0; } .hslide-prev:hover, .hslide-next:hover { background:#ccc; } .hslide-prev-disabled, .hslide-next-disabled { display:inline-block; background:#eee; color:#ccc; text-decoration:none; padding:10px; margin:5px 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <div class="hslide"> <div class="hslide-item">One</div> <div class="hslide-item">Two</div> <div class="hslide-item">Three</div> </div> <a href="#" class="hslide-prev">Previous</a> <a href="#" class="hslide-next">Next</a>

Answer 1

 // Add markup $('.hslide').wrapInner('<div class="hslide-stage" />'); // Calculate Conditions & Set Vars var playTimer = 9, slideQty = $('.hslide-item').length, slideWidth = $('.hslide-item').width(), stageWidth = $('.hslide-stage').width(), contWidth = $('.hslide').width(); if ((slideQty*slideWidth) < contWidth) { $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev'); $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next'); } else { $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled'); $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled'); } $(window).resize(function() { var slideQty = $('.hslide-item').length, slideWidth = $('.hslide-item').width(), stageWidth = $('.hslide-stage').width(), contWidth = $('.hslide').width(); if ((slideQty*slideWidth) < contWidth) { $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev'); $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next'); } else { $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled'); $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled'); } }); $('.hslide-next').live('click', function(event) { event.preventDefault(); $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() { $('.hslide-item:first').appendTo('.hslide-stage'); $('.hslide-stage').css({left: '0px'}); }); }); $('.hslide-prev').live('click', function(event) { event.preventDefault(); $('.hslide-item:last').prependTo('.hslide-stage'); $('.hslide-stage').css({left: -(slideWidth)}); $('.hslide-stage').animate({left: '0px'}, 500, function() { }); }); function moveForward() { $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() { $('.hslide-item:first').appendTo('.hslide-stage'); $('.hslide-stage').css({left: '0px'}); }); } var timer = setInterval(moveForward,playTimer); $('.hslide, .hslide-prev, .hslide-next').hover(function(ev){ // clearInterval(timer); }, function(ev){ // timer = setInterval( moveForward, playTimer); });

 body { font-family:sans-serif; } .hslide { height:100px; width:100%; background:#eee; font-size:0; position:relative; overflow:hidden; } .hslide-stage { position:absolute; white-space:nowrap; width: 100%; } .hslide-item { display:inline-block; background:#ccc; box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255); width:100%; height:100px; font-size:12px; text-align:center; } .hslide-prev, .hslide-next { display:inline-block; background:#eee; color:#000; text-decoration:none; padding:10px; margin:5px 0; } .hslide-prev:hover, .hslide-next:hover { background:#ccc; } .hslide-prev-disabled, .hslide-next-disabled { display:inline-block; background:#eee; color:#ccc; text-decoration:none; padding:10px; margin:5px 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="hslide"> <div class="hslide-item">One</div> <div class="hslide-item">Two</div> <div class="hslide-item">Three</div> </div> <a href="#" class="hslide-prev">Previous</a> <a href="#" class="hslide-next">Next</a>

.hslide-stage also needs width: 100%