Перемістити блок у мобільній версії на 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
  • Допоміжні сервіси
    • Короткі посилання
    • Oбмін переглядами YouTube
  • Вхід
  • Реєстрація
  • Головна
  • 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
1114
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');
}
});
2
Ім'я
Електронна пошта
Рейтинг
Відгук

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

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

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

Добрый день, Сергей. Я на более новых версиях блют...
root-i
23.02.23
Пробовал на transmart колонке. Ничего из перечисле...
Сергей
20.02.23
HenryMit, может быть
root-i
07.02.23
Неофрейдизм — это… Определение, принципы, представ...
HenryMit
07.02.23

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

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

Telegram Viber Mail

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

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

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