How to make a JS horizontal content slide from px to % responsive

Question

This is driving me mad: I have a small bit jquery who slides three divs horizontally.

FIDDLE

Edit 3: Live demo; complete website showing how I want i

Answer 1

You can read more about the TB3 grid here: http://getbootstrap.com/css/#grid

Also read: Twitter's Bootstrap mobile: more columns and Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

You will need something like:

Panel 1



Panel 2



Panel 3

Below the 768 pixels your columns will stack (100% screen-width) caused by the col-sm-4. Above the 767 pixels you can use a media query to give your panels a fixed width:

@media (min-width: 768px)
{
.panel {width:200px}
}

update (based on the comment) below.

Try this: http://bootply.com/73541

CSS

@media (max-width: 767px)
{

#panel1 {visibility:visible}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}
}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
}

javascript

function showandhide(show)
{
    $('.panel').hide();
    $('#' + show).css('visibility','visible').slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

html

  

    panel 1 |
    panel 2 |
    panel 3 
  
  



Panel 1



Panel 2



Panel 3

Update 2 based on the response.

1) above the 767 pixels, all panel are shown in my example. You will have to reload the page when you resize from small to big. To could also trigger this reload with $(window).resize() note some browser will fire this twice, see https://stackoverflow.com/a/4298653/1596547 for a solution

2) for "sliding in sideways" rewrite this: http://jsfiddle.net/ax4AC/2/:

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });

html (new)

  

    panel 1 |
    panel 2 |
    panel 3 
  
  



Panel 1



Panel 2



Panel 3

javascript (new)

function showandhide(show)
{
    // source: http://jsfiddle.net/ax4AC/2/

    $('.panel').css('margin-left','-260px').hide();
    $('#' + show).css('visibility','visible');
  $('#' + show).show();
    $('#' + show).animate({
        'margin-left': parseInt($('#' + show).css('margin-left'), 10) == 0 ? -$('#' + show).outerWidth() : 0,
        opacity: "show"
    });



  //.slideDown("slow");
}   


$('.panellink').click(function()
{

    showandhide($(this).attr('rel'))
    return false;
} );

//source timeout: https://stackoverflow.com/a/4298653/1596547
var id; 

$(window).resize(function() 
{


        clearTimeout(id);
        id = setTimeout(doneResizing, 500);



});

function doneResizing()
{


    if($(window).width()>=768)
    {
        $('.panel').css('display','block');
        $('.panel').css('visibility','visible');
        $('.panel').css('margin-left',0);
    }   

}   

css (new)

@media (max-width: 767px)
{
.panel{
    margin-left: -260px;
   }
#panel1 {visibility:visible; margin-left:0}
#panel2 {visibility:hidden}
#panel3 {visibility:hidden}


}   
@media (min-width: 768px)
{
    #menu {visibility:hidden}
    .panel {display:block; visibility:visible; margin-left:0}
}

see: http://bootply.com/73715 (new!!)