Skip to main content

toogle div block - work not properly



I have a following code:







<div class="block review_block wrap"><ul class="comments_list">

<li class="comment">

<div class="poster">

<img width="60px" height="75px" src="/Image/GetImage?imageName=3c52a0f1-92ee-45ee-bd25-bdd5bfc0954f.jpg">

</div>

<!-- .poster-->

<div class="comment_content">

<div class="date">

29.01.2012 9:36:59</div>

<div class="nickname">

<a href="#">

Ослик Иа</a></div>

<div class="review_text">

<a>

Рецензия 3</a>

</div>

<p class="text">

Нельзя сказать, что сюжетная линия предсказуема (только в паре моментов), и поэтому с наслаждением зал наблюдал, как Холмс снова и снова поражал нас своими дедуктивными способностями. Да и Ватсон от него не отставал и всегда на подмогу приходил. В сравнении с первой частью юмора стало больше, но он <span class="ellipses" style="display: inline;">...</span>

<span class="more-text" style="display: none;">

не достигает той грани, когда понимаешь, что сценаристы перестарались с шутками, делая на них слишком высокую ставку. А уж переживаний прибавилось столько, что просто сердечко так и надрывалось. Прослезилась в нескольких местах, а в одном и просто всплакнула. Но, тут без спойлеров.



А сейчас, я скажу о сцене, которая по моему мнению должна быть как-то действительно оценена. Это сцена погони в лесу. Настолько динамично, энергично, невообразимо и захватывающе, что слов не хватает. Наслаждаешься каждой секундой, каждым кадром. Эта сцена даже зрителю передаёт свои силы. Просто браво!



Так что заставила меня «игра теней» возвращать домой с широкой улыбкой на лице, а зал аплодировал очень громко и звонко, за что ему отдельное спасибо.</span>



</p>

<ul class="info list wrap">

<li><a class="iComment">Comment</a> (0)</li>

<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>

<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>

<li><a class="iSocial code" href="#">Код для блога</a></li>

</ul>

</div>

<!-- .comment_content-->



<div class="widgets">

<div class="rating_block">

<div class="stars_rating">

<div class="stars_off">

</div>

<div style="width: 0%" class="stars_on">

</div>

</div>

<!-- .stars_rating-->

<i class="lli"></i>

<div style="z-index: 0;" class="expand">



<span class="iSocial iSmile">0</span></div>





<!-- .rating_block-->

<div style="display: none;" class="voice_block">



<div publicationid="3" type="Publication" eventid="4" class="going">

<a href="">Я пойду!</a>

<div id="going_too">

Уже идут: 0</div>

</div>



<!-- .going-->

<div class="data_for_rating">

<div>

Голосовать</div>

<div class="star_for_rating">

<ul>

<li><a href="#">1</a> </li>

<li><a href="#">2</a> </li>

<li><a href="#">3</a> </li>

<li><a href="#">4</a> </li>

<li><a href="#">5</a> </li>

</ul>

</div>

<!-- .star_for_rating-->

<div>

Средний бал: 0

(0)</div>

</div>

<!-- .data_for_rating-->

</div>

<!-- .voice_block-->

</div>

<!-- .widgets-->

</div></li>

<!-- .comment-->



<div class="block section-comments_for_photo" style="display: none;"></div>







<li class="comment">

<div class="poster">

<img width="60px" height="75px" src="/Image/GetImage?imageName=2e722edb-8649-43af-b468-a2b489c467fb.jpg">

</div>

<!-- .poster-->

<div class="comment_content">

<div class="date">

29.01.2012 9:36:22</div>

<div class="nickname">

<a href="#">

Антон</a></div>

<div class="review_text">

<a>

Рецензия 2</a>

</div>

<p class="text">

Авторы ушли из Лондона, и это действительно хороший ход. Атмосфера и краски остались теми же, но место событий поменялось, и всё менялось и менялось по ходу действия фильма. Временами всё было так красиво, что аж дух захватывало. Хотелось суметь уловить каждую деталь, каждый миллиметр, но всё было т<span class="ellipses" style="display: inline;">...</span>

<span class="more-text" style="display: none;">

ак динамично, что это сделать было достаточно сложно. Хотя этот факт ни сколечко не уменьшает прекрасность «Игры теней». Атмосферу помогала поддерживать всё так же великолепная музыка Ханса Циммера, которая местами была точь-в-точь как и в первом фильме. Что особенно касается титров, которые всё такие же привлекательные, и прошлая музыка им ни капельки не мешает, а наоборот, только навивает приятные воспоминания об ощущениях, которые возникли в своё время после просмотра предыдущей ленты в такой же момент титров, когда люди начали вставать и потихоньку уходить из зала с интересом глядя на экран.</span>



</p>

<ul class="info list wrap">

<li><a class="iComment">Комментировать</a> (0)</li>

<li><a class="iSocial iThanks" href="#">Спасибо!</a></li>

<li><a class="iSocial iComplain" href="#">Пожаловаться</a></li>

<li><a class="iSocial code" href="#">Код для блога</a></li>

</ul>

</div>

<!-- .comment_content-->



<div class="widgets">

<div class="rating_block">

<div class="stars_rating">

<div class="stars_off">

</div>

<div style="width: 0%" class="stars_on">

</div>

</div>

<!-- .stars_rating-->

<i class="lli"></i>

<div style="z-index: 0;" class="expand">



<span class="iSocial iSmile">0</span></div>





<!-- .rating_block-->

<div style="display: none;" class="voice_block">



<div publicationid="2" type="Publication" eventid="1" class="going">

<a href="">Я пойду!</a>

<div id="going_too">

Уже идут: 0</div>

</div>



<!-- .going-->

<div class="data_for_rating">

<div>

Голосовать</div>

<div class="star_for_rating">

<ul>

<li><a href="#">1</a> </li>

<li><a href="#">2</a> </li>

<li><a href="#">3</a> </li>

<li><a href="#">4</a> </li>

<li><a href="#">5</a> </li>

</ul>

</div>

<!-- .star_for_rating-->

<div>

Средний бал: 0

(0)</div>

</div>

<!-- .data_for_rating-->

</div>

<!-- .voice_block-->

</div>

<!-- .widgets-->

</div></li>

<!-- .comment-->



<div class="block section-comments_for_photo" style="display: none;"></div>



</ul></div>







There are two div with block section-comments_for_photo class.





I want that user clicks on Comment ( iComment class) then data loading into div( block section-comments_for_photo ). My code:







$(document).ready(function() {

$('.block.section-comments_for_photo').each(function() {

$(this).hide();

});

$(".iComment").click(function() {

var id = <%=Model.OID %> ;

var section = $(this).closest(".comments_list").first(".block.section-comments_for_photo");

$(section).load("/Publication/GetCommentsForPublication?id=" + id, function() {

$(this).toggle(400);

return false;

});

});

});







This code loads the data but it delete all html from block review_block wrap . Where is problem?





Thanks.





UPDATE: JSFiddle


Comments

  1. You wrongly use jQuery.first. It doesn't do what you expect it to.

    Use find instead.

    $(".iComment").click(function() {
    var section = $(this).closest(".comments_list").find(".block.section-comments_for_photo");

    $(section).toggle(400);
    return false;
    });


    Updated jsfiddle.

    ReplyDelete
  2. toggle(400) meens that it will be shown during 400 milliseconds.
    If you want to show it for a longer time (eg 4 seconds) you have to put toggle(4000).

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex