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

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


     30.01.2014    Все вопросы » Общие вопросы по вёрстке    2420

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

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

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


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

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

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


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

8 комментариев

wulv
Юзер

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

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

feniks01
Гости

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
Юзер

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
Гости

feniks01 - 30 января 2014 17:15 -

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

feniks01
Гости

feniks01 - 30 января 2014 17:17 -

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

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

wulv
Юзер

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


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

feniks01
Гости

feniks01 - 30 января 2014 20:48 -

/del

feniks01
Гости

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>


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

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

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

наверх