Форум

lowercase · #1 (**permalink**) 27.08.2011, 19:57

доброго времени суток, столкнулся с проблемой при установки позиции фона в браузерах ie7-8
короче говоря есть сделать так

var hb = $(this).children(".item_content").css("height"); // hb уже будет какбы string, потому что после числа высоты будут ед. измерения ("px");
$(b).css({backgroundPosition: "0px " + hb}); // но выше сказанное мешает браузерам ие7-8 налажать в самый ответственный момент...

то данный код в ие7-8 не будет работать, но если тыцнуть вот так:

$(b).css({backgroundPosition: "0px 50px"}); // какбы без всяких переменных и выражений

то все будет вэри гуд, даже в ие7-8
вот полный листинг кода

$(document).ready(function() {
  $("#nav1 li").hover(function() {
		var block = $(this).children(".popup_block");
		var hb = $(this).children(".item_content").css("height");
		var b = $(block).children(".border_t").children(".border_r").children(".border_l");
		$(b).css({backgroundPosition: "0px " + hb}); // тут какбэ ie7-8 лажает
		$(block).stop(true,true).animate({opacity: "show"}, 100).show(); 
	  }, function(){
		$(this).children(".popup_block").stop(true,true).animate({opacity: "hide"}, 100);
	});
});

Octane · #2 (**permalink**) 27.08.2011, 20:04

Попробуйте backgroundPositionX, backgroundPositionY

lowercase · #3 (**permalink**) 27.08.2011, 20:11

такой варинат вообще нерабоает.. чего я только не перепробовал.. уже пол дня над этой строчкой ломаю голову((( и печаль в том что не хочет работать с переменной а с константой все без проблем.. я бы даже и не делал этого елси бы высота каждого елемента списка была одинаковой.. но увы они разные мне надо смещать какбы чуток фона вниз чтобы был эффект одного целого между елементом списка и всплывающего блока.. как тут вот только у меня вертикально и высота елементов разная

lowercase · #4 (**permalink**) 27.08.2011, 20:19

вообщето работает $(b).css("background-position-y", hb) но так же с багом в ие... вобщем у меня не проблема с заданием именно позиции фона, а проблема задания позиции фона именно через перменную

Octane · #5 (**permalink**) 27.08.2011, 20:25

а px к hb добавить не забыли?

lowercase · #6 (**permalink**) 27.08.2011, 20:36

дело в том что px в hb уже есть когда я определяю его: var hb = $(this).children(".item_content").css("height"); специально выводил в заголовок браузера hb чтобы проверить это

melky · #7 (**permalink**) 27.08.2011, 20:47

$(b).css({backgroundPosition: "0px " + hb});

b - это блочный элемент ?
background прописан через background-image ?

lowercase · #8 (**permalink**) 27.08.2011, 20:58

да b это блок div, вот весь стиль блока

background: url(../img/left.png) 0 0 no-repeat; display: block; padding-left: 3px;

lowercase · #9 (**permalink**) 27.08.2011, 21:00

вся моя заморочка это выражение, или точне значение которое должно определить положение бг
"0px " + hb... при том что если будет значение "0px 74px", то все будет ок, а елси будет "0px " + hb, где hb равно строке "74px" - ниче не работает

(не работает только в ие7-8, в 9ом работает)
где

hb = $(this).children(".item_content").css("height");

Octane · #10 (**permalink**) 27.08.2011, 21:25

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
html, body {
	height: 100%;
}
body {
	background: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) no-repeat;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$("body").mousemove(function (event) {
	$(this).css({
		"background-position": event.pageX + "px " + event.pageY + "px",
		"background-position-x": event.pageX + "px",
		"background-position-y": event.pageY + "px"
	});
});
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript