Форум

breeze125 · #1 (**permalink**) 04.09.2017, 15:27

Ребят очень нужна ваша помощь. Мне нужно чтобы на разрешениях больше 768 мои блоки fc и fd оборочивались в соответствующие обертки. В чем сложность, мне нужно это делать при resize окна, сейчас на таком скрипте при сужении или расширении экрана, оберток добавляется нескончаемое число )

$(window).on('resize', function(){
if($(window).width() <= 768) {
$('.advantages-item').unwrap();
} else{
$('.fd').wrapAll('<div class="advantages-wrap-left">');
$('.fc').wrapAll('<div class="advantages-wrap-right">');
}
}).trigger('resize');

<section class="advantages">

<div class="wrapper">

<div class="advantages-container">

<div class="advantages-item fd">
<span class="icon icon-faucet"></span>
<h5 class="h5">Business Philosophy</h5>
<p class="advantages-item__text">lorem</p>
</div>

<div class="advantages-item fd">
<span class="icon icon-faucet"></span>
<h5 class="h5">Innovation</h5>
<p class="advantages-item__text"></p>
<p class=" advantages-item--black__text"</p>
</div>

<div class="advantages-item fd">
<div class="advantages-item__img-wrap">
<img src="img/about-1.jpg" alt="alt">
</div>
</div>

<div class="advantages-item fc">
<span class="icon icon-faucet"></span>
<h5 class="h5">Accessories</h5>
<p class="advantages-item--blue__text"></p>
<p class="advantages-item--blue__text"></p>
</div>

<div class="advantages-item fc">
<div class="vogt-numbers-item--about">
<div class="vogt-numbers item__number">8374</div>
<p class="vogt-numbers-item__text"></p>
</div>
<div class="vogt-numbers-item vogt-numbers-item--about">
<div class="vogt-numbers-item__number">82K</div>
<p class="vogt-numbers-item__text"></p>
</div>
<div class="vogt-numbers-item vogt-numbers-item--about">
<div class="vogt-numbers-item__number">6</div>
<p class="vogt-numbers-item__text"></p>
</div>

</div>

</div>

</div>

</section>

j0hnik · #2 (**permalink**) 04.09.2017, 15:43

window.matchMedia('(max-width: 768px)').addListener(function(e){
		if(e.matches) {
			$('.advantages-item').unwrap();
		}
		else{
			$('.fd').wrap('<div class="advantages-wrap-left"></div>');
			$('.fc').wrap('<div class="advantages-wrap-right"></div>');
		}
	})

breeze125 · #3 (**permalink**) 04.09.2017, 15:47

Спасибо за помощь, к сожалению с таким скриптом элементы fc и fd не берутся в обертки.

j0hnik · #4 (**permalink**) 04.09.2017, 15:54

<html>
<head>
	<style>
		.advantages-wrap-left, .advantages-wrap-right{
border: 1px solid red;
		}
	</style>
</head>
<body>
	
<section class="advantages">

	<div class="wrapper">

		<div class="advantages-container">

			<div class="advantages-item fd">
				<span class="icon icon-faucet"></span>
				<h5 class="h5">Business Philosophy</h5>
				<p class="advantages-item__text">lorem</p>
			</div>

			<div class="advantages-item fd">
				<span class="icon icon-faucet"></span>
				<h5 class="h5">Innovation</h5>
				<p class="advantages-item__text"></p>
				<p class=" advantages-item--black__text"</p>
				</div>

				<div class="advantages-item fd">
					<div class="advantages-item__img-wrap">
						<img src="img/about-1.jpg" alt="alt">
					</div>
				</div>

				<div class="advantages-item fc">
					<span class="icon icon-faucet"></span>
					<h5 class="h5">Accessories</h5>
					<p class="advantages-item--blue__text"></p>
					<p class="advantages-item--blue__text"></p>
				</div>

				<div class="advantages-item fc">
					<div class="vogt-numbers-item--about">
						<div class="vogt-numbers item__number">8374</div>
						<p class="vogt-numbers-item__text"></p>
					</div>
					<div class="vogt-numbers-item vogt-numbers-item--about">
						<div class="vogt-numbers-item__number">82K</div>
						<p class="vogt-numbers-item__text"></p>
					</div>
					<div class="vogt-numbers-item vogt-numbers-item--about">
						<div class="vogt-numbers-item__number">6</div>
						<p class="vogt-numbers-item__text"></p>
					</div>

				</div>

			</div>

		</div>

	</section>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		window.matchMedia('(max-width: 768px)').addListener(function(e){
			if(e.matches) {
				$('.advantages-item').unwrap();
			}
			else{
				$('.fd').wrap('<div class="advantages-wrap-left"></div>');
				$('.fc').wrap('<div class="advantages-wrap-right"></div>');
			}
		})

	</script>
	</body>
</html>

а у меня работает, чудеса да?

j0hnik · #5 (**permalink**) 04.09.2017, 16:07

https://codepen.io/anon/pen/Mvxzwm
вот, подергайте экран, ато тут не видно.

breeze125 · #6 (**permalink**) 04.09.2017, 16:14

Вы извините я наверно неправильно объяснил проблему свою. Я там выше первый пост поправил. И мне нужно, чтобы к примеру для трех блоков fc создавалась одна обертка, а не 3 для каждой. Я попробовал метод wrapAll(), но теперь при resize окна оберток создается бесконечность.

j0hnik · #7 (**permalink**) 04.09.2017, 16:18

function resize(){
	if($(window).width() <= 768) {
		$('.advantages-item').unwrap();
	} else{
		$('.fd').wrapAll('<div class="advantages-wrap-left"></div>');
		$('.fc').wrapAll('<div class="advantages-wrap-right"></div>');
	}
}
window.matchMedia('(max-width: 768px)').addListener(function(e){
	if(e.matches) resize();
	else resize();
})
resize();

Тогда так

breeze125 · #8 (**permalink**) 04.09.2017, 16:25

Почти то, что нужно. Но почему-то удаляется секция .advantages-container, её нужно на месте оставлять.

j0hnik · #9 (**permalink**) 04.09.2017, 16:34

function resize(){
	if($(window).width() <= 768) {
		$('.advantages-wrap-left, .advantages-wrap-right').contents().unwrap();
	} else{
		$('.fd').wrapAll('<div class="advantages-wrap-left"></div>');
		$('.fc').wrapAll('<div class="advantages-wrap-right"></div>');
	}
}
window.matchMedia('(max-width: 768px)').addListener(function(e){
	if(e.matches) resize();
	else resize();
})
resize();

breeze125 · #10 (**permalink**) 04.09.2017, 16:39

спасибо большое, все заработало )

Форум

Справочник

Discord чат

Курсы javascript