помогите с 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 у меня староват. Но новые так же себя ведут. Если не трудно народ гляньте. И вполне удобно разбирать. |
Часовой пояс GMT +3, время: 18:36. |