Это чать index.php: PHP: <div id="shuffle"> <?php include ("bd_text.php"); $sql = "SELECT * FROM text"; $result11 = mysql_query($sql, $db_text)or die("Ошибка в запросе: " . mysql_error()); if (!$result11) { echo "ошибка - ".mysql_error()."<br>"; echo $sql; exit(); } while ($myrow11 = mysql_fetch_array($result11)) { if (!empty($myrow11['idtext'])) { printf("<div class='set_item'> <div class='box_text'> <table class='text_show'> <tr> <td class='img_text'> <span>%s</span> </td> <td class='title_text'> <h5 align='center'>%s</h5> </td> </tr> <tr> <td colspan='2' class='text_text' valign='top'> <em>%s</em> <div class='i_like'> <div id='iLike'><a>мне интересно...</a></div> </div> <div id='fool_text'>%s</div> </tr> </table> </div> </div>",$myrow11['img_text'], $myrow11['title'], $myrow11['smol_text'], $myrow11['text']); } else { echo("Ожидайте самой интересной информации!"); } } ?> </div> А это яваскнипт: [js]$('#shuffle').cycle({ fx: 'shuffle', speed: 1000, timeout: 4000 }); $('#iLike').click(function() { $('#fool_text').show('slide'); }, function(){ $('#fool_text').hide('slide'); });[/js] На всякий случай ещё css свойства страницы: [css]#shuffle{ margin-top: 710px; /* отступ всей формы от верхнего края */ } .text_show{ width: 435px; font-family:cursive; } .img_text{/* свойства рисунка */ width: 120px; height: 120px; text-align: center; border-bottom:1px solid #BA9D38; } .title_text{/* свойства заголовка */ width: 315px; height: 120px; color: #FF0000; font-size: 35px;/* отступ первой строки от края */ border-bottom:1px solid #BA9D38; font-weight:bold;/* текст внутри поля ввода жирный */ } .text_text{/* свойства текста */ height: 120px; font-size: 15px; text-align: justify; text-indent: 25 px;/* отступ первой строки от края */ color:#1B2C1E; font-weight:bold;/* текст внутри поля ввода жирный */ } .i_like{ height: 10px; text-align: right; font-size: 11px; } /* текст, который появляется при нажатии слайдера */ #fool_text{ z-index: 10; display: none; } /* свойства самиз листов-котейнеров */ .box_text{/* свойства первого листа */ margin-left: 45px; /* отступ всей формы от лефого края */ width: 435px; /* длинна формы */ min-height: 150px; /* минимальная высота формы */ padding: 10px 10px 10px 10px; /* отступы вложимого в форму от краёв формы */ position:relative; background:#fff; background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff)); background: -moz-linear-gradient(100% 50% 900deg, #DEF788, #fff 10%, #EED02B);/* цвет фона первого листа */ border: 1px solid #888A20;/* рамка первого листа */ -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1); -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.1); box-shadow: 1px 1px 40px rgba(0,0,0,0.3);/* тень вокруг формы */ -webkit-border-bottom-right-radius: 60px 5px; -moz-border-radius-bottomright: 60px 5px; border-bottom-right-radius: 60px 5px;/* загиб первого листа */ } .box_text:before{/* свойства сложенных снизу листов */ content: ''; width: 80%;/* видимая часть снизу снизу */ height: 100%; z-index: -1; padding: 0 0 1px 0; position: absolute; bottom:0; right:0; background: #fff; background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff)); background: -moz-linear-gradient(0 0 270deg, #fff, #0000FF 10%, #B8B64E); border: 1px solid #767430; -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1); -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.1); box-shadow: 1px 1px 8px rgba(0,0,0,0.5); -webkit-border-bottom-right-radius: 60px 5px; -moz-border-radius-bottomright: 60px 5px; border-bottom-right-radius: 60px 5px; -webkit-transform: skew(2deg,2deg) translate(3px,8px); -moz-transform: skew(2deg,2deg) translate(3px,8px); -o-transform: skew(2deg,2deg) translate(3px,8px); transform: skew(2deg,2deg) translate(3px,8px); } .box_text:after{/* свойства сложенных снизу листов(среднего) */ content: ''; width: 98%; z-index:-1; height: 98%; padding: 0 0 1px 0; position: absolute; bottom:0; right:0; background: #f3f3f3; background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff)); background: -moz-linear-gradient(0 0 270deg, #fff, #0000FF 10%, #DBDAA4);/* свойства фона */ border: 1px solid #767430; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.1); box-shadow: 0px 0px 8px rgba(0,0,0,0.1); -webkit-transform: skew(2deg,2deg) translate(-1px,2px); -moz-transform: skew(2deg,2deg) translate(-1px,2px); -o-transform: skew(2deg,2deg) translate(-1px,2px); transform: skew(2deg,2deg) translate(-1px,2px); } .box_text_tape{/* Прозрачная ленточка */ position:absolute; top: 0; left: 0; width: 130px; height: 40px; background:rgba(0, 0, 0, 0.1); background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2))); background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.0)); border-left: 1px dashed rgba(0, 0, 0, 0.1); border-right: 1px dashed rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2); box-shadow: 0px 0px 12px rgba(0,0,0,0.2); -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); -moz-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); -o-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); transform: rotate(-30deg) skew(0,0) translate(-30px,-20px); }[/css] Должно быть: На экране отображается рамка с изображением, заголовком и кратким содержанием(Данные рамки каждые три секунды перелистывается как бы...).Снизу есть такая надпись:"мне интересно...",при нажатии на которую снизу основного содержимого выплывает оставшаяся часть текста(полная версия так сказать)! Суть проблемы: 1. Всё отображается как и задуманно (php выводит как надо и рамки и содержимое), но вот незедача-когда нажимаю на ссылку "мне интересно...",то оставшая часть текста выплывает только у самого первого текста, а остальные,которые php выводит ничего не происходит...Как так? 2. Не получается прописать функцию, при которой при нажатии пользователем на "мне интересно..." перелистование файлов прекратилось (что бы пользователь мог спокойно прочитать), а точнее знаний не хватает...((( 3. И вот ещё что:нужно что бы при нажатии на "мне интересно..."оно исчезало,а в самом низу появлялось "я прочитал...",которая будет активировать (при нажатии пользователем) функцию обратного сварачивания и восстановления перелистования рамок с содержимым... П.С.Вот во 2 и 3 пунктах ваще помощь нужна... П.П.С. Молю о помощи!Заранее благодарен...
Вообщем я тут покумекал и вот что написал: [js]$('#shuffle').cycle({ fx: 'shuffle', speed: 1000, timeout: 4000 }); <!-- функции кнопки "мне интересно..." --> $('#iLike').click(function() { $('#fool_text').show('slide'); $('#iLike').slideUp(1000); $('#svernut').show('slide'); $('#shuffle').cycle({ fx:'false' }); }); <!-- функции кнопки "свернуть" --> $('#svernut').click(function() { $('#fool_text').hide('slide'); $('#svernut').hide('slide'); $('#iLike').show('slide'); $('#shuffle').cycle({ fx: 'shuffle', speed: 1000, timeout: 4000 }); });[/js] Всё работает как задумал(не судите строго-плохо знаю яву). Но вот дилема:первый раз когда php выводит рамку с текстом всё прекрасно работает,но вот при последующем цикличном выводе ничего не получается-яваскрипт не срабатывает!((( Кто может помочь?
Не яву. Javascript. Яву ты, думаю, не знаешь совсем. Ни язык, ни остров, ни (скорее всего) мотоцикл. Не работает у тебя скорее всего потому что ты в цикле выводишь HTML: <div class='i_like'> <div id='iLike'><a>мне интересно...</a></div> </div> <div id='fool_text'>%s</div> (а в новом варианте еще и что-то с id = "svernut") В цикле, понимаешь? У тебя на странице получается несколько элементов с одинаковым id. Ты видишь только один, но на самом деле они все там есть, просто их не видно. А javascript их видит и удивляется - он-то знает что id должен быть уникальным. Нуивот.
Точно!Точно!Точно! Я когда из браузера просмотрел код страницы,то сам понял,что налажал тут... Блин!А как же быть?Как можно привязать одну и ту же функцию к разным элементам,которые выводятся в цикле?
дык на то нам и даны селекторы css, $(this), $(this).children() / $(this).find() / $(this).siblings() Поставь диву с id="iLike" класс "expandlink"и лови клик по нему, full_text и svernut тоже сделай классами вместо id. Есличо, по английски "свернуть" будет "collapse". И еще есличо, то fool_text это "дурацкий текст", а "полный" пишется "full" Вместо $('#iLike').click(function() {}) пиши ('.expandlink').click(function() {}) а внутри этого клика $(this) - это твой $('#iLike'), $(this).siblings(".full_text") $(this).siblings(".collapse")
Ха!Ща за пару минут напишу-как я раньше не понял...))) Ну,а если реально смотреть на вещи и оценивать свои способности,то попрошу хоть пример какой кинуть,что бы я в неё поковырялся и под себя сделал,а то ща тут совсем загнусь с этим вопросом...может наработочка у кого есть какая? Спасибо!
Так,если я всё правильно сделал,то у меня получается вот так: PHP: <div class='set_item'> <div class='box_text'> <table class='text_show'> <tr> <td class='img_text'> <strong>%s</strong> </td> <td class='title_text'> <h5 align='center'>%s</h5> </td> </tr> <tr> <td colspan='2' class='text_text' valign='top'> <em>%s</em> <div id='iLike' class='expandlink'>мне интересно...</div> <div class='full_text'>%s</div> <div class='svernut'>свернуть</div> </td> </tr> </table> </div> </div> А вместо всего яваскрипта: [js] 6. <!-- функции кнопки "мне интересно..." --> 7. $('#iLike').click(function() { 8. $('#fool_text').show('slide'); 9. $('#iLike').slideUp(1000); 10. $('#svernut').show('slide'); 11. $('#shuffle').cycle({ 12. fx:'false' }); 13. }); 14. <!-- функции кнопки "свернуть" --> 15. $('#svernut').click(function() { 16. $('#fool_text').hide('slide'); 17. $('#svernut').hide('slide'); 18. $('#iLike').show('slide'); 19. $('#shuffle').cycle({ 20. fx: 'shuffle', 21. speed: 1000, 22. timeout: 4000 23. }); 24. });[/js] вот это: [js]$('.expandlink').click(function() { $(this), $(this).siblings(".full_text") $(this).siblings(".svernut") });[/js] Но у меня при таких раскладах вообще яваскрипт перестал работать..... Или я что не так сделал? П.С.Чур не материться только на меня...)))
$(this).siblings(".full_text") - это замена прежнему $('#svernut') а что ты с этим элементом делать будешь я не знаю. Где все твои hide(), cycle() и прочие вызовы методов? Кто о них должен думать, я или ты?
И кстати, убери id="iLike". Ты к нему не обращаешься по id, так что он тебе не нужен. А их все еще несколько на странице.
Всё сделал как Вы сказали и id убрал,переделал css под класс expandlink,но ничего не происходит-функция перестала выполняться... А куда их вставлять и как-я сейчас как слепой котёнок тыкаю на кнопки! Какая формулировка у этих методов тогда получится (измениться ли)? Не пойму куда и что писать...хоть одну строчку накидайте (с указанием куда вставлять), а я дальше постараюсь самостоятельно!
у меня в коде - это, у тебя то. У тебя в html нет дива с классом collapse. upd: а, сорри, это была замена $('#fool_text')
Покумекал: [js]$('.expandlink').click(function() { $(this), $(this).siblings(".full_text"), $(this).siblings(".svernut"); }); $('.expandlink').click(function() { $(".full_text").show("slide"); $(".expandlink").slideUp(1000); $(".svernut").hide("slide"); $("#shuffle").cycle({ fx:"false"}); }); $(".svernut").click(function() { $(".full_text").hide("slide"); $(".expandlink").slideOut(1000); $(".svernut").hide("slide"); $('#shuffle').cycle({ fx: 'shuffle', speed: 1000, timeout: 4000 }); }); [/js] При появлении первой рамки с текстом я нажимаю на слова "мне инересно..."и выезжает оставшаяся часть текста, но слово "свернуть"отсутствует.При появлении последующих рамок с текстом я нажимаю на слова "мне инересно..."и выезжает оставшаяся часть текста, но при этом "мне инетресно..." никуда не исчезает(исчезает только при повторном нажатии)!И слово "свернуть" не появляется аналогично как и в первом случае!Соответственно пользователь не сможет вернуть рамку в исходное состояние! Как быть? Короче ЖЕСТЬ,когда не знаешь!!!
Я так понял,что collapse должен был заменить svernut, но я оставил svernut, так как collapse уже есть у меня! Или нужно заменить обязательно?
Блджад. Я зачем про $(this) рассказывал? ВМЕСТО $(".full_text").hide("slide"); надо использовать $(this).siblings(".full_text").hide("slide"), dместо $(".expandlink").slideUp(1000); - $(this).slideUp(1000); И ТАК ДАЛЕЕ для всех остальных элементов кроме элемента shuffle, потому что он у тебя не в цикле. Дальше просто. Hide означает "спрятать", show - показать. когда ты разворачиваешь текст, тебе надо делать в 11 строке $(".svernut").show("slide"). Дальше думай сам. Подсказать я могу, но писать за тебя простейший код на 10 строчек не буду.
Не понял,что это значит! Я за себя писать не прошу никого-самому интересно понять и разобраться,что бы потом к Вашим вопросам писать грозные коменты и тыкать носом в ошибки,но пока могу только за советом обращаться!))) Написал: [js]$(".expandlink").click(function() { $(this), $(this).siblings(".full_text"), $(this).siblings(".svernut"); }); $(".expandlink").click(function() { $(".full_text").show("slide"); $(".expandlink").slideUp(1000); $(".svernut").show("slide"); $("#shuffle").cycle({ fx:"false"}); }); $(".svernut").click(function() { $(this).siblings(".full_text").hide("slide"); $(this).siblings(".svernut").hide("slide"); $(this).slideOut(1000); $('#shuffle').cycle({ fx: 'shuffle', speed: 1000, timeout: 4000 }); }); [/js] Работать стало всё лучше,но всё ещё есть недостатки: 1. После того как я нажимаю на слово "свернуть", то оно не исчезает,а остаётся на месте неактивным(при этом текст,который ранее появился как и должен исчезает)-это про первую рамку говорю,которая появляется при перезагрузки страницы. 2.При появлении второй рамки как и ранее слова "мне интересно..."при первом нажатии не исчезают(только после повторного), а в остальной ситуация аналогична первой! Что может быть?
1. первые пять строк убери, они не нужны, я их писал чтобы селекторы показать, а не как рабочий код. 2. слово "свернуть" не исчезает потому что кто-то в $(".expandlink").click(function() {}) селекторы не поменял. Хотя казалось бы... 3. а почему должны исчезать слова "мне интересно"? Покажи строчку в коде, в которой ты говоришь им исчезнуть?
Чот не допонял Вас! Оно должно исчезать из-за: [js]$(this).siblings(".svernut").hide("slide");[/js] ,но не хочет!Какие селекторы нужно поменять в $(".expandlink").click(function() {})-я всё сделал как Вы ранее говорили?! Вот тут: [js]$(".expandlink").slideUp(1000);[/js] При появлении первой рамки всё исчезает как нада,а вот когда в цикле выводятся остальные рамки,то меняет своё поведение:нажимаешь на "мне интересно..."-выезжает текст,но сами слова "мне интересно..."остаются на месте и лишь когда второй раз нажимаешь на "мне интересно...",то они исчезают!!!Вот в чём проблема!
Посмотри на селекторы в 7-9 строках, сравни их с селекторами в 14-16 строках и скажи, нет ли между ними случайно отличий? Когда ты пишешь $(".expandlink").slideUp(1000); js разворачивает ВСЕ элементы у которых есть класс expandlink. А они у тебя если помнишь, выводятся в цикле. То есть их НЕСКОЛЬКО.
Вот так написал: [js]$(".expandlink").click(function() { $(this).siblings(".full_text").show("slide"); $(this).slideUp(1000); $(this).siblings(".svernut").show("slide"); $("#shuffle").cycle({ fx:"false"}); }); $(".svernut").click(function() { $(this).siblings(".full_text").hide("slide"); $(this).hide("slide"); $(this).siblings(".expandlink").show("slide"); $('#shuffle').cycle({ fx: 'shuffle', speed: 1000, timeout: 4000 }); });[/js] С яваскриптом всё работает как задумано-СПАСИБО БОЛЬШОЕ за помощь!!! Но теперь,кода выводятся следующие рамки в цикле,то при нажатии на "мне интересно..." выкидывает сразу же первую самую рамку и ничего не происходит!А вот если на первой сразу нажать на "мне интересно...",то всё работает как надо! Вот тут что прикажете делать!?
ну, попробуй в самом конце обработки click (перед закрывающей фигурной скобкой) написать return false; Я на всякий случай напоминаю, что обработок click у тебя две.