JQuery For Setting A Dynamic max-width

Question

I'm not particularly good with jQuery, so a complete code solution would be ideal.

The function will:

Get the 70% width of the browser's screen.
Convert that width into its corresponding px value
Set the max width of the #mainContainer using the value got from the conversion/calculation.

Here is the CSS style for the container I want to set max-width with:

#mainContainer {
    background-image: url(bg3.jpg);
    background-repeat: repeat;
    background-color: #999;
    width: 70%;
    padding: 0;
    min-width: 940px;       /* 940px absolute value of 70%. */
    margin: 0 auto;
    min-height: 100%;
    /* Serves as a divider from content to the main container */
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

Esailija · Accepted Answer · 2011-11-18T14:23:39.380

34

You should be able to copy paste this inside a <script> tag anywhere in the page where you have jQuery and it should work..

$( document ).ready( function(){
    setMaxWidth();
    $( window ).bind( "resize", setMaxWidth ); //Remove this if it's not needed. It will react when window changes size.

    function setMaxWidth() {
    $( "#mainContainer" ).css( "maxWidth", ( $( window ).width() * 0.7 | 0 ) + "px" );
    }

});

edited Nov 18 '11 at 14:23

answered Nov 18 '11 at 14:00

Esailija

138,174
23
272
326

do i just have to code this into a js document then link it to the html. nothing more is needed? – Teffi Nov 18 '11 at 14:13
@Saver, Let me make a copy paste solution then. – Esailija Nov 18 '11 at 14:21
3

shouldn't it be "max-width" instead of "maxWidth" ? – dsdsdsdsd Mar 28 '14 at 21:25
@dsdsdsdsd Nope. jQuery accepts both; The DOM names are supported. (CSS names need cumbersome quotes in JSON.) – MickLH Dec 19 '14 at 18:21

score 4 · Answer 2 · edited Jun 27 '15 at 09:53

Or define a function for the window.onresize event

window.onresize = function() {
  var newWidth = ($(window).width() * .7);
  $("#mainContainer").css({
    "maxWidth": newWidth
  });
}

#mainContainer {
  background-color: #999;
  width: 70%;
  padding: 0;
  min-width: 30px;
  /* 940px absolute value of 70%. */
  margin: 0 auto;
  min-height: 100%;
  /* Serves as a divider from content to the main container */
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainContainer">-</div>

JQuery For Setting A Dynamic max-width

2 Answers2

Linked