Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Как сделать типа спойлера (см. скрин)

Как сделать типа спойлера (см. скрин)


     30.01.2014    Общие вопросы по вёрстке    1992

вопрос
Как сделать такое же (см. скрин)

Как сделать типа спойлера (см. скрин)

Как сделать типа спойлера (см. скрин)


_http://www.hdkinoteatr.com/sci-fi/10607-chelovek-iz-stali.html (сайт на DLE как я понял по URL)

Через CSS я хз как сделать, не встречал такого.. Может через спойлер DLE такое проделать?

Ответил: ПафНутиЙ


Вам поможет скрипт readmore.js

Комментарии пользователей (8)

wulv
131 | 49

wulv - 30 января 2014 15:00 - Юзер

На этом сайте это реализовано через JS, посмотри и скопируй или закажи у Пафнутий

feniks01
4

203 | 17

feniks01 - 30 января 2014 15:05 - Гости

Я видел.. хз что вырвать тут:

<script type="text/javascript">
var usr_lang = window.navigator.userLanguage || window.navigator.language;
$(function() {
    $(document).moreless({startHeight:130,moreText:'больше ',lessText:'свернуть ',outerContainer:'maincont',contentContainer:'descr',anchorClass:'more-link'})
    $("a.lnkTip").mouseover(function(){
        var p=$(this).position();
        var tip=$(this).prev('.imgTip');
        $(tip).css('top', p.top-tip.height()-2).css('left', p.left+$(this).width()/2-$(tip).width()/2).show();
    })
    $("a.lnkTip").mouseout(function(){
        $(this).prev('.imgTip').hide();
    })
    $(".tooltip-trigger").mouseover(function(){
        var p=$(this).position();
        var tip=$(this).next('.tooltip');
        $(tip).css('top', p.top-tip.height()-15).css('left', p.left+$(this).width()/2-$(tip).width()/2).show();
    })
    $(".tooltip-trigger").mouseout(function(){
        $(this).next('.tooltip').hide();
    })
    
    $("#sendsuggestion").click(send_suggestion);
    $("#suggestmovie").keyup(function(e) {
        if((e.keyCode || e.which) == 13) send_suggestion();
    })
    function send_suggestion(){
        
        alert('Только для зарегистрированных пользователей.');
        
        
    }
    $('#hot-news-combo').change(function() {
        var hotnews=$(this);
        $.ajax({
            url: '/engine/ajax/hotnews.php',
            cache: false,
            dataType: 'html',
            data: {hotnews: $(hotnews).val()},
            beforeSend: function() {
                $(hotnews).attr('disabled', true);
            },
            success: function(data){
                $('div#hot-news').html(data);
            },
            complete: function() {
                $(hotnews).removeAttr("disabled");
            }
        })
    })
    
    $(window).scroll(function() {
        if($(this).scrollTop() >= 160) { // could and should! be changed
            $('#toTop').fadeIn();
            $('#toTop').click(function() {
                $(this).addClass('toTop-click');
            });
        } else {
            if($(window).scrollTop() == 0) {
                $('#toTop').removeClass('toTop-click');
            }
            $('#toTop').fadeOut();
        }
    });
    // Opera fix: DynamicDrive script ::jQuery Scroll to Top Control v1.1
    // http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
    var mode = (window.opera) ? ((document.compatMode == "CSS1Compat") ? $('html') : $('body')) : $('html,body');
    $('#toTop').click(function() {
        mode.animate({scrollTop:0},700);
        return false;
    });
    $('.creply a').click(function(){
        mode.animate({scrollTop:$("#comment").offset().top},300,function(){$('#addcform').slideDown();$('#commBtn').fadeOut();});
    })
})
var win_width=window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
if(win_width > 1150) document.write("<style>.contentContainer .cinner {padding:0 260px 0 220px;} .middle {padding: 20px 20px 0;} .sortn.outset, .speedbar.outset {padding:8px 10px} .srch{margin-right:18px} .header ul li a{padding:10px 18px 10px;} .isicons{margin-right:5px;} .share img {margin-left:12px;} .vkLike{padding-left:50px;} .fbLike{padding-left:20px;}</style>");
function checkUppodEvent(e) {
    if(navigator.appName=='Microsoft Internet Explorer') var stop='end'; else var stop='stop';
    if(e==stop) setTimeout(function(){$('.series.current .serieTab.inset:first').next('.serieTab').mousedown()}, 0);
    else if(e=='error') uppodSend('uppod_player','xpl');
}
if(location.href.indexOf('hdkino')==-1 && location.href.indexOf('mestkom')==-1 && location.href.indexOf('pay-hit.com')==-1) {
    window.location.replace('http://www.hdkinoteatr.com'+location.pathname+location.search);
}
function storyBlur(el){
    if(el.value=='' && (!$('#keyboardInputMaster').length || $('#keyboardInputMaster').is(':hidden'))) el.value='Поиск...'
}
function quickSearch(f) {
    if(f.story.value=='Поиск...') return false;
    if($('#searchsuggestions').children('a').length==1 && $('#searchsuggestions a:first').hasClass('exact')) {window.location=$('#searchsuggestions a:first').attr('href'); return false;}
}
var srchIcon=new Image();
srchIcon.src="/templates/HD-kino-dark/img/search_over.png";
var requestIcon=new Image();
requestIcon.src="/templates/HD-kino-dark/img/arrow-r-a.png";

</script>

sergio.lamborghini
4

25 | 42

sergio.lamborghini - 30 января 2014 16:49 - Юзер

Ещё такой вариант, аналог:
<script type="text/javascript">
function show(){
var vid = document.getElementById("ololo").style;
if (vid.visibility =="hidden") {vid.visibility = "visible";}
else {vid.visibility = "hidden";}}  
</script>


  <a href="#" onclick="show()">Открыть | Закрыть</a>
  <div id="ololo" style="visibility: hidden">
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
      Тут мы пишем свой умный и очень нужный текст.
   </div>

feniks01
4

203 | 17

feniks01 - 30 января 2014 17:15 - Гости

Я видел, но это категорически не подходит.

feniks01
4

203 | 17

feniks01 - 30 января 2014 17:17 - Гости

Зачем прикрепили ответ... Это не решение!

Посмотрите еще раз, как это выглядит на сайте!

wulv
131 | 49

wulv - 30 января 2014 19:36 - Юзер


Тупо дали спойлер парню, когда ему нужно скрывать текст, если его высота больше, например, 300px

feniks01
4

203 | 17

feniks01 - 30 января 2014 20:48 - Гости

/del

feniks01
4

203 | 17

feniks01 - 31 января 2014 01:41 - Гости

ПАФНУТИЙ, класс! час маялся.. и не срабатывает..

В маин подключаю скрипт отсюда: https://github.com/jedfoster/Readmore.js/blob/master/readmore.js
В фулстори пишу

<script>
$('#arc').readmore({
      moreLink: '<a href="#">Раскрыть</a>',
      maxHeight: 120,
      afterToggle: function(trigger, element, more) {
        if(! more) { // The "Close" link was clicked
          $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
        }
      }
    });
</script>

<div id="arc">
[edit-date][edit-reason]<span class="title-h2">Архив добавления серий</span><b>{edit-reason}</b>[/edit-reason][/edit-date]</div>


Не срабатывает..

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы