Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   неактивность курсора после hidden (https://javascript.ru/forum/dom-window/7282-neaktivnost-kursora-posle-hidden.html)

bars 24.01.2010 17:39

неактивность курсора после hidden
 
привет всем...
вот сайт
neborecords.ru
есть афиши, которые крутятся при нажатии на << < > >>
так вот... изначально видны 3 афиши, остальные скрыты....
если на вести на афишу, то можно на нее нажать... если мы нажмем на > >> то увидим что видвинулась афишка "токио" на данный момент.
так вот эта афиша уже не кликабельна стала.... хотя <a href></a> прописан так же как и на обычных афишах...

код

Gallery = {
    active: false,
	height : {
		max : 149,
		min : 123
	},
	width : {
		max : 106,
		min : 86
	},
	init : function() {
		var _self = this;
		$('.next').click(function() {
			_self.next();
		}).dblclick(function() {
			return false;
		});
		$('.next-all').click(function() {
			_self.skipAll('next');
		}).dblclick(function() {
			return false;
		});
		$('.prev').click(function() {
			_self.prev();
		}).dblclick(function() {
			return false;
		});
		$('.prev-all').click(function() {
			_self.skipAll('prev');
		}).dblclick(function() {
			return false;
		})
	},
	getCurrent : function() {
		return $('.afisha-gallery li.active');
	},
	next : function(fast) {
		if (Gallery.active) {
			setTimeout(function(){Gallery.active = false}, 300);
			return false;
		}
		Gallery.active = true;
		$('.afisha-gallery li');
		var curr = this.getCurrent();
		if (!$.browser.msie) {
			curr.animate( {
				'marginLeft' : ''
			});
	    }
		var prev = curr.prev('li');
		var next = curr.next('li');
		var nextNext = next.next('li');
		if (!next.length) {
			return;
		}
		
		if (fast) {
			next.addClass('active').find('img').css( {
				width : Gallery.width.max,
				height : Gallery.height.max,
				opacity : 1
			});
			prev.hide();
			curr.removeClass('active').find('img').height(Gallery.height.min)
					.width(Gallery.width.min);
			nextNext.show();
			if (!$.browser.msie) {
				nextNext.removeClass('hidden');
			}
			return
		}
		
		var nextWidth = next.width();
		
		/*
		
		nextNext.width(0).animate( {
			width : nextWidth,
			opacity: 1
		});*/
		
		/*
		nextNext.css({marginLeft: 30, width: 0})
		        .animate({margin: 0, width: nextWidth,  display: ''});*/
		var ml = nextNext.css('marginLeft');
		
		
		if ($.browser.msie) {
			curr.css({marginLeft: ''});
			nextNext.css({marginLeft: -70, display: '', zIndex: -20 /*, opacity: 0*/})
	        .removeClass('hidden')
	        .animate({marginLeft: '0', width: nextWidth, opacity: 1/*, display: 'block'*/, width: 118}, 400);
		} else {
			nextNext.css({marginLeft: -(nextWidth*0.85), display: '', zIndex: -20, width: 0, opacity: 0.1})
	        .removeClass('hidden')
	        .animate({marginLeft: '0', width: nextWidth, opacity: 1}, 400);
		}
		
		
		/**/
		next.addClass('active').find('img').animate( {
			width : Gallery.width.max,
			height : Gallery.height.max,
			opacity : 1
		}, 500, 'linear', function(){Gallery.active = false});
		/**/
		
		if ($.browser.msie) {
			prev.css({border: '2px solid #6E180B'});
			prev.animate( {
				width : 0,
				opacity : 0
			}, 400/*, 'linear', function() {
				$(this).hide().width('').css('opacity', '').addClass('hidden')
			}*/).fadeOut();
		} else {
			prev.animate( {
				width : 0,
				opacity : 0
			}, 400, 'linear', function() {
				$(this).hide().width('').css('opacity', '').addClass('hidden')
			});
		}		
		
		curr.removeClass('active').find('img').height(Gallery.height.min)
				.width(Gallery.width.min);
		setTimeout(function(){Gallery.active = false}, 400);
	},
	prev : function(fast) {
		if (Gallery.active) {
			setTimeout(function(){Gallery.active = false}, 300);
			return false;
		}
		Gallery.active = true;
		var curr = this.getCurrent();
		var prev = curr.prev('li');
		var next = curr.next('li');
		var prevPrev = prev.prev('li');
		if (!prev.length) {
			return
		}
		if (fast) {
			if (!prev.prev('li').length) {
				if (!$.browser.msie) {
				prev.css( {
					'marginLeft' : next.width()
				});
				}
			}
			var nextWidth = next.width();
			if (!nextWidth) {
				nextWidth = prev.width()
			}
			prev.addClass('active').find('img').css( {
				width : Gallery.width.max,
				height : Gallery.height.max,
				opacity : 1
			});
			next.hide();
			curr.removeClass('active').find('img').height(Gallery.height.min)
					.width(Gallery.width.min);
			prevPrev.css( {
				opacity : 1,
				width : nextWidth
			});
			return;
		}
		if (!prev.prev('li').length) {
			prev.animate( {
				'marginLeft' : next.width()
			});
		}
		var nextWidth = next.width();
		if (!nextWidth) {
			nextWidth = prev.width()
		}
		prev.addClass('active').find('img').animate( {
			width : Gallery.width.max,
			height : Gallery.height.max,
			opacity : 1
		}, 400, function() {
			$(this).parent().parent().addClass('active')
		});
		next.fadeOut(100, function() {
			$(this).hide()
		});
		curr.removeClass('active').find('img').height(Gallery.height.min)
				.width(Gallery.width.min);
		prevPrev.width(1).css( {
			opacity : .1
		}).animate( {
			opacity : 1,
			width : nextWidth
		}, 400, 'linear', function(){Gallery.active = false});
		setTimeout(function(){Gallery.active = false}, 400);
	},
	getItemsCount : function() {
		return parseInt($('.afisha-gallery ul li').length, 10)
	},
	skipAll : function(direction) {
		for ( var i = 0; i < this.getItemsCount() - 1; i++) {
			setTimeout(function() {
				$('.' + direction).trigger('click', {
					fast : true
				})
			}, i * 600)
		}
	}
};

B~Vladi 25.01.2010 14:30

Вы опубликовали очень много кода.

Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему.

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting

bars 05.02.2010 16:46

этот код писал не я...
просто зайдите на сайт, и посмотрите эффект

вот хтмл код крутилки
<ul class="clearfix"> 

<li> 
<div> 
<a href="afisha-min-5.php" onclick="setClass('rnr-entry');"> 
<img src="http://neborecords.ru/afisha/1258707779-3.jpg"  width="86px" height="123px" alt="" /></a> 
</div> 
<i></i> 
</li> 

<li class="active"> 
<div> 
<a href="afisha-min-10.php" onclick="setClass('dj-entry');"> 
<img src="http://neborecords.ru/afisha/1263717549-3.jpg" width="106px" height="149px" alt="" /> 
</a> 
</div> 
<i></i> 
</li> 

<li> 
<div> 
<a href="afisha-min-7.php" onclick="setClass('hiphop-entry');"> 
<img src="http://neborecords.ru/afisha/1260169776-3.jpg" width="86px" height="123px" alt="" /> 
</a> 
</div> 
<i></i> 
</li> 

<li class="hidden"> 
<div> 
<a href="afisha-min-11.php" onclick="setClass('rnr-entry');"> 
<img src="http://neborecords.ru/afisha/1264143885-3.jpg" width="86px" height="123px" alt="" /> 
</a> 
</div> 
<i></i> 
</li> 

</ul> 
<div class="buttons"> 
<a href="#" class="prev-all"></a> 
<a href="#" class="prev"></a> 
<a href="#" class="next-all"></a> 
<a href="#" class="next"></a> 
</div>

Коровкин Сергей 05.02.2010 21:48

Кода действительно много, поэтому не скажу в каком месте и что править. Зато могу сказать, что некликабельная картинка из-за стиля "z-index: -20" у элемента li, в котором находится ваш TOKIO. Убираем этот стиль и картинка кликабельна.

Коровкин Сергей 05.02.2010 21:50

Вероятно 90 и 94 строки :)

bars 06.02.2010 09:47

т.е. просто закоментить этот код?
------
знаешь как сделать что то подобное!? скажи ценник...
я просто сам в яваскрипте никак.... =)))

Gozar 06.02.2010 11:30

интересно неборекордс когда-нибудь доделают?! :)


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