Слежение за обьектами Wordpress и изменение свойств CSS средствами JS
Сейчас имею:
1)Движок WordPress 2)Установлена не стандартная тема Annina(не стандартная тк переработанная) в неё адаптивный дизайн и есть проблемма вида этой самой адаптивной сетки... а именно когда новостей в категории две, а экран например 1366px, то смотрятся эти темы мягко говоря неочень... Решено было: растягивать эту адаптивную сетку средствами JS, чтоб эти две темы занимали весь экран... Получилось примерно следующее решение:
<script type="text/javascript">
window.onresize = benres;
window.onload = benres;
function benres() {
var catcol=<?php echo get_category(get_category(is_category())->count)->category_count; ?>;
var heightmin= document.documentElement.clientWidth;
//alert ("в этой категории "+ catcol +" новости, ширана страницы "+ heightmin);
if (catcol == '2') {
document.querySelector('style').innerHTML += '@media (max-width: 1366px) {.anninamas, .grid-sizer {width: 50% !important;}}';
document.querySelector('style').innerHTML += '@media (max-width: 1920px) {.anninamas, .grid-sizer {width: 50% !important;}}';
} else if (catcol == '3'){
document.querySelector('style').innerHTML += '@media (max-width: 1920px) {.anninamas, .grid-sizer {width: 33.33333% !important;}}';};
}
</script>
Воможно не самое изящьное решение, но что пришло в голову... Сейчас этот код работает коректно, тоесть выполняет свое предназначение, но если экран браузер начинаешь растягивать или уменьшать то: 1) плодятся стили и соответственно ничего не меняется, а только уменьшаются пропорции новостей тк стоит правило !important 2) сколько не вкарячивал проверку ширины чтоб если она меньше 900px то эти правила не использовались а использовались стили поумолчанию... так ничего толкового не вышло... в JS новичек но изучаю потихоньку... может кто посоветует иное решение=) |
Цитата:
Цитата:
@media (max-width: 1366px) and (min-width: 900px) {
.anninamas, .grid-sizer {width: 50% !important;}
}
|
Цитата:
|
Цитата:
document.querySelector('style').innerHTML += '@media (max-width: 1366px) {.anninamas, .grid-sizer {width: 50% !important;}}';
document.querySelector('style').innerHTML += '@media (max-width: 1920px) {.anninamas, .grid-sizer {width: 50% !important;}}';
на
document.querySelector('style').innerHTML += '@media (max-width: 1366px) and (max-width: 1920px) {.anninamas, .grid-sizer {width: 50% !important;}}';
но такое правило не подействовало на разрешение 1920px а только до разрешения 1366px срабатывает... получается оно не отрабатывает "and" или это как условие "else"?! и так голова болела а теперь совсем ппц:cray: |
doi7ing,
@media (max-width: 1366px) and (min-width: 900px)Читается так: если размер "экрана" у пользователя больше 900px и меньше 1366px, то применить следующие правила. https://webref.ru/css/value/media Непонятно зачем писать скрипт, если css можно разместить на нужных страницах единожды и без js. |
doi7ing,
Цитата:
|
Цитата:
Сразу :( не увидел "min-width" а прочитал как "max-width" извиняюсь :thanks: за рабочий день глаза замылялись и плохо к концу дня вижу(размыто все) а код нужен для того, чтоб если категории будут плодится и гдето будут подобные нюансы, чтоб не копаться больше и не добавлять ручками на страницу стили... просто сайт не мой и сколько я с ним проживу неизвестно а если в будующем передам комуто то и у человека вопросов не будет :) |
Цитата:
|
| Часовой пояс GMT +3, время: 21:38. |