Не работает простой код jQuery в IE 8.
Привет!
На своем сайте я использую относительную единицу измерения CSS — vw. Как заставить ее понимать старые браузеры, я нашел способ, но только не IE 8. Для него у меня подключена jQuery v1.12.4, так как в версии v2 отказались от поддержки IE 8. Сразу говорю, jQuery не изучал совсем, так как я поддерживаю всего один свой сайт. Имею такой код:
$(document).ready(function() {
var css_sh = $("body").innerWidth() * 0.16; /* Это 16 процентов */
css_sh = Math.round(css_sh);
$('#sh').css({height: css_sh + 'px'});
});
В IE 8, элементу #sh присваивается такое свойство: <div id="sh" style="height: 5496px;"> В других браузерах все норм. Различные полифилы и другие костыли работают плохо, а некоторые вообще не работают. Посмотреть проблемную страницу можно здесь. Для мобильных устройств шапка еще не доделана, не пугайтесь. А на главную страницу не заходите — там мой старый дизайн. :) Кстати, если мне поможет кто-то из вас с этой проблемкой по сайту, тому полагается скидка на наши услуги. А тому, кто "не немножко", по глобальнее поможет и другие косяки устранить — крупная скидка. (Это будет моя благодарность за помощь.) |
Попробуйте так:
var css_sh = $(window).width() * 0.16; /* Это 16 процентов */ Upd. раньше как-то все без vw/vh справлялись с версткой, может у вас самой верстке проблема, раз она требует использования новых единиц измерения? |
0.15 процентов в рунете статистика за январь ie8 и ниже
|
и чем дольше мы стараемся поддерживать это старье, тем дольше люди на этом старье не будут обновляться.
|
Nexus,
Заработало! Спасибо Вам огромное! Теперь можете пользоваться скидкой, когда захотите) Ну а в моей верстке, да, проблема. Я ведь не профессионал, создал только этот сайт. А можно еще спросить, как упростить этот код?
$(document).ready(function() {
$(window).scroll (function () {
if ($(this).scrollTop () > 50) {
$('body').addClass('bg-size');
} else {
$('body').removeClass('bg-size');
}
});
$('#vk_logo, #yt_logo').hover(function() {
$(this).next().show(0);
$(this).next().animate({opacity: '1'}, 400);
},
function() {
$(this).next().animate({opacity: '0'}, 400);
$(this).next().hide(400);
});
});
.bg-size {background-size:120% auto;transition:all 2s ease-out;}
Это сделано для того, чтобы, когда делаешь первый скролл страницы, фон увеличивается плавно. |
j0hnik,
На моем сайте статистика 0.5% только одного IE 8. |
Цитата:
$('#vk_logo, #yt_logo').hover(function() {
$(this).next().show(0);
$(this).next().animate({opacity: '1'}, 400);
},
function() {
$(this).next().animate({opacity: '0'}, 400);
$(this).next().hide(400);
})
;и сделать это с помощью CSS |
Цитата:
Цитата:
$(document).ready(function() {
$(window).scroll(function() {
var bool = $(this).scrollTop() > 50,
$body = $('body'),
c = 'bg-size';
if (bool && !$body.hasClass(c)) {
$body.addClass(c);
} else if (!bool && $body.hasClass(c)) {
$body.removeClass(c);
}
});
$('#vk_logo, #yt_logo').hover(function() {
$(this).next().fadeIn(400);
},
function() {
$(this).next().fadeOut(400);
});
});
PS. с j0hnik полностью согласен. Пол процента - не то кол-во, ради которого стоит костыли лепить. |
Цитата:
https://jsfiddle.net/bohg54gc/ |
Nexus,
Благодаря совету j0hnik, я сделал это сейчас на CSS, с плавным появлением. Не знаю, почему это я не додумался. Вместо display:block; использовал visibility:hidden; А для плавности transition:all 0.4s ease-out; |
j0hnik, теперь Вам тоже скидка полагается, тоже помогли!
|
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
opacity:0;
transition: 0.4s;
}
#vk_logo:hover + span{
opacity:1;
}
</style>
</head>
<body>
<div id="vk_logo">111</div>
<span>444</span>
</body>
</html>
|
j0hnik,
Ой, я тут еще не разобрался, поэтому продублировал. |
Евгений76,
Спасибо, пока вроде не чихаю (не кашляю) |
| Часовой пояс GMT +3, время: 02:11. |