CODEWITHSUNDEEP
jquery
thornemeister
thornemeister

Reputation: 39

Jquery slideshow 100% width

I've got a Jquery slideshow working great. However, the width of the slides is controlled by the Jquery code in the <head>, see example 

<script type="text/javascript">
$(document).ready(function(){
    var currentPosition = 0;
    var slideWidth = 720;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

What I need to do is set the width to 100%, how can I do this? Everytime I use the % symbol the slideshow stops working?

Cheers, Andy

Here's the full code:

<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0; var slideWidth = 720; var slides = $('.slide'); var    numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
  'float' : 'left',
  'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
  'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{   $('#rightControl').show() }
}   
});
</script>

Upvotes: 0

Views: 1622

Answers (2)

MRR0GERS
MRR0GERS

Reputation: 654

Try this:

var slideWidth = document.body.offsetWidth;

Upvotes: 1

WWW
WWW

Reputation: 9860

Try this:

<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = getInt($("body").css("width"));
var slides = $('.slide');
var numberOfSlides = slides.length;

function getInt(num)
{
    if (isNaN(num)) {
        return num.replace(/[^-0-9]/g,"");
    } else {
        return num;
    }
}
</script>

While it's not a perfect solution, it will at least set the width to the page width at load time. You'd have to create an event handler for the resize event on the body if you wanted to fix the slideWidth variable when the user resizes the browser window.

Upvotes: 0

Related Questions