0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24

Как отключить js в адаптивной верстке на определенной ширине?

27.08.2013, 12:45. Показов 18871. Ответов 29
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброе утро! У меня сайт с адаптивной версткой. Когда ширина 320px, блоки сворачиваются (collaps из bootstrap). На 940px они тоже сворачиваются. Помогите пожалуйста как отключить этот js на ширине 940px и выше. Я очень не очень в javascript(((( Или укажите хотя бы ссылку на материал кому не сложно, буду очень благодарен.

Добавлено через 3 часа 18 минут
Неужели никто не знает? Может так делать вообще нельзя?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
27.08.2013, 12:45
Ответы с готовыми решениями:

Отключить слайдер при определенной ширине экрана
Добрый день, форумчане! Нужна помощь. Есть слайдер, который должен "отключаться" при ширине экрана меньше 320px. Есть такой код: ...

Одинаковая высота 2-х каруселей при адаптивной верстке
Всем привет! Ребята подскажите, пожалуйста, как сделать одинаковую высоту двух каруселей на одной странице при адаптивной вёрстке? Это...

Как управлять расположением блоков при адаптивной верстке ?
Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой блок и поместить вперед, остальные два под...

29
 Аватар для JsLoveR
425 / 167 / 48
Регистрация: 05.12.2012
Сообщений: 855
28.08.2013, 15:28
Сделать проверку если ширина меньше 940px подключать js-файл с кодом, иначе - не подключать.
0
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
28.08.2013, 21:46  [ТС]
Это в скрипте прописывается? Я просто нуль в программировании((

Добавлено через 2 минуты
https://www.cyberforum.ru/java... ost4996396 Вот этот код. Я уже все что возможно загуглил, ничего не нашел
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
28.08.2013, 21:48
Сделать проверку если ширина меньше 940px подключать js-файл с кодом, иначе - не подключать.
только сдаётся мне тут имеется ввиду responsive вариант, то есть, когда он без обновления страницы будет туда-сюда ее сжимать и расширять должны выполняться соответствующие изменения. Если это так то нужно использовать метод resize()
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
28.08.2013, 22:10  [ТС]
А конкретный пример нельзя написать? Или хотя бы где про это прочитать можно.
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
28.08.2013, 23:07
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
window.onload = windowload;
    window.onresize = AppendScript;
 
    function windowload() {
        AppendScript();
    }
 
 
    function AppendScript() {
 
        if (window.innerWidth >= 940) {
            Include('site/js/stick.js', 'on')
            Include('site/js/stick-mobile.js', 'off')
        }
        else {
            Include('site/js/stick.js', 'off')
            Include('site/js/stick-mobile.js', 'on')
        }
    }
 
    function Include(filename, status) {
        var head = document.getElementsByTagName('head')[0];
        if (status == 'on') {
            script = document.createElement('script');
            script.src = filename;
            script.type = 'text/javascript';
            head.appendChild(script)
        }
        else if (status == 'off') {
            var scripts = head.getElementsByTagName('script');
            if (scripts.length > 0) {
                head.removeChild(scripts[1]);
            }
        }
    }
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 11:13  [ТС]
Спасибо огромное. Попробую применить, потом отпишу))

Добавлено через 10 часов 44 минуты
vovandr, А в какую часть документа все это подключать? Я уже пытался затолкать в голову, в отдельный файл, в файл с js (который нужно остановить), но ничего не выходит. Может нужен еще скрипт для его запуска?
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
29.08.2013, 11:15
вам нужно положить его в head и обрамить мой код тегами script
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 11:28  [ТС]
vovandr, блин вообще ноль реакции. Как были свернуты на 320 и на 940, так и остались. А может к страничке < 940px как то можно по особому подключать js, через @media-queries? Вот версия под мобильники:


Вот версия под компьютер:


А вот как должно быть:
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
29.08.2013, 11:46
Ну праввильно в моем коде вам надо исправить названия и пути файлов самих скриптов...вместо site/js/stick.js и site/js/stick-mobile.js поставить названия скриптов которые нужно подключить. По хорошему все это можно сделать с помощью медиа запросов, просто вам надо разобраться как они работают.

Добавлено через 11 минут
К этим блокам можно добавить класс, например visible. И в медиа запросе при ширине равной или больше 940 прописать что-то типа:
CSS
1
2
3
4
5
6
7
 @media screen and (min-width: 940px){
.visible{
 display: block!important;
 visibility: visible!important;
 height: auto!important;
}
}
Написал так на всякий случай потому как не знаю как у вас колапсятся блоки
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 11:49  [ТС]
Т.е. мне нужно перенести скрипт, который нужен для мобильной версии в отдельный файл, обозвать его как нибудь и прописать вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    function AppendScript() {
 
        if (window.innerWidth >= 940) {
            Include('js/bootstap.js', 'on')
            Include('js/bootstrap.min.js', 'off')
        }
        else {
            Include(''js/bootstap.js', 'off')
            Include('js/bootstrap.min.js', 'on')
        }
    }
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
29.08.2013, 11:55
В прошом сообщении отправил вам css попробуйте так сначала
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 12:19  [ТС]
vovandr, про css я в курсе. Видите, у меня когда нажимаешь на блок, происходит развертывание. Этого не должно быть на мониторной версии, такая задача. И поэтому этого скрипта, по идее, вообще не должно быть на ширине > 940px. А как это сделать я не знаю, html разметка всего одна, и на обычную и на моюильную версию. Вот поэтому ищу условие невыполнение скрипта.
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
29.08.2013, 12:25
в архиве скиньте сюда всё
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 12:37  [ТС]
vovandr, а как сюда файлы выкладывать?
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
29.08.2013, 12:40
https://www.cyberforum.ru/faq.... ttachments
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 12:40  [ТС]
vovandr, вот держите
Вложения
Тип файла: rar bootstrap.rar (241.9 Кб, 13 просмотров)
0
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 12:42  [ТС]
vovandr, bootstrap.js и bootstrap.min.js одно и то же, просто сжатое.
0
 Аватар для vovandr
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
29.08.2013, 13:21
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
     $(document).ready(function(){
        $(window).on('resize', function() {
 
            if($(window).width()>940) {
 
                $('.accordion-body').addClass('in');
 
            }
            if($(window).width()<940){
 
                $('.accordion-body').removeClass('in');
 
            }
 
        });
        $(window).resize();
     });
 
</script>
Добавлено через 6 минут
еще внес небольшую поправочку, вот этот код вставляйте:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
        $(window).on('resize', function() {
 
            if($(window).width()>940) {
 
                $('.accordion-body').addClass('in').css('height','auto');
 
            }
            if($(window).width()<940){
 
                $('.accordion-body').removeClass('in').removeAttr('style');
 
            }
 
        });
        $(window).resize();
     });
1
0 / 0 / 0
Регистрация: 27.08.2013
Сообщений: 24
29.08.2013, 13:26  [ТС]
Спасибо огромное! А чтобы при нажатии вообще скрипт не работал, так нельзя сделать? Имеется в ввиду на ширине 940px и выше?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.08.2013, 13:26
Помогаю со студенческими работами здесь

При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться?
При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться. Перепробовал уже все viewport не помогает ...

Изображения в адаптивной верстке
Друзья как прописать размеры изображений для монитора 1024px http://539687.fdcorp.web.hosting-test.net/index.php/produkciya.html ...

Валидность в адаптивной верстке
Имеются встроенные в основной css файл media queries: @media screen and (min-width:200px) and (max-width:1024px) @media screen and...

Aside при адаптивной верстке
Здравствуйте. При сужении экрана надо чтобы один блок из сайдбара переместился над блоком контента, а другой ушел под него. Как это...

Выпадающее меню в адаптивной верстке
Доброго времени суток! Смотрел данное видео https://www.youtube.com/watch?v=uAcnIvKhfQQ (верстка адаптивного сайта с нуля). Делал все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

Новые блоги и статьи
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий
anaschu 08.04.2026
https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя
Maks 08.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка.
Hrethgir 08.04.2026
Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов.
anaschu 08.04.2026
работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru