Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите с отображением элементов (https://javascript.ru/forum/dom-window/69792-pomogite-s-otobrazheniem-ehlementov.html)

ser1ko 17.07.2017 19:23

Помогите с отображением элементов
 
я чайник. это первое что вам надо знать. не бомбите! итак, сам вопрос:

есть в HTML код, с помощью которого меняется вид отображения материалов (список, квадратный список с описанием, сетка) исходя из title можно догадаться какой код что означает.

Код:

<a href="javascript:" id="grid3-view" class="sl-sort3 active" title="Сетка"></a>
<a href="javascript:" id="list-view" class="sl-sort2" title="Cетка с описанием" ></a>
<a href="javascript:" id="grid-view" class="sl-sort1" title="Cписок"></a>

есть сам JS который меняет стили:
function setCookie(name, value, days) {
 if (days) {
 var date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 var expires = "; expires=" + date.toGMTString();
 }
 else var expires = "";
 document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
 }
 return null;
}
function eraseCookie(name) {
 setCookie(name, "", -1);
};
$('#list-view').click(function() { 
setCookie('list-view', 365); 
eraseCookie('grid-view');eraseCookie('grid3-view');
 $('#allEntries [id^="entryID"] .item').removeClass('grid-item'); 
 $('#allEntries [id^="entryID"] .item').removeClass('grid3-item') 
 $('#allEntries [id^="entryID"] .item').addClass('list-item'); 
 $('#list-view').addClass('active'); 
 $('#grid-view').removeClass('active'); 
 $('#grid3-view').removeClass('active'); 
}); 
$('#grid-view').click(function() { 
setCookie('grid-view', 365); 
eraseCookie('list-view');eraseCookie('grid3-view'); 
 $('#allEntries [id^="entryID"] .item').addClass('grid-item'); 
 $('#allEntries [id^="entryID"] .item').removeClass('grid3-item') 
 $('#allEntries [id^="entryID"] .item').removeClass('list-item'); 
 $('#list-view').removeClass('active'); 
 $('#grid-view').addClass('active'); 
 $('#grid3-view').removeClass('active'); 
}); 
$('#grid3-view').click(function() { 
setCookie('grid3-view', 365); 
eraseCookie('list-view');eraseCookie('grid-view');
 $('#allEntries [id^="entryID"] .item').removeClass('grid-item'); 
 $('#allEntries [id^="entryID"] .item').addClass('grid3-item') 
 $('#allEntries [id^="entryID"] .item').removeClass('list-item'); 
 $('#list-view').removeClass('active'); 
 $('#grid-view').removeClass('active'); 
 $('#grid3-view').addClass('active');
}); 

 

if(getCookie('list-view')) { 
 $('#allEntries [id^="entryID"] .item').removeClass('grid-item'); 
 $('#allEntries [id^="entryID"] .item').removeClass('grid3-item') 
 $('#allEntries [id^="entryID"] .item').addClass('list-item'); 
 $('#list-view').addClass('active'); 
 $('#grid-view').removeClass('active'); 
 $('#grid3-view').removeClass('active'); 
}; 
if(getCookie('grid-view')) { 
 $('#allEntries [id^="entryID"] .item').addClass('grid-item'); 
 $('#allEntries [id^="entryID"] .item').removeClass('grid3-item') 
 $('#allEntries [id^="entryID"] .item').removeClass('list-item'); 
 $('#list-view').removeClass('active'); 
 $('#grid-view').addClass('active'); 
 $('#grid3-view').removeClass('active'); 
}; 
if(getCookie('grid3-view')) { 
 $('#allEntries [id^="entryID"] .item').removeClass('grid-item'); 
 $('#allEntries [id^="entryID"] .item').addClass('grid3-item') 
 $('#allEntries [id^="entryID"] .item').removeClass('list-item'); 
 $('#list-view').removeClass('active'); 
 $('#grid-view').removeClass('active'); 
 $('#grid3-view').addClass('active'); 
};


суть проблемы вот в чем. по умолчанию я выставил в HTML стиль сеткой, однако страница загружается со стилями списком. т.е. индикатор "сетка" горит, но прогружается список. только после повторного нажатия на "сеткой" стили меняются на нужные. думаю проблема в js, но сам лезть боюсь (см 1 строку моего обращения).

Плиз, нид ёр хелп :cray:

ser1ko 17.07.2017 19:28

чтобы было еще нагляднее. после очистки кэша и перезагрузки страницы. индикатор горит на сетке, но отображается список


рони 17.07.2017 19:42

ser1ko,
строки 55-79
if(getCookie('list-view')) {
 $('#list-view').click()
};
if(getCookie('grid-view')) {
  $('#grid-view').click()
};
if(getCookie('grid3-view')) {
  $('#grid3-view').click()
};

ser1ko 17.07.2017 19:58

рони,
заменил строки с 55 по 79 данным кодом, не помогло :no:

рони 17.07.2017 20:07

ser1ko,
тогда так
if(getCookie('list-view')|| !getCookie('grid-view') && !getCookie('grid3-view')) {
 $('#list-view').click()
};
if(getCookie('grid-view')) {
  $('#grid-view').click()
};
if(getCookie('grid3-view')) {
  $('#grid3-view').click()
};



скрипт внизу страницы ? если нет оберните в
$(function() {
//тут ваш код
});


и то что вам нужно, должен сделать сервер


Часовой пояс GMT +3, время: 14:45.