Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Выполнение скрипта на разных разрешениях с помощью IF else

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
NSX
Отправлено: 30 Сентября, 2016 - 19:46:58
Post Id


Новичок


Покинул форум
Сообщений всего: 11
Дата рег-ции: Сент. 2016  


Помог: 0 раз(а)
Никак не получается с помощью If else, else if сделать выполнение скрипта для разных разрешений для телефона, планшета и ПС..

<script type="text/javascript">
if (window.innerWidth > 768 ) {

jQuery(function($) {
$(".news").addClass("float").filter(":nth-child(4n)").after('<div class="clr"></div>');
});
}


</script>


сколько не пробовал дальше первого IF код не проходит ((


upd: скрипт выполняет разбивку ленты новостей на несколько колонок.

(Отредактировано автором: 03 Октября, 2016 - 09:17:06)

 
 Top
IllusionMH
Отправлено: 30 Сентября, 2016 - 20:41:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
NSX, в этом коде всё выполниться только 1 раз по событию DOMContentLoaded.
if должне быть внутри функции.
Да и тут как бы 1 ИФ, куда дальше?

Если нужно чтобы менялось что-то при изменении размеров окна, тогда еще и запускать этот код по событию resize.

(Отредактировано автором: 30 Сентября, 2016 - 20:41:45)

 
 Top
NSX
Отправлено: 30 Сентября, 2016 - 20:43:30
Post Id


Новичок


Покинул форум
Сообщений всего: 11
Дата рег-ции: Сент. 2016  


Помог: 0 раз(а)
IllusionMH пишет:
NSX, в этом коде всё выполниться только 1 раз по событию DOMContentLoaded.
if должне быть внутри функции.
Да и тут как бы 1 ИФ, куда дальше?

Если нужно чтобы менялось что-то при изменении размеров окна, тогда еще и запускать этот код по событию resize.


нужно чтобы при обновлении страницы (включении страницы на разных утройствах), не при принудительном расширении сужении браузер без перезагрузки.
 
 Top
IllusionMH
Отправлено: 30 Сентября, 2016 - 20:49:26
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
NSX ну тогда показывайте где э эти неведомые элс-ифы? и засуньте их все внутрь одной функции которая передается jQuery(/*сюда*/)
 
 Top
NSX
Отправлено: 02 Октября, 2016 - 17:14:08
Post Id


Новичок


Покинул форум
Сообщений всего: 11
Дата рег-ции: Сент. 2016  


Помог: 0 раз(а)
CODE (htmlphp):
скопировать код в буфер обмена
  1. <script type="text/javascript">
  2.      
  3.        
  4. jQuery(function($) {
  5.     if (window.innerWidth < 700  ) {
  6.                 $(".news").addClass("float").filter(":nth-child(1n)").after('<div class="clr"></div>');
  7.     }
  8.          else if ( (window.innerWidth > 701) && (window.innerWidth < 900) ) {
  9.                 $(".news").addClass("float").filter(":nth-child(2n)").after('<div class="clr"></div>');
  10.     }
  11.     else if ( (window.innerWidth > 901) && (window.innerWidth < 1300) ) {
  12.                 $(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');
  13.     }
  14.     else if ( (window.innerWidth > 1301) && (window.innerWidth < 1700) ) {
  15.                 $(".news").addClass("float").filter(":nth-child(4n)").after('<div class="clr"></div>');
  16.     }
  17.     else ( window.innerWidth > 1701 ) {
  18.                 $(".news").addClass("float").filter(":nth-child(5n)").after('<div class="clr"></div>');
  19.     }
  20. });
  21.  }
  22.        
  23.  
  24.        
  25. </script>


Наверное я не понимаю функции... что то у меня не получается =((( помогите разобраться

(Отредактировано автором: 02 Октября, 2016 - 17:29:13)

 
 Top
IllusionMH
Отправлено: 02 Октября, 2016 - 21:44:57
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
NSX, засуньте в любой нормальный редактор кода он покажет кучу ошибок. лишняя } в конце. У else нет условия, так что else ( window.innerWidth > 1701 ) это синтаксическая ошибка.

И вообще, открывайте инструменты разработчика (F12 или Ctrl+Shift+I в браузере), там указывается на эти ошибки.
 
 Top
cartier
Отправлено: 03 Октября, 2016 - 02:09:12
Post Id


Новичок


Покинул форум
Сообщений всего: 4
Дата рег-ции: Окт. 2016  
Откуда: Киев


Помог: 0 раз(а)
А может попробовать<style> @media (max-width: 600px) { .clr { настройки стиля } } </style>
И так далее... заодно страница не будет перегружена javascript и сработка будет 100% вплоть до полного перестроения шаблона в зависимости от разрешения экрана и его расположения (портрет, ландшафт). Да и подогнать можно под любое разрешение и систему типа android или iOS.


https://developer[dot]mozilla[dot]org/en[dot][dot][dot]ng_media_queries (как пример).
 
 Top
NSX
Отправлено: 03 Октября, 2016 - 06:56:20
Post Id


Новичок


Покинул форум
Сообщений всего: 11
Дата рег-ции: Сент. 2016  


Помог: 0 раз(а)
IllusionMH пишет:
NSX, засуньте в любой нормальный редактор кода он покажет кучу ошибок. лишняя } в конце. У else нет условия, так что else ( window.innerWidth > 1701 ) это синтаксическая ошибка.

И вообще, открывайте инструменты разработчика (F12 или Ctrl+Shift+I в браузере), там указывается на эти ошибки.


Спасибо, скобку видел а вот Else сглупил, изза этого и не работало, спасибО!
(Добавление)
cartier пишет:
А может попробовать<style> @media (max-width: 600px) { .clr { настройки стиля } } </style>
И так далее... заодно страница не будет перегружена javascript и сработка будет 100% вплоть до полного перестроения шаблона в зависимости от разрешения экрана и его расположения (портрет, ландшафт). Да и подогнать можно под любое разрешение и систему типа android или iOS.


https://developer[dot]mozilla[dot]org/en[dot][dot][dot]ng_media_queries (как пример).


я пробовал, но что то не вышло... не совсем понял как :nth-child(1n) употребить... я тока начал разбираться... нехватает времени =(
(Добавление)
CODE (htmlphp):
скопировать код в буфер обмена
  1. <script type="text/javascript">
  2.  
  3. jQuery(function($) {
  4.    if (window.innerWidth < 700  ) {
  5.                $(".news").addClass("float4").filter(":nth-child(1n)").after('<div class="clr"></div>');
  6.    }
  7.         else if ( (window.innerWidth > 701) && (window.innerWidth < 900) ) {
  8.                $(".news").addClass("float3").filter(":nth-child(2n)").after('<div class="clr"></div>');
  9.    }
  10.    else if ( (window.innerWidth > 901) && (window.innerWidth < 1300) ) {
  11.                $(".news").addClass("float2").filter(":nth-child(3n)").after('<div class="clr"></div>');
  12.    }
  13.    else if ( (window.innerWidth > 1301) && (window.innerWidth < 1700) ) {
  14.                $(".news").addClass("float").filter(":nth-child(4n)").after('<div class="clr"></div>');
  15.    }
  16.    else {
  17.                $(".news").addClass("float").filter(":nth-child(5n)").after('<div class="clr"></div>');
  18.    }
  19. });
  20.  
  21. </script>


вот правильный код, нужно только правильно разрешения подобрать и проценты для колонок.
 
 Top
IllusionMH
Отправлено: 03 Октября, 2016 - 16:31:45
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
NSX, посмотрите http://wesbos[dot]com/nth-child
 
 Top
NSX
Отправлено: 04 Октября, 2016 - 06:01:15
Post Id


Новичок


Покинул форум
Сообщений всего: 11
Дата рег-ции: Сент. 2016  


Помог: 0 раз(а)
IllusionMH пишет:
NSX, посмотрите http://wesbos.com/nth-child


Там описано свойство этого кода, я много смотрел уроков как пользоваться этим кодом но все они сводятся к раскрашиванию чего либо..

Как сделать три колонки из новостной ленты с помощью этого непонятно, а может вообще как то по другому нужно делать..без него.
 
 Top
NSX
Отправлено: 06 Октября, 2016 - 07:41:31
Post Id


Новичок


Покинул форум
Сообщений всего: 11
Дата рег-ции: Сент. 2016  


Помог: 0 раз(а)
Собственно вот что вышло.. все работает...

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. @media only screen and (max-width:479px) {
  3.  
  4. .news {width: 100%; float: left;}  
  5.    
  6. }
  7. @media only screen and (min-width:480px) and (max-width:700px) {
  8.  
  9. .news {width: 50%; float: left;}
  10.    
  11. }
  12.  
  13. @media only screen and (min-width:701px) and (max-width:1367px) {
  14. .news {width: 33%; float: left;}
  15.    
  16. }
  17.  
  18. @media only screen and (min-width:1368px) {
  19. .news {width: 25%; float: left;}
  20.  
  21. }
  22.  
  23.  
  24.  
  25.  
  26. .tl, .tr, .bl, .br {
  27.     background-image: url("../images/news-corner.gif");
  28.     height:  ;
  29.     font-size: 2px;
  30.     }
  31. .tl, .bl {
  32.     margin-right: 10px;
  33.     }
  34. .tr, .br {
  35.     margin-left: 10px;
  36.     margin-top: -10px;
  37.     margin-right: 10px;
  38.     }
  39. .tr {
  40.     background-position: 100% 0;
  41.     }
  42. .bl {
  43.     background-position: 0 -10px;
  44.     }
  45. .br {
  46.     background-position: 100% -10px;
  47.     margin-bottom: 10px;
  48.     }
  49. .inside {
  50.      
  51.     background: #fff;
  52.    
  53.    
  54.     }
  55. .inside h1 {
  56.     font: bold 16px tahoma;    
  57.     text-decoration: none
  58. }
  59. .inside h1 a{
  60.     font: bold 16px tahoma;    
  61.     margin: 0px;
  62.     padding: 0px;
  63.     text-decoration: none;
  64. }
  65.  
  66. .inside h1 a:hover {
  67.     text-decoration: underline;
  68. }
  69.  
  70.  
  71.  


CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <div class="news">
  3. <div class="tl"></div><div class="tr"></div>
  4. <div class="inside">
  5.  
  6. ТУТ СОДЕРЖИМОЕ файла коротких новостей или вашей ленты новостей..
  7. </div>
  8. <div class="bl"></div><div class="br"></div>
  9. </div>
  10.  
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB