JQuery For Setting A Dynamic max-width
67,029
Solution 1
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" );
}
});
Solution 2
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>
Comments
-
Teffi almost 2 years
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; }