CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Pieter VDE
Pieter VDE

Reputation: 2235

Responsive 3 column lay-out using Bootstrap

I'm building a simple web interface consisting of 3 sideway columns.

When mobile (lets say, up to 800px wide), I want these columns to spread over the full width of the screen. They shouldn't appear underneath each other, but still next to each other, with the inactive columns having a width of 0px, making for 1 column to appear 'fullscreen'. This way, I can create a slide left/right effect when another column becomes the active one.

I'm now doing this all using Javascript, no problems, but I feel like I could do this in a more optimised way. I'm using Bootstrap too, so I feel like this should help me with the issue.

Is there any way I can achieve this result (1 column with sliding animation on screens < 800px, 3 columns on bigger screens) with as little JS as possible?

I'd love to be able to use JS only for the animations and CSS for all the rest, but currently I'm using it to resize the columns on screen resize, doing the animations, almost all of the work.

UPDATE: I did my best to work my current situation out in a simple JSFiddle. My purpose is to have the columns appear as fullscreen on smaller screens, and automatically appear as a 3-column lay-out on screens wider than (f.e.) 800px.

This is the Javascript that slides through the columns when the screen's not wide enough:

//Go back, "slide" to the left
function slideBack() {
    var previous = currentView;
    currentView = views[views.indexOf(currentView) - 1];

    $("#" + previous).animate({
        width: 0
    }, 300, function () {
        $("#" + previous).hide();
    });
    $("#" + currentView).show(function () {
        $("#" + currentView).animate({
            width: $(window).width()
        }, 300);
    });
}

//Go forward, "slide" to the right
function slideForward() {
    var previous = currentView;
    currentView = views[views.indexOf(currentView) + 1];

    $("#" + previous).animate({
        width: 0
    }, 300, function () {
        $("#" + previous).hide();
    });
    $("#" + currentView).show(function () {
        $("#" + currentView).animate({
            width: $(window).width()
        }, 300);
    });
}

Upvotes: 0

Views: 399

Answers (1)

Mudassir Ali
Mudassir Ali

Reputation: 8041

Well you can use nth-child selector

<div class="slide col-xs-12"></div>
<div class="slide col-xs-12"></div>
<div class="slide col-xs-12"></div>

css for smaller devices

.slide {
  width: 0;
}

.slide:nth-child(1) {
  width: 100%;
}

In the above case the first slide will be of 100% width while the rest of them will have no width. You can also use display:none instead of zero width.

Hook up the touch events using javascript & add appropriate classes to toggle between slides.

Upvotes: 1

Related Questions