Помогите реализовать спойлер который будет скрывать информацию если контент в высоту больше X px.

[NOIP]

Помогите реализовать спойлер который будет скрывать картинку автоматически или любую информацию если она привышает к примеру 1000 пиксилей в высоту. может быть видел кто нечто подобное на Jquery?

 

[sol_los]

js

var i = $('img');
if($(i).height() > 1000){
$(i).hide(); или $(i).addClass('hidden')
}

 

[NOIP]

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(".content").each(function(){
    var i = $('img');
    if($(i).height() > 1000){
        $(i).addClass('hidden')
    }
});
</script>

<style>
.hidden {display: hidden;}
</style>

<div class="content">
<img src="http://img1.joyreactor.cc/pics/post/full/anon-Картинка-2191131.jpeg">
</div>

не работает((

 

[NOIP]

Вот здесь есть кусок кода который мне нужен

(jQuery);(function(a){a(document).on("click",".hidden_link a",function(){var e=a(this).closest(".postContainer").attr("id").substr(13);a.ajax({url:a(this).attr("href"),cache:!1,data:"token="+token,success:function(f){var d=a("#postContainer"+e);d.html(f);a(window).scrollTop(d.offset().top);d.trigger("DOMUpdate");a(".qtip").hide()}});return!1})})(jQuery);
(function(a){function e(c){var e=a(c);if(0!=e.closest(".single_post").length)e.addClass("allow_long");else{var b=parseInt(e.css("max-height"));if(e.height()>=b||d(c))f(c);else e.find("img").one("load",function(){var d=e.closest(".post_content");a(d).height()>=b&&f(c)})}}function f(c){c=a(c);c.closest(".article,#tagArticle").find(".post_content_expand").show();c.addClass("post_content_cut")}function d(c){var d=0;a(c).find("img").each(function(){d+=parseFloat(a(this).attr("height"))});return 2E3<=d}
a(document).on("click",".post_content_expand",function(){a(this).closest(".article,#tagArticle").find(".post_content").css("max-height","100%");a(this).hide();return!1}).on("DOMUpdate",function(c){a(c.target).find(".article,#tagArticle").find(".post_content").each(function(){e(this)})})})(jQuery);

Нужный мне спойлер уже реализован на reactor.cc кто нибудь может помоч с подобной реализацией?

 

[sol_los]

что это такое?

.hidden {display: hidden;}

.hidden {display: none;}

 

[NOIP]

что это такое?


.hidden {display: none;}

У меня уже 4 часа ночи, уже пол ночи бъюсь над решением.. все не получается(( все ровно не работает...

 

[sol_los]

Js после html вставляем?

 

[Absolute]

Нужно ждать... ждать пока картинки загрузятся... стили

$(window).load(function(){
     var a = $('.content');
  a.each(function(){
    if($(this).height() < 1000){
      return;
    }
      var cont = $('<div />',{
              text : 'Спойлер',
              style : 'border: 1px solid #CCC',
              click : function(){
                      $(this).children().slideToggle();
              }
            });
   $(this)
     .wrap(cont)
     .hide();
  });
});

 

[NOIP]

Для просмотра ссылки Войди или Зарегистрируйся, вставлял, не помогло.

Для просмотра ссылки Войди или Зарегистрируйся, все супер, а подскажите пожалуйста, как показывать первые 30% информации? а остальные что бы были скрыты пока не нажму по спойлеру?

 

[Absolute]

Для просмотра ссылки Войди или Зарегистрируйся, все супер, а подскажите пожалуйста, как показывать первые 30% информации? а остальные что бы были скрыты пока не нажму по спойлеру?

Как-то так наверное... в общем свойство clip режет края, если у род.блока position:absolute и не режет, если не absolute.

<script>
$(window).load(function(){
     var a = $('.content');
  a.each(function(){
    var h = $(this).height();
    if(h < 1000){
      return;
    }
      var cont = $('<div />',{
              text : 'Спойлер',
              style : 'clip:rect(0,auto,'+(h/100*30+30)+'px,0)',
              class : 'cont_rect',
              click : function(){
                      $(this).toggleClass('cont_rect_vis');
              }
            });
   $(this)
     .wrap(cont);
  });
});
</script>
<style>
div[class="cont_rect"]{
  border: 1px solid #CCC;
  position:absolute;
}
.cont_rect_vis{
    border: 1px solid #000;
  position:relative;
}
</style>