Can't use 100% width container

[srsgores]

I've tested a good amount now, and all the examples provided, including the so-called responsive one by Codrops all use a fixed width for each slide. Regardless of whether we set the container width to 100%, the width of each slide is derived from the contents of that container (so even if I have elements inside with a width of 100%, that does nothing).

The closest example I could find to what I'm looking to do is the jimpress page itself, but still the containers have a min-width of 600px.

I want to be able to set a width of 100% so that I don't have to rely on media queries. At this point, it seems the best way to deal with this is to use a min-width and a min-height. But for page layouts, this requires tedious media query work. Perhaps I'm just a lazy web developer, but I would like to see this.

Thanks.

[shama]

Do you have a link to view it? Try adjusting the viewport config: https://shama.github.com/jmpress.js/docs

[srsgores]

Try in your console $('article#content').jmpress({stepSelector: 'section'}); at http://srsgores.jit.su

[shama]

Oh I see what you're trying to do. It can't be responsive (at least I don't know how) by using 100% widths as you would with a grid system. jmpress needs dimensions to operate. Your best bet is to set a viewport width $(selector).jmpress({viewport:{width:1000;}}); and then set min-widths of your container and steps close to the viewport width to achieve the effect.

[srsgores]

Hi Shama,

Thanks for your response. I've been able to get my grid layout to work! Using jQuery's resize event, I was able to set the widths of the rows to the window's width. Here's my code:

function setRowWidth($) {
    var docWidth = $(window).width() + "px";
    //set row widths to adapt to screen size
    var rows = $("#content .row");
    console.log("Setting row widths to " + docWidth);
    rows.css("width", docWidth);
}

function resizeSlides() {
    $(window).resize(function() {
        setRowWidth($);
        var settings = $('article#content').jmpress('settings');
        //not sure if this is needed, but might be for mobile devices...
        settings.viewPortWidth = $(window).width();
        console.log("Viewport width set to " + settings.viewPortWidth);
    });
}

function fixStyles() {
    var footer = $("footer");
    var footerProperties = {
        "position": "absolute",
        "bottom": "0"
    };
    footer.css(footerProperties);
    resizeSlides();
}

jQuery(document).ready(function($) {
    setRowWidth($); //if javascript is enabled, we need to do this at least once so that jmpress will initialize correctly
    $('article#content').jmpress({
        stepSelector: 'section.step'
    }, fixStyles());
});

Using this trick, media queries still work, and rows will properly adjust to any screen size. Also, the callback on the jmpress call will make sure that the styles aren't adjusted if something doesn't go right with jmpress. And media queries will still work on those browsers too!

[sokra]

settings.viewPortWidth doesn't exist. It's named settings.viewPort.width. But I think this is not needed.

---

$('article#content').jmpress({
   stepSelector: 'section.step'
}, fixStyles());

jmpress has no second parameter and fixStyles isn't passed as callback. Try this:

$('article#content').jmpress({
   stepSelector: 'section.step',
   beforeInit: fixStyles
});