Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.51/47: Рейтинг темы: голосов - 47, средняя оценка - 4.51
1 / 1 / 0
Регистрация: 29.05.2015
Сообщений: 103

Загрузка разных js в зависимости от разрешения экрана

25.12.2015, 20:53. Показов 9051. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день, не могу реализовать подключение различных js в зависимости от разрешения экрана - поэтому и обращаюсь за помощью.
Пробовал такие варианты:
1. С использованием JS почему то работал только "/templates/beez_20/script.js", пробовал различные варианты условий тип " if(window.screen.width > 980)"

JavaScript
1
2
3
4
5
<script type="text/javascript"> if (window.matchMedia('screen and (min-width: 980px)')){ 
    document.write('<script src="/templates/beez_20/script.js" type="text/javascript"></scr'+'ipt>'); }
     else {
          document.write('<script src="/templates/beez_20/scriptmob.js" type="text/javascript"></scr'+'ipt>'); }
      </script>
1.1. Еще такой
JavaScript
1
2
3
4
5
6
7
8
9
var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
  scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
  scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
JavaScript
1
2
3
4
5
<script type="text/javascript"> if (window.matchMedia('screen and (min-width: 980px)')){ 
    document.write('<script src="/templates/beez_20/script.js" type="text/javascript"></scr'+'ipt>'); }
     else {
          document.write('<script src="/templates/beez_20/scriptmob.js" type="text/javascript"></scr'+'ipt>'); }
      </script>
2. С использованием media queries, при этом получалась совсем кракозябра, scriptmob.js почему-то дублировался (см. аттач)
PHP/HTML
1
2
 <script media="screen and (min-width:981px)" src="/templates/beez_20/script.js"  type="text/javascript"></script>
<script media="screen and (max-width:980px)" src="/templates/beez_20/scriptmob.js"  type="text/javascript"></script>
3. Пробовал объединить два JS и внутри задать условие if(window.screen.width > 980) - не помогло
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
25.12.2015, 20:53
Ответы с готовыми решениями:

Загрузка изображений из разных папок в зависимости от разрешения экрана
Доброго времени суток! Большая просьба: может, кто сталкивался... Есть необходимость динамической загрузки изображений с одинаковыми...

Действие в зависимости от разрешения экрана
Уже весь интернет просмотрел по этому вопросу, не подскажите почему второй скрипт не работает в отличии от первого? В первом скрипте...

Переадресация в зависимости от разрешения экрана
Есть код, который проверяет разрешение экрана пользователя и в зависисмости от него посылает (или не посылает) на мобильную версию. ...

6
1 / 1 / 0
Регистрация: 29.05.2015
Сообщений: 103
25.12.2015, 20:59  [ТС]
Эффект media queries
Миниатюры
Загрузка разных js в зависимости от разрешения экрана  
0
Все элементарное - сложно
133 / 118 / 50
Регистрация: 14.04.2014
Сообщений: 509
25.12.2015, 23:58
А собственно зачем вам это извращение?
0
1 / 1 / 0
Регистрация: 29.05.2015
Сообщений: 103
26.12.2015, 00:06  [ТС]
mixenik, хотел таки прикрутить это (http://cssmenumaker.com/menu/f... nsive-menu) меню к мобильной версии сайта, но при этом для обычной версии оставить то, что было сделано раньше. В принципе да, можно переписать всё и будет ок, но раз сталкнулся с подобной задачей... )
0
Все элементарное - сложно
133 / 118 / 50
Регистрация: 14.04.2014
Сообщений: 509
26.12.2015, 00:13
Все равно не понимаю зачем его подгружать? =) Висит, он, никого не трогает. А Вот уже в document.onready проверять размер экрана и вызывать скрипт, не?

Добавлено через 1 минуту
Можно даже подправить код прямо в этом исходнике. Там же все равно изолированный скоуп
0
1 / 1 / 0
Регистрация: 29.05.2015
Сообщений: 103
26.12.2015, 01:23  [ТС]
mixenik, в общем, скрипт меняет css менюхи и добавляет menubutton и гамбургер в мобильной версии. ТК css основной другой, то в целом это выглядит криво. Я правил сам скрипт исходника, чтобы заставить корректно работать пару эффектов, но заставить работать в обоих случаях не получилось, я добавлял условие по разрешению для
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });
и для
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
 multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };
 
        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');
 
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
 
        resizeFix = function() {
          if ($( window ).width() > 768) {
            cssmenu.find('ul').show();
          }
 
          if ($(window).width() <= 768) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
Но в любом случае - работало что то одно
0
Все элементарное - сложно
133 / 118 / 50
Регистрация: 14.04.2014
Сообщений: 509
27.12.2015, 01:32
Хм, если косяки со стилями, то не проще контейнеру, в котором лежит меню назначать стиль в зависимости от разрешения, и у же все остальные стили делать от родителя?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
27.12.2015, 01:32
Помогаю со студенческими работами здесь

Блок съезжает (в зависимости от разрешения экрана)
Добрый день, при разном разрешении экрана блок с авторизацией то съезжает вниз, то наоборот не достаёт до конца первого фона. ...

изменение css в зависимости от разрешения экрана
Есть CSS, где планируется изменить ширину DIV (class=.ipbox, id=container) в зависимости от разрешения экрана. Устанавливаю в JS: ...

Масштабирование блоков в зависимости от разрешения экрана
Всем привет! Я даже не знаю в каком конкретно разделе создавать эту тему: Делаю сайт для нашей сети hl, где будут отображаться 30...

Масштабирование картинки в зависимости от разрешения экрана
Программа будет запускаться на разных компьютерах с разными разрешениями, в инициализации стоит подстройка под размер экрана: ...

Ширина таблицы в зависимости от разрешения экрана
есть страница авторизации. В ней формируется таблица, собственно, вот таким html кодом &lt;br/&gt;&lt;br/&gt;&lt;br/&gt; &lt;table...


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

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Контроль заполнения и очистка дат в зависимости от значения перечислений
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