Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   помогите с JQuery popup (https://javascript.ru/forum/jquery/29342-pomogite-s-jquery-popup.html)

Art!P 24.06.2012 20:25

помогите с JQuery popup
 
http://сайт/
собрал код на главной странице, это анимация с домом.
работает но есть проблемы.
После клика (биосептик) попап разоворачивается, при этом unbind события мыши (это мешает разворачиваться для попап).
После зыкрытия попапа, ставлю бинд, а бинда нет (биосептик не реагирует). И завис
разворот попапа
$(".biosepticover").click(function(){
		$(this).unbind();
		$(this).hide();
		$("#popup").animate({top:0, left:0, width:"575px", height:"528px"});
		$("#popup").css({backgroundColor: "#fff", color: "#444",zIndex: 0}); 
		$("#popclose").show();	
		//$(this).bind();
		});


закрытие попапа:
$("#popclose").click(function(){
		$("#popup").hide();
		$(this).hide();
		$("#popup").css({zIndex: 0});
		$("#popup").css({width: 190, height: 90,backgroundColor: "rgba(0,0,0,0.6)", color: "#fff"});
		$.fastshow();
		$("#home > div").bind();
		});

в таком доме:
<div id="home">

	<div id="biosepticjs">
		<div class="biosepticover"></div>
		<div class="biosepticlight"></div>
	</div>
	
	<div id="waterpolejs">
		<div class="waterpoleover"></div>
		<div class="waterpolelight"></div>
	</div>
	
	<div id="popup">
		<div id="popclose"></div>
		<h1></h1>
		<div id="popinfo">кликните чтобы получить информацию</div>
	</div>
</div>


"Помогите!", "Не работает скрипт!", "Я нуб, нужен совет", "яву не знал и не учил", "jQuery знаю мало (что успел почитать за 2 дня)"

Спасибо люди добрые

Deff 24.06.2012 20:30

Art!P,
Ссылку на файл стиля дайте или выложите css код

Art!P 24.06.2012 20:33

Держите:
kgeohome.css

Deff 24.06.2012 20:47

Art!P,
Пишите алгоритм по пунктам
1. Кликаем на 'biosepticover' - что должно делаться ?
2. .....
3. ....
И.т.д

Исключения:
1.
2.

Art!P 24.06.2012 20:47

простите, лучше приведу весь код:
jQuery(document).ready(function ($){
	
	$.allshow = function(){
		$("#home").show();
		$("#biosepticjs").show();
		$("#biosepticjs").bind();
		$("#waterpolejs").show();
		$(".biosepticlight").fadeIn(500);
		$(".waterpolelight").fadeIn(500);
		return;
		};
	$.fastshow = function(){
		$("#home").show();
		$("#biosepticjs").show();
		$("#biosepticjs").bind();
		$("#waterpolejs").show();
		$("#biosepticjs .biosepticlight").show();
		$("#waterpolejs .waterpolelight").show();
		return;
		};
	$.allhide = function(){
		$(".biosepticlight").fadeOut(100);
		$(".waterpolelight").fadeOut(100);
		return;
		};	
	$.thehide = function(){
		$("#home > div").hide();
		$("#biosepticjs").show();
		$("#waterpolejs").show();
		$("#biosepticjs").bind();
		return;
		};	
		
	$("#home").hide();
	$.thehide();
	$("#home").fadeIn("slow");
	// init
	
	$("#home").mouseenter($.allshow).mouseleave($.allhide);
	
	$("#biosepticjs").mouseenter(function(){
		$(".biosepticlight").hide();
		$("#waterpolejs").hide();
		$("#popup > h1").text("Биосептик");
		$(".biosepticover").fadeIn(200);
		$("#popup").fadeIn(200);
		});
	
	$(".biosepticover").mouseout(function(){$("#popup").fadeOut(100);
		$.fastshow();
		$(".biosepticover").hide();
		$(".biosepticlight").fadeIn(100);});

	$(".biosepticover").mousemove(function(e){
		var parentOffset = $(this).parent().offset(); 
		var relX = e.pageX - parentOffset.left+15;
		var relY = e.pageY - parentOffset.top+15;
		$("#popup").css({"top" : relY, "left": relX});
		});
	
	$(".biosepticover").click(function(){
		$(this).unbind();
		$(this).hide();
		$("#popup").animate({top:0, left:0, width:"575px", height:"528px"});
		$("#popup").css({backgroundColor: "#fff", color: "#444",zIndex: 1}); 
		$("#popclose").show();	
		//$(this).bind();
		});
	
	$("#popclose").click(function(){
		$("#popup").hide();
		$(this).hide();
		$("#popup").css({zIndex: 0});
		$("#popup").css({width: 190, height: 90,backgroundColor: "rgba(0,0,0,0.6)", color: "#fff"});
		$.fastshow();
		$("#home > div").bind();
		});
		
	});

прошу не пинать я чего за целый день не делал и всякие коды втыкал.
это всё визуально посмотреть у меня на сайте

Art!P 24.06.2012 20:58

алгоритм после загрузки страницы такой:
1. При вход в #home Обрабатываю событие мышки, с fadein проявляю объекты: biosepticlight и waterpolelight
2. следующее событие на #biosepticjs где biosepticlight.hide а biosepticover проявляю. Тут еще проявляю #popup и таскаю за мышкой пока она бегает по biosepticover.
3. клик по biosepticover, тут #popup превращается в "элегантные шорты" закрывает весь #home. unbind biosepticover (думаю что при этом унбидится и #biosepticjs). Вывод всякого текста. На этом попап есть #popclose при клике по которому закрывается #popup ставлю бинды ($("#home > div").bind();)

после закрытия #biosepticjs не восстановились бинд(ы) мышка не хочет фурычить.

Deff 24.06.2012 21:08

Art!P,
Ну
1. Воть эта конструкция $("#biosepticjs").bind(); непонятно что означает...
посколь в доках такой не нахожу без указания на функцию или событие
(попробуйте её удалить
2. Попробуйте в последних строках(свертывания $("#popclose").)

вместо: $("#home > div").bind();
Поставить новую инициализацию вызвать *строки 3 - 32 (обернув эти строки в единую функцию

Art!P 24.06.2012 21:20

Цитата:

Сообщение от Deff (Сообщение 183793)
Art!P,
Ну
1. Воть эта конструкция $("#biosepticjs").bind(); непонятно что означает...
посколь в доках такой не нахожу без указания на функцию или событие
(попробуйте её удалить
2. Попробуйте в последних строках(свертывания $("#popclose").)

вместо: $("#home > div").bind();
Поставить новую инициализацию вызвать *строки 3 - 32 (обернув эти строки в единую функцию

Попытка восстановить реакции на события $("#biosepticjs").bind(); в течение дня делал в коде всякие варианты, и в коде был $("#biosepticjs").unbind(); еще делал $("#biosepticjs").bind("mouseover mouseleave mouseout и другие события мыши "); но не восстаналиваются реакция на мышь после $("#biosepticjs").unbind();
Цитата:

вместо: $("#home > div").bind();
Поставить новую инициализацию вызвать
А что значит новую инициализацию? Это как?
Функции $.allshow $.fastshow $.allhide $.thehide вспомогательные, вызываю по мере необходимости

Deff 24.06.2012 21:28

Цитата:

Сообщение от Art!P
А что значит новую инициализацию? Это как?

Ну включите в новую инициализвцию не все -а частично, то что необходимо только для Вашей части для работы с $("#biosepticjs")

Вы её свернули, с какого, она после $("#popclose").click станет кликабельной ?
И всё жа попробуйте убрать все
$("XXX")..bind(); (Имхо они бесполезны - просто мертвый груз
Должно всё работать так жа -как и сейчас

Art!P 24.06.2012 21:53

Deff спасибо за совет. понимаю. убрал .bind();
при закрытии попапа и помимо $.fastshow(); добавил явные:

$("#home").show();
$("#biosepticjs").show();
$(".biosepticover").show();

всё это не помогает :cray:
я воспользовался сайт-сервисом jsfiddle.net залил эту беду на
http://jsfiddle.net/M59bp/
думал может jQuery у меня староват. Но новые так же себя ведут.
Если не трудно народ гляньте. И вполне удобно разбирать.


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