Trying to get my slider to be responsive. Keeps adding a margin to offset between @media queries

Question

http://jsfiddle.net/2RE3f/6/embedded/result/

I'm trying to make a responsive js slider and I can't seem to figure out the break point glitch when going between media queries.

For instance, if you look at my jsFiddle, and set your window to the iPad size (1024px wide for screen size), and then pull out to 1200px wide, the slider breaks and there's a margin being applied to the new grid size (highlighted in red), off-setting the slider. However, if you pull back to the iPad size, then it then slider doesn't apply a margin to the right off-setting it and works normally. If load up the grid at the 1200px width, the slider works normal, but it when you size down to the iPad size, it adds a margin to the right when you hit the right arrow.

For some reason, I can't figure out how and why its adding this padded margin to the grid.

You'll have to use arrow keys (right left, to navigate between two grid galleries). There's more code in the jsFiddle but it doesn't apply to the rwd.

This is the css

@media screen (max-width: 1400px) {
#portfolio img {
    height: 400px;
    width: 400px;
}
#slider ul li {
    width: 1200px;
}
}

@media screen and (max-width: 1030px) {
.uni_con {
    width: 1024px
}
.shell {
    width: 1024px;
}
.container {
    width: 1024px;
}
#portfolio img {
    height: 512px;
    width: 512px;
}
#slider ul li {
    width: 1024px;
}
#slider .caption {
    width: 512px;
    height: 512px;
}
#slider .caption::before {
    width: 514px;
    height: 514px;
    line-height: 508px;
}
#slider .caption::after {
    width: 512px;
}
#slider .caption:hover::before {
    width: 512px;
    height: 512px;
}
#slider .caption:hover::after {
    width: 512px;
}
}

The Jquery

jQuery(function ($) {

var $sl = $('#slider'),
    $ul = $('ul', $sl),
    $li = $('li', $ul),
    slideCount = $li.length,
    c = 0, // current
    slideWidth = $li.width(),
    slideHeight = $li.height(),
    sliderUlWidth = slideCount * slideWidth;

$sl.css({
    width: slideWidth,
    height: slideHeight
});
$ul.css({
    width: sliderUlWidth
});

function move() {
    if (c == slideCount) {
        c = slideCount - 1;
        // fade out #next btn
        $('#next').stop().fadeTo(200, 0.5);
    }
    if (c == slideCount - 1) {
        $('#next').stop().fadeTo(200, 0.5);
        $('#back').fadeTo(200, 1);
    } else if (c < 0) {
        c = 0;
        $('#back').stop().fadeTo(200, 0.5);
    } else {
        $('#next').fadeTo(200, 1);
        $('#back').fadeTo(200, 0.5);
    }
    $ul.stop().animate({
        left: -c * slideWidth
    }, 500);
}

$('#back, #next').click(function () {
    return move(this.id == 'next' ? c++ : c--);
});

$(document).keydown(function (e) {
    var k = e.which;
    if (k == 39 || k == 37) {
        e.preventDefault();
        return move(k == 39 ? c++ : c--);
    }
});

});

Example Image

On the second LI (using right key), this margin keeps getting added and pushing the grid off from being inline with the container.

Thanks.

Waseem Khan · Accepted Answer

seems to be I have found the solution. The reason you were seeing that strange red margin at the right side was that you were controlling the width and height of the slider ul element using your javascript code. On window resize or a change in screen resolution, the media queries were changing other elements sizes, but this (ul sider width and height) remained the same.

I added the code to handle this problem, with comments, here is the jSFiddle:

http://jsfiddle.net/2RE3f/12/embedded/result/

And here is the updated JS Code:

    $(document).ready(function(e) {

jQuery(function ($) {

var $sl = $('#slider'),
    $ul = $('ul', $sl),
    $li = $('li', $ul),
    slideCount = $li.length,
    c = 0; // current

var slideWidth; // global so can be used in move()

// wrap the slider width and height settings in a function
function slider_fit()
{
    slideWidth = $li.width(),
    slideHeight = $li.height(),
    sliderUlWidth = slideCount * slideWidth;

    $ul.css({
        width: sliderUlWidth
    });
    $sl.css({
       width: slideWidth,
       height: slideHeight
    }); 
}

slider_fit(); // call slider_fit on window load also

// below is the function to make sure window resizing has been done
$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 250);
});

// once window is resized and media queries (if any) have been applied
// we can fit our slider elements to this new size
$(window).bind('resizeEnd', function() {
    slider_fit(); // fit slider widths and heights due to screen size change
    move(); // make adjustments to the left margins of ul
});


function move() {

    //alert(slideWidth);

    if (c == slideCount) {
        c = slideCount - 1;
        // fade out #next btn
        $('#next').stop().fadeTo(200, 0.5);
    }
    if (c == slideCount - 1) {
        $('#next').stop().fadeTo(200, 0.5);
        $('#back').fadeTo(200, 1);
    } else if (c < 0) {
        c = 0;
        $('#back').stop().fadeTo(200, 0.5);
    } else {
        $('#next').fadeTo(200, 1);
        $('#back').fadeTo(200, 0.5);
    }
    $ul.stop().animate({
        left: -c * slideWidth
    }, 500);
}

$('#back, #next').click(function () {
    return move(this.id == 'next' ? c++ : c--);
});

$(document).keydown(function (e) {
    var k = e.which;
    if (k == 39 || k == 37) {
        e.preventDefault();
        return move(k == 39 ? c++ : c--);
    }
});

});
});

I hope this helps :)

Trying to get my slider to be responsive. Keeps adding a margin to offset between @media queries

Answers (2)

Related Questions