Задать вопрос

cazumbra

Ответы пользователя по тегу WordPress

  • Почему пропадает параллакс у картинки при использовании свойства transform?

    @cazumbra Автор вопроса
    Короче, может есть еще шизики кроме меня, но я нашел в чем проблема. Что в Гугл Хром, что в Файрфокс наблюдается баг, при котором если задать элементу transform через css, то будут проблемы с позиционированием его на странице. В огнелисе элемент растянется, но пропадет параллакс эффект (заданный свойством background-attachment: fixed; ), а в хроме картинка сместится в сторону на половину страницы. Победить эту ситуацию можно если обернуть растянутый блок в див. Чтобы этого в ручную не делать, можно вставить вот такую конструкцию в functions.php

    function zm_wrap_alignment( $block_content, $block ) {
	if ( isset( $block['attrs']['align'] ) && in_array( $block['attrs']['align'], array( 'wide', 'full' ) ) ) {
		$block_content = sprintf(
			'<div class="%1$s">%2$s</div>',
			'align-wrap align-wrap-' . esc_attr( $block['attrs']['align'] ),
			$block_content
		);
	}
	return $block_content;
}
add_filter( 'render_block', 'zm_wrap_alignment', 10, 2 );


    Тогда все блоки в Гутенберге, которые поддерживают свойства alignwide и alignfull встанут внутри дива align-wrap. Дальше мы задаем css свойства 

    .align-wrap {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.align-wrap .alignfull {
	width: 1280px;
	max-width: 100%;
	margin: 0 auto;
}


    При этом, если ширина блока .align-wrap .alignfull неизвестна, то можно также как я использовать скрипт подгона ширины одного элемента под другой (в моем вопросе выше это есть)

    function resize() {
    $('.alignfull').width($('.overlay').width() - 1)
}
resize();
$( window ).resize(function() {
    resize()
});


    Теперь и параллакс и нормальное выравнивание будет работать и в Гугле и в Мозилле. Такая штука подойдет тем, у кого контент сайта находится внутри бокса, то есть ограничен рамками, которые отступают от границ viewbox.
    Ответ написан
    Комментировать
    Комментировать

  • Почему не закрывается окно при клике вне элемента?

    @cazumbra Автор вопроса
    Сделал вот так

    $(document).on('click', function(event) { 
if (!$(event.target).closest('#mc_embed_signup').length) {    
  $('.subscribe').slideToggle('hide');
  }
  $body.removeClass('subscribe-fullscreen');
    event.preventDefault();
    event.stopPropagation();
});

$('.subscribe-open').on ('click', function(event) { 
   $body.addClass('subscribe-fullscreen');
  $('.subscribe').slideToggle('show');
  event.preventDefault();
  event.stopPropagation();
});


    вроде ок, только теперь окно открывается по нажатию на любое место на сайте...
    Ответ написан
    Комментировать
    Комментировать