Перемістити блок у мобільній версії на JQuery / ~#root -i Перемістити блок у мобільній версії на JQuery / ~#root -i Перемістити блок у мобільній версії на JQuery / ~#root -i Перемістити блок у мобільній версії на JQuery / ~#root -i Перемістити блок у мобільній версії на JQuery / ~#root -i Перемістити блок у мобільній версії на JQuery / ~#root -i Перемістити блок у мобільній версії на JQuery / ~#root -i Перемістити блок у мобільній версії на JQuery / ~#root -i
  • RU
  • UA
  • EN
  • Створити інтернет-магазин
  • Документація
  • Блог
    • Unix-подібні ОС
    • Php
    • MySQL
    • JavaScript
    • Менеджери пакетів
    • Docker
    • Seo
  • Короткі посилання
  • Вхід
  • Реєстрація
  • Головна
  • JavaScript
  • Перемістити блок у мобільній версії на JQuery

Перемістити блок у мобільній версії на JQuery

Буває ситуація, коли на сайті є блок, який на десктопній версії розташований в одній черговості, але в мобільній версії його черговість потрібно порушити. Не завжди є можливість переверстати під flex і задати це стилями. Розберемо варіант на js разом із jquery.

Допустимо є список:

<ul>
<li>text</li>
<li id="cut" style="color:red">Это нужно перенести в под обозначенные тег в мобильной версии</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li id="insert" style="color:green">Переместить под этот тег</li>
<li>text</li>
</ul>

Список до перемещения в мобильной версии

Код , який переміщує потрібний блок залежно від розміру екрана у пристрою:

$(window).on('load resize', function(){
if ($(window).width() < 768) {
$('#cut').insertAfter('#insert');
}
});

load resize - при завантаженні або зміні розміру екрана

width() < 768 - розмір екрану, при якому це спрацьовує

insertAfter() - тег id="cut" вставляємо після id="insert"

Дані код спрацює лише на мобільній версії сайту. На версії для робочого столу користувач цього не побачить.

02 Лютого 20
909
0

Відгуки

wlad2.ru

11 Січня 2022 11:27
Чтобы убрать ошибку Uncaught TypeError: $ is not a function
правильный код вот

$(window).on('load resize', function(){
if ($(window).width() < 768) {
$('#cut_col-sm-12').insertAfter('#insert_cut_col-sm-12');
}
});
0
Ім'я
Електронна пошта
Рейтинг
Відгук

Інші статті з категорії

01 Квітня 2021

У input тільки числа на js

Простий скрипт на JS, фільтрація введення інформації в input. Введення лише чисел.

29 Січня 2019

Gulp Error watch path ENOSPC у gaze.js або grunt.js

Розглянемо можливість вирішення проблеми під час запуску Gulp в Ubuntu 18.04 з помилкою Error: watch /path/ ENOSPC. Розберемо, що таке настройки max_user_watches.

21 Травня 2018

Підсвічування коду на сайті засобами Js та Css

Описуючи мінімальні коди, у яких синтаксис схожий на С++, можливо знадобиться його мінімальне підсвічування на сайті для кращого читання. Я приведу найпростіший спосіб підсвічування, який взяв з habrahabr. Розглянемо, підключимо, опишемо...

Категорії

  • Unix-подібні ОС
  • Php
  • MySQL
  • JavaScript
  • Менеджери пакетів
  • Docker
  • Seo

Останні коментарі

alex, я вижу 2 причины почему так может быть. Не в...
root-i
04.07.22
Сделал все так как написано в статье, не работает.
alex
04.07.22
Как вариант это может происходить из-за неизвестно...
root-i
21.01.22
Чтобы убрать ошибку Uncaught TypeError: $ is not a...
wlad2.ru
11.01.22

Ділюсь інформацією у якій я вимагав допомоги та розбираючись витрачав багато часу. Якщо інформація допомогла хоча б одній людині, то цей сайт створений не дарма.

Подяка на продовження роботи сайту:
Контакти

Telegram Viber Mail

Пошук по сайту

  • Вхід
  • Реєстрація

Сайт працює на chmod -R