Скрипт ломает содержимое шапки
Уважаемые гуру! Подскажите начинающему. При установке скрипта с подключением к библиотеке к jQuery ломается содержимое шапки (часть не отображается, отступы и прочее). Где искать причину? в скрипте с частью СSS что на странице или в самом jQuery?
На самой странице установлен следующий код: <script type="text/javascript" src="jquery-1.5.min.js"></script> <style type="text/css"> { font-family: Arial, "Free Sans"; } #boxcard { margin: 0 auto; width: 625px; z-index: 1; } #boxcard div { float: left; width: 100px; height: 100px; background: #d9d9d9; margin: 5px; padding: 5px; border: 1px solid #999; cursor: pointer; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 1px 2px rgba(0,0,0,.5); z-index: 2; } #boxcard div img { border: none; z-index: 3; } .opacity { opacity: .6; filter: alpha(opacity=60); } #boxbutton { text-align: center; padding: 20px; } .link { font-size: 18px; color: #ffffff; text-decoration: none; background: #0066cc; padding: 5px 10px; -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; } .link:hover { background: #999; } </style> </head> <body> <div id="boxbutton"> <span class="link"> <span id="count">0</span> Click </span> <a href="javascript:" class="link" onclick="resetGame();">Reset</a> </div> <div id="boxcard"> <div id="card1"><img src="images/151.jpg"" /></div> </div> <script type="text/javascript"> var boxopened = ""; var imgopened = ""; var count = 0; var found = 0; function randomFromTo(from, to){ return Math.floor(Math.random() * (to - from + 1) + from); } function shuffle() { var children = $("#boxcard").children(); var child = $("#boxcard div:first-child"); var array_img = new Array(); for (i=0; i<children.length; i++) { array_img[i] = $("#"+child.attr("id")+" img").attr("src"); child = child.next(); } var child = $("#boxcard div:first-child"); for (z=0; z<children.length; z++) { randIndex = randomFromTo(0, array_img.length - 1); // set new image $("#"+child.attr("id")+" img").attr("src", array_img[randIndex]); array_img.splice(randIndex, 1); child = child.next(); } } function resetGame() { shuffle(); $("img").hide(); $("img").removeClass("opacity"); count = 0; $("#msg").remove(); $("#count").html("" + count); boxopened = ""; imgopened = ""; found = 0; return false; } $(document).ready(function() { $("img").hide(); $("#boxcard div").click(openCard); shuffle(); function openCard() { id = $(this).attr("id"); if ($("#"+id+" img").is(":hidden")) { $("#boxcard div").unbind("click", openCard); $("#"+id+" img").slideDown('fast'); if (imgopened == "") { boxopened = id; imgopened = $("#"+id+" img").attr("src"); setTimeout(function() { $("#boxcard div").bind("click", openCard) }, 300); } else { currentopened = $("#"+id+" img").attr("src"); if (imgopened != currentopened) { // close again setTimeout(function() { $("#"+id+" img").slideUp('fast'); $("#"+boxopened+" img").slideUp('fast'); boxopened = ""; imgopened = ""; }, 400); } else { // found $("#"+id+" img").addClass("opacity"); $("#"+boxopened+" img").addClass("opacity"); found++; boxopened = ""; imgopened = ""; } setTimeout(function() { $("#boxcard div").bind("click", openCard) }, 400); } count++; $("#count").html("" + count); if (found == 10) { msg = '<span id="msg">Ïîçäðàâëÿåì! Âû ñîáðàëè âñå êàðòèíêè! </span>'; $("span.link").prepend(msg); } } } }); </script> |
Петрович,
Киньте лучше ссылку на демо или реальный сайт - тяжело показывая кусок ноги от слона - определить чем он страдает |
Уважаемый Deff! Я не выгружал еще данную страницу. Сейчас внимательно посмотрел результат действия скрипта...Просто все картинки становятся невидимыми. В скрипте где то заложено данное действие оно там нужно поскольку это скрипт игры открытия попарно картинок и изначально на игрровом поле все картинки невидимы. Соответственно скрипт распространяет свое действие на всю страницу. В связи с этим как можно решить данную проблему? можно как то прописать к другим images страницы чтобы они были видимы.
|
Цитата:
загружаем архив на - http://multi-up.com/ кидаем ссылку в личку или ссылкой здесь жа |
Отправил ссылку в личку...
Попробовал сейчас поставить картинку фоном и она стала отображаться. Собственно возникает вопрос есть ли какой нибудь тег для картинки что бы не смотря на действие скрипта на всю страницу делающим картинки невидимыми (пробовал кстати его пихать в разные части страницы, не помогает), они отображались. |
Петрович,
Попробуйте заменить ток скрипт: <script type="text/javascript"> var boxopened = ""; var imgopened = ""; var count = 0; var found = 0; function randomFromTo(from, to){ return Math.floor(Math.random() * (to - from + 1) + from); } function shuffle() { var children = $("#boxcard").children(); var child = $("#boxcard div:first-child"); var array_img = new Array(); for (i=0; i<children.length; i++) { array_img[i] = $("#"+child.attr("id")+" img").attr("src"); child = child.next(); } var child = $("#boxcard div:first-child"); for (z=0; z<children.length; z++) { randIndex = randomFromTo(0, array_img.length - 1); // set new image $("#"+child.attr("id")+" img").attr("src", array_img[randIndex]); array_img.splice(randIndex, 1); child = child.next(); } } function resetGame() { shuffle(); $("#boxcard img").hide(); $("#boxcard img").removeClass("opacity"); count = 0; $("#msg").remove(); $("#count").html("" + count); boxopened = ""; imgopened = ""; found = 0; return false; } $(document).ready(function() { $("#boxcard img").hide(); $("#boxcard div").click(openCard); shuffle(); function openCard() { id = $(this).attr("id"); if ($("#"+id+" img").is(":hidden")) { $("#boxcard div").unbind("click", openCard); $("#"+id+" img").slideDown('fast'); if (imgopened == "") { boxopened = id; imgopened = $("#"+id+" img").attr("src"); setTimeout(function() { $("#boxcard div").bind("click", openCard) }, 300); } else { currentopened = $("#"+id+" img").attr("src"); if (imgopened != currentopened) { // close again setTimeout(function() { $("#"+id+" img").slideUp('fast'); $("#"+boxopened+" img").slideUp('fast'); boxopened = ""; imgopened = ""; }, 400); } else { // found $("#"+id+" img").addClass("opacity"); $("#"+boxopened+" img").addClass("opacity"); found++; boxopened = ""; imgopened = ""; } setTimeout(function() { $("#boxcard div").bind("click", openCard) }, 400); } count++; $("#count").html("" + count); if (found == 10) { msg = '<span id="msg">Поздравляем! Вы собрали все картинки! </span>'; $("span.link").prepend(msg); } } } }); </script> |
Deff! Спасибо огромное...все работает!!! Вот что значит профи :)
|
Петрович,
Не возбуждайтесь - Тестируйте (мну после ночной - еще не спал |
Deff! Дык как не возбуждаться когда сидишь полдня в жаре и понять не можешь че ей надо))): Протестировал во всех браузерах. Все работает:)
|
Часовой пояс GMT +3, время: 05:44. |