Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.08.2012, 15:15
Аспирант
Отправить личное сообщение для Heidel Посмотреть профиль Найти все сообщения от Heidel
 
Регистрация: 11.06.2012
Сообщений: 71

Верстка меню под ie7 с использованием javascript
Верстаю меню такого вида

Код html
<div id="f-nav">
					<ol>
						<li class="selected">Оформление заказа</li>
						<li>Доставка</li>
						<li>Получатель</li>
						<li>Подтверждение заказа</li>
						<li>Оплата</li>
					</ol>
				</div>


стили для оформления меню
#f-nav {
background: url('/images/nav-background.png') no-repeat;
margin-left: 1px;
margin-top: -5px;
width: 968px;
height: 79px;
/*outline: 1px solid red;*/
}

#f-nav ol {
list-style-type: none;
counter-reset: count;
padding-left: 20px;
/*outline: 1px solid red;*/
}

#f-nav ol li{
font-style: italic;
font-size: 16px;
display: inline-block;
padding-left: 52px;
padding-right: 18px;
position: relative;
margin-top: 18px;
line-height: 2.7;
/*outline: 1px solid red;*/
}

#f-nav ol li{
color: #8a8378;
}

#f-nav ol li.selected{
color: #403422;
}

#f-nav ol li:before{
content: counter(count); 
counter-increment: count 1;
font: bold 29px Georgia, 'Times New Roman', Times serif;
position: absolute;
left: 0;
background: url('/images/nav.png') no-repeat;
color: #fffcee;
width: 46px;
height: 47px;
padding-top: 1px;
text-align: center;
/*outline: 1px solid red;*/
}

#f-nav ol li.selected:before{
background: url('/images/nav-selected.png') no-repeat;
width: 45px;
/*outline: 1px solid red;*/
}

так как в ie-7 псевдоэлемент :before не отрабатывает, для ие7 (ну и потенциально для ие6) пишется костылик на js
function fixMe(node) {
    var list = node.childNodes, i = list.length;
    	while(i--) {
    		if(list[i].nodeType == 1) {
    				list[i].insertAdjacentHTML('afterBegin', '<div>'+(i+1)+'</div>');
    		}
    	}
				return 0;
};

+ к странице подключаются стили для ие такого вида
#f-nav ol div {
//...
}

скрипт отрабатывает, но!
1. ие7 при открытие этой страницы из-за скрипта каждый раз зависает. что можно сделать?
2. в списке присутствует один элемент с классом <li class="selected">, как в этот код добавить условие проверки, чтобы к этому пункту меню скрипт добавлял не просто div, а аналогично <div class="selected">
?

Последний раз редактировалось Heidel, 26.08.2012 в 15:23.
Ответить с цитированием
  #2 (permalink)  
Старый 26.08.2012, 15:27
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<!-- // все ниже ИЕ8--><![if lt IE 8]><script>
 if('\v'=='v' ){alert("ИЕ7 и ниже")}
</script><![endif]>
Ответить с цитированием
  #3 (permalink)  
Старый 26.08.2012, 15:33
Аспирант
Отправить личное сообщение для Heidel Посмотреть профиль Найти все сообщения от Heidel
 
Регистрация: 11.06.2012
Сообщений: 71

Это слишком радикальный метод)
Кроме того, ie7 в требованиях к кроссбраузерности по-преждему еще много где фигурирует.
Подскажите чего-нибудь по существу лучше))
Ответить с цитированием
  #4 (permalink)  
Старый 26.08.2012, 15:36
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Heidel,
Ну запускаете перед вашим скриптом - можно вместо alert, - назначить переменную IE
- Далее в скрипте проверяете её на undefined

Карочь моё дело предложить , можно и через агент - если не лень парсить кроссбраузерно
Ответить с цитированием
  #5 (permalink)  
Старый 26.08.2012, 15:38
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

В Ие есть костыли для css с помощью expression:
Ответить с цитированием
  #6 (permalink)  
Старый 26.08.2012, 15:41
Аспирант
Отправить личное сообщение для Heidel Посмотреть профиль Найти все сообщения от Heidel
 
Регистрация: 11.06.2012
Сообщений: 71

у меня в стилях для ие и подключается
#f-nav ol {
z-index: expression(fixMe(this));
//
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меню с использованием Jquery, "защита от дурака" :) vyrtime jQuery 2 05.08.2011 12:50
Картинки-ссылки в меню не работают в IE7 Александр345 Internet Explorer 6 16.06.2011 18:33
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
Скрипт меню работает только под IE7 и выше TAILER Internet Explorer 1 31.08.2009 13:21