0

Здравствуйте! Есть скрипт,

~function () {
  function update() {
    var body_width=$('body').width(), $uf=$('#pp-uf_range');

    $uf.css({
      width:body_width,
      'margin-left':-$uf.offset().left
    });
  }

  $(window).resize(update);
  update();
}();
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  background-color: burlywood;
  text-align: justify;
  margin: 0 auto;
  width: 200px;
  padding: 0 100px 0 0;
}
#pp-uf_range {
  background-color: chocolate;
  height: 100%;
  min-height: 100vh;
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
<div id="pp-uf_range">Этот блок нужно растянуть по ширине экрана, за пределы его родителя</div>
много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста много текста
</div>

при добавлении которого, перестают работать другие скрипты на странице. Подскажите, пожалуйста, как можно разрешить этот конфликт? И еще один вопрос: как заставить работать этот скрипт при ресайзе окна? Просто заключить его в $(window).resize(function() { скрипт }); не помогает. Спасибо!

1 ответ 1

1

при добавлении которого, перестают работать другие скрипты на странице

Заключить его в самовызывающуюся функцию:

~function () {
    var body_width=$('body').width(),
        $uf=$('#pp-uf_range');

    $uf.css({
        width:body_width,
        'margin-left':-$uf.offset().left
    });
}();

как можно разрешить этот конфликт?

Нет никакого конфликта, просто у тебя скрипт валится на $uf.offset().left, о чём он явно пишет в консоли.

как заставить работать этот скрипт при ресайзе окна?

~function () {
  function update() {
    var body_width=$('body').width(), $uf=$('#pp-uf_range');

    $uf.length && $uf.css({
      width:body_width,
      'margin-left':-$uf.offset().left
    });
  }

  $(window).resize(update);
  $(update);
  update();
}();
3

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.