JQuery для установки динамической максимальной ширины - PullRequest
Новая
       6

JQuery для установки динамической максимальной ширины

8 голосов
/ 18 ноября 2011

Я не особенно хорош в jQuery, поэтому идеальным решением будет полное кодовое решение.

Функция будет:

  1. Получить ширину экрана браузера 70%.
  2. Преобразуйте эту ширину в соответствующее значение px
  3. Установите максимальную ширину #mainContainer, используя значение, полученное из преобразования / вычисления.

Здесьстиль CSS для контейнера, который я хочу установить max-width с помощью: 

#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;
}

Ответы [ 2 ]

28 голосов
/ 18 ноября 2011

Вы должны быть в состоянии скопировать вставить это внутри тега <script> в любом месте страницы, где у вас есть jQuery, и это должно работать .. 

$( 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" );
    }

});
2 голосов
/ 26 июня 2015

Или определить функцию для события window.onresize 

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>
...