Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Проблема скрипта карусели в firefox. Очень прошу помощи. (https://javascript.ru/forum/jquery/10031-problema-skripta-karuseli-v-firefox-ochen-proshu-pomoshhi.html)

-user21- 16.06.2010 13:02

Проблема скрипта карусели в firefox. Очень прошу помощи.
 
Добрый день.

Есть скрипт карусели основанный на JQuery и СSS

Выложил тут: http://store-cd.spb.ru/
В IE и Opera все ок
Лиса же вымотала всю душу.
Не работает mouseout
Когда мышь уходит за пределы рабочего div поле должно уменьшать свою ширину с 1500px до 457px. Таким образом происходит возврат карусели в начало. В лисе это не фурычит.
Сам лапоть, подскажите где копать?

<script src="jquery.min.js" type="text/javascript"></script>
<style type="text/css">

div.sc_menu {
	/* Set it so we could calculate the offsetLeft */
	position: relative;
	height: 132px;
	width: 457px;
	overflow: auto;
}
ul.sc_menu {
	display: block;
	height: 110px;
	/* max width here, for users without javascript */	
	width: 1500px;	
	padding: 15px 0 0 15px; 
	/* removing default styling */
	margin: 0;
	background: url('navigation.png');		
	list-style: none;
}
.sc_menu li {
	display: block;
	float: left;	
	padding: 0 4px;
}
.sc_menu a {
	display: block;
	text-decoration: none;
}
.sc_menu span {
	display: none;
	margin-top: 3px;
	
	text-align: center;
	font-size: 12px;	
	color: #fff;
}
.sc_menu a:hover span {
	display: none;
}
.sc_menu img {
	border: 1px #fff solid;	
    height: 105px;
    margin-top: 5px;
}
.sc_menu a:hover img {
	filter:alpha(opacity=50);	
	opacity: 0.5;
}
</style>


<script type= "text/javascript">/*<![CDATA[*/
$(function(){
	//Get our elements for faster access and set overlay width
	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
                area = $('div.area'),
		ulPadding = 15;
	
	//Get menu width
	var divWidth = div.width();

	//Remove scrollbars	
	div.css({overflow: 'hidden'});
	
	//Find last image container
	var lastLi = ul.find('li:last-child');
	
	//When user move mouse over menu
	div.mousemove(function(e){
		ul.css({width: '1500'});
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		div.scrollLeft(left);
	});
area.mouseover(function(){
    ul.css({width: '1500'});
 });

area.mouseout(function(){
    ul.css({width: '457'});
 });

});
/*]]>*/</script>
</head>


<body>
<div class='area'>
<div class="sc_menu">
	<ul class="sc_menu">

	    <li</li>
	    <li></li>
	    <li></li>
	    <li></		
            </ul>
</div>
</div>

Kolyaj 16.06.2010 13:05

Единицы измерения у CSS-свойств не забывайте указывать.

-user21- 16.06.2010 13:18

Поаравил CSS
 
Вы правы. Перенял дурную привычку.
Но проблемы это не решает :(

Kolyaj 16.06.2010 13:27

scrollLeft нужно в ноль вернуть.

-user21- 16.06.2010 13:32

Спасибо за совет
 
Благодарю, буду разбираться.
Я так понимаю эту функцию нужно заложить в mouseout.
Если будет минутка напишите как. А то я пока в синтаксисе путаюсь.

-user21- 16.06.2010 13:38

Разобрался!!! спасибо за оперативную подсказку!


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