Skip to content

Instantly share code, notes, and snippets.

@akshuvo
Created January 20, 2020 12:34
Show Gist options
  • Save akshuvo/df6f448ad385e84be3d1fd285b980292 to your computer and use it in GitHub Desktop.
Save akshuvo/df6f448ad385e84be3d1fd285b980292 to your computer and use it in GitHub Desktop.
Full Width Container using Jquery
// FullWidth Container JS
function fullwidthInit(selector){
function fullWidth(selector){
$(selector).each(function(){
$(this).width("100%").css({ marginLeft : "-0px" });
var window_width = $(window).width();
var left_margin = "-"+$(this).offset().left+"px";
$(this).width(window_width).css({ marginLeft : left_margin });
console.log("Width:",window_width,"Margin Left:",left_margin);
});
}
$(window).on("resize load", function(){
fullWidth(selector);
});
}
// Usage DOM: <div data-fullwidth="true">...</div> in JS: fullwidthInit("[data-fullwidth=true]");
fullwidthInit("[data-fullwidth=true]");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment