article:
Elements Design: 5 Subtle grunge Photoshop brushes
article:
Website: Roundfolio - A Free Portfolio Template

JS Plugin: jquery responsive web

Advertisement

"This is a simple jquery plugin helping design more responsive and adaptive websites and web applications with almost no setup."


Plugin: jquery responsive web



How to use

add

$(document).ready(function(){
    $(window).responsiveWeb();
});


add with options
if you want options it has some options, and you can set them like this, and also below you can see the default values for the options:
$(document).ready(function(){
    $(window).responsiveWeb({
        applyBodyClasses: true,
        applyResolution: true,
        applyPlatform: true,
        applyBrowser: true,
        applyBrowserVersion: true,
        manipulateDesign: true,
        rearrangeObjects: true,
        debug: false
    });
});


Functions

manipulateDesign()
is called when the script inits. it is good for init time manipulations you want to do on your objects.

$(document).ready(function(){
    $(window).responsiveWeb();
});
 
function manipulateDesign() {
    $("img.withcaption").each(function(){
        var caption = $(this).attr('title');
        $(this).wrap('<div class="imgwithcaption"></div>');
        $(this).after('<span class="thecaption"></span>');
        $(this).next('span.thecaption').text('"' + caption + '"');
    });
}

rearrangeObjects()
is called on every page resize. it is good for moving your objects around depending on the resolution and orientation of the page. actually orientation on mobiles is only a simple resolution change. so the responsiveWeb also handles that.

$(document).ready(function(){
    $(window).responsiveWeb();
});
 
function rearrangeObjects() {
    if (jQuery('body').hasClass('w1024') || jQuery('body').hasClass('w1280') || jQuery('body').hasClass('w1440')) {
        $('#MainMenu').appendTo('#Column1');
        $('#ServiceMenu').prependTo('#Header');
        $('#Column1').prependTo('#ContentWrapper');
        $('#Columns, #Navigation').hide();
    }
    else {
        $('#MainMenu').appendTo('#Navigation');
        $('#ServiceMenu').appendTo('#Navigation');
        $('#Column1').prependTo('#Columns');
        $('#Columns, #Navigation').show();
    }
}




source
download

Advertisement
Tags: responsive, layout, design, develop, mobile, desktop, internet

Leave a Comment

No Comment

© Creative3x Ltd.