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.

Edit 3: Live demo; complete website showing how I want it to work.. until I get to less than 775px. Please resize window to see what I mean.

EDIT, by popular demand. What I want: In small screens, say from 700 and down. I want one panel to fill the screen. At a time.

2ND edit: It works fine at above 700px. Below that; I would want the screen to show only one panel at a time, and when desired (a click on the current panel), the next panel will slide in sideways. I.e. No stacked columns, which is the classic responsive design. Please see Fiddle. It is all good until you minimize the browser window or use a mobile device.

I define panel1 and panel2 as fixed width, and use a css calc to keep the third panel at 100% minus panel1 (200px) and panel2 (200px): (calc 100% - 400px)

This works ok, until I get down into small screens. Then it goes haywire: The panels stack on top of each other vertically (I want to hide the panels not active), and because of the fixed widths I "see" tiny bits of squished panels to the right. Ideally, I want each panel to fill small screens 100%.

What I need help with is this:

I must either

find a way to replace this JS defintion of the slide distance of pixels to %

 var margins = {
        panel1: 0,
        panel2: -200,
        panel3: -400,               
    }

..and therefore be able to do my css calc (100% - 20%) or something like that.

..or, at the very least, find a way to hide panels when in small screens.

All pointers greatly appreciated.

I don't understand what you exactly want. PLEASE FORMULATE YOUR QUESTION CLEARLY. Do you want to hide the inactive divs? then why are your scrollbars different in the picture and jsfiddle? — Ali Çarıkçıoğlu, Aug 11 '13 at 21:20
Sorry, the screenshot is just from the fiddle and example of what the problem is at small screens. Basically: that happens because two left panels have a fixed width. And I need help to either convert px to %, or some nifty overflow:hidden solution of some kind. Sorry for being unclear. — benteh, Aug 11 '13 at 21:25
The screenshot is from the fiddle, and is not different. I am on mac, though. — benteh, Aug 11 '13 at 21:26
ups, I have indeed, thanks! updated http://jsfiddle.net/xrnv9/3/ — benteh, Aug 11 '13 at 21:29
your question is still pretty unclear of what sould be the final result... might be that all your logic and CSS can be better rebuilt... — Roko C. Buljan, Aug 11 '13 at 21:30
I read your question again and again, and I still have no idea what you want. — Ali Çarıkçıoğlu, Aug 11 '13 at 21:31
Additionally you should know that in CSS you cannot comment lines using `//` (like in JS) but with `/**/` Otherwise your CSS will go mad at you — Roko C. Buljan, Aug 11 '13 at 21:31
change the photo above, of what you want. (and not what you don't want, we see the current situation on fiddle anyway) — Ali Çarıkçıoğlu, Aug 11 '13 at 21:33
// as single line comment out in css have always worked dandy for me everywhere. If this does not work in JSfiddle, I was unaware of that. — benteh, Aug 11 '13 at 21:35
You should use enyo.js for this. They have already done all the work for scalable sliding panels. Check out the [sampler](http://enyojs.com/sampler/) page. — cube, Aug 12 '13 at 21:01

score 1 · Accepted Answer · edited May 23 '17 at 12:33

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:~~

<div class="row">
<div class="col-sm-4">
<div class="panel">Panel 1</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 2</div>
</div>

<div class="col-sm-4">
<div class="panel">Panel 3</div>
</div>
</div>

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

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-4 col-lg-4">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-4 col-lg-4">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

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)

<div id="menu" class="row">
  <div class="col-12">
    <a class="panellink" rel="panel1" href="">panel 1</a> |
    <a class="panellink" rel="panel2" href="">panel 2</a> |
    <a class="panellink" rel="panel3" href="">panel 3</a> 
  </div>
</div>  
<div class="container">
<div class="row">
<div class="col-sm-3 col-lg-3">
<div id="panel1" class="panel">Panel 1</div>
</div>

<div class="col-sm-3 col-lg-3">
<div id="panel2" class="panel">Panel 2</div>
</div>

<div class="col-sm-6 col-lg-6">
<div id="panel3" class="panel">Panel 3</div>
</div>
</div>
</div>

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!!)

Hello, Bass, appreciate you taking the time. I am familiar with standard responsive methods, and your outline above is sensible. My problem, though, is that I do _not_ want the columns to stack at all, and that at larger screens I want to have a sideways-horizontal slide. So that when selection (click on object) in panel1 one results in sliding over to panel2 (or rahter: sliding panel1 into hiding), and selection (click) in panel2, sliding over so that panel3 fills the screen. My fiddle works almost... Trying to get your suggestion to work with my little js. Thanks again for taking the time. — benteh, Aug 12 '13 at 00:23
maybe read also: http://stackoverflow.com/questions/16871718/toggle-sidebar-on-mobile-device-with-twitter-bootstrap-2-x/ see update of my answer — Bass Jobsen, Aug 12 '13 at 07:38
Thanks again for takning the time; I see I am not very good at explaining the problem... :-S I have edited my question and included a link to a live website that might be a better example: http://barebente.com/tmp/NScurrent01/distV3.html — benteh, Aug 12 '13 at 13:34
Sorry, i don't understand why http://bootply.com/73541 (make the screen smaller here too) is not a solution. I will take a look to the source of your live example later. — Bass Jobsen, Aug 12 '13 at 14:07
Hm, I must be particularly dim-witted :-S Yes, I resizes your bootply and played with it. But what I need is something that slides sideways, and where all columns (panels) are visible above 767, and below that, only one at a time (and sliding in sideways). The link to the live site will probably be the proverbial picture that says more than a thousand words: http://barebente.com/tmp/NScurrent01/distV3.html — benteh, Aug 12 '13 at 17:19
Bass - you are truly the bees knees! A life-saver indeed. I have run your code through extensive testing hence the delay in answering. I do not know how to thank you enough... And I hope this can be of help to others in the future. One tiny question; how can I get it to slide from left to right, instead of right to left? Big piles of thanks. — benteh, Aug 14 '13 at 17:02
Thanks. I think TB makes this all possible. Nice. To slide from the right, set the negative left-margin to a positive value (270) in the JS and CSS code. And subtract 10 in each iteration: `parseInt($('#' + show).css('margin-left'), -10)` — Bass Jobsen, Aug 14 '13 at 18:37

score 0 · Answer 2 · answered Aug 11 '13 at 22:42

0

From what I have understood from your question, you have the issue with panel3. You can use to avoid this type of annoyances.check live demo

.panel1, .panel2, .panel3
{
    float: left;
    height: 800px;
    padding: 5px ;
    overflow: none;
}

answered Aug 11 '13 at 22:42

Ali Çarıkçıoğlu

1,304
1
12
21

Thanks for taking the time and trying, Ali, but I am afraid overflow: none will not fix it. I have yet again updated my question in the hope that it might be clearer. Didn´t think I was that verbally handicapped though :-S – benteh Aug 12 '13 at 00:49
..and if anyone has a suggestion as to how I could get js to accept % instead of px I would be grateful. – benteh Aug 12 '13 at 00:51
see the ugly way panel3 sticks its nose" <-- what a language :)) – Ali Çarıkçıoğlu Aug 12 '13 at 00:53
:-) a little light-hearted comment in a world of hardcore geekery. – benteh Aug 14 '13 at 17:08

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

2 Answers2

Linked