помогите с 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 дня)" Спасибо люди добрые |
Art!P,
Ссылку на файл стиля дайте или выложите css код |
Держите:
kgeohome.css |
Art!P,
Пишите алгоритм по пунктам 1. Кликаем на 'biosepticover' - что должно делаться ? 2. ..... 3. .... И.т.д Исключения: 1. 2. |
простите, лучше приведу весь код:
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();
});
});
прошу не пинать я чего за целый день не делал и всякие коды втыкал. это всё визуально посмотреть у меня на сайте |
алгоритм после загрузки страницы такой:
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 не восстановились бинд(ы) мышка не хочет фурычить. |
Art!P,
Ну 1. Воть эта конструкция $("#biosepticjs").bind(); непонятно что означает... посколь в доках такой не нахожу без указания на функцию или событие (попробуйте её удалить 2. Попробуйте в последних строках(свертывания $("#popclose").) вместо: $("#home > div").bind(); Поставить новую инициализацию вызвать *строки 3 - 32 (обернув эти строки в единую функцию |
Цитата:
Цитата:
Функции $.allshow $.fastshow $.allhide $.thehide вспомогательные, вызываю по мере необходимости |
Цитата:
Вы её свернули, с какого, она после $("#popclose").click станет кликабельной ? И всё жа попробуйте убрать все $("XXX")..bind(); (Имхо они бесполезны - просто мертвый груз Должно всё работать так жа -как и сейчас |
Deff спасибо за совет. понимаю. убрал .bind();
при закрытии попапа и помимо $.fastshow(); добавил явные: $("#home").show(); $("#biosepticjs").show(); $(".biosepticover").show(); всё это не помогает :cray: я воспользовался сайт-сервисом jsfiddle.net залил эту беду на http://jsfiddle.net/M59bp/ думал может jQuery у меня староват. Но новые так же себя ведут. Если не трудно народ гляньте. И вполне удобно разбирать. |
<script>
jQuery(document).ready(function ($){
$.allshow = function(){
$("#home").show();
$("#biosepticjs").show();
$("#waterpolejs").show();
$(".biosepticlight").fadeIn(500);
$(".waterpolelight").fadeIn(500);
return;
};
$.fastshow = function(){
$("#home").show();
$("#biosepticjs").show();
$("#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();
return;
};
$("#home").hide();
$.thehide();
$("#home").fadeIn("slow");
$("#home").mouseenter($.allshow).mouseleave($.allhide);
$("#biosepticjs").mouseenter(function(){
$(".biosepticlight").hide();
$("#waterpolejs").hide();
$("#popup > h1").text("Биосептик");
$(".biosepticover").fadeIn(200);
$("#popup").fadeIn(200);
});
var clickFlag = false;
$(".biosepticover").mouseout(function(){
if(!clickFlag){$("#popup").hide()}
$.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(){
clickFlag = true;
$(this).hide();
$("#popup").animate({top:0, left:0, width:"575px", height:"528px"});
$("#popup").css({backgroundColor: "#fff", color: "#444",zIndex: 1});
$("#popclose").show();
});
$("#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"});
clickFlag = false;
});
});</script>
|
Поправил
ЫЫ Еще раз |
http://jsfiddle.net/M59bp/2/
оно оно :D урааа!!! Работает как надо! Deff дайте я вашу жопу расцелую!!!! думал про шаманство с булом, но не понимал как сделать! Спасибо! В репу получите! |
| Часовой пояс GMT +3, время: 16:44. |