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

Как правильно сделать плавающий заголовок?


     13.08.2015    Стили (CSS), jQuery    1100

вопрос
Всем привет,

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

http://jsfiddle.net/MaHarder/4yphcyys/2/

Может, кто нибудь подскажет, в каком направлении искать?

Ответил: Sander


<style>
.h1top{
    height: 36px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.h1top:after{
    content: "";
    display: block;
    position: absolute;
    top:0;
    right: 0;
    width: 50px;
    height: 100%;
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.h1top h1{
    display: inline-block;
}
</style>


<script>
var title_offset_interval = null;
$(document)
.on('mouseenter',".h1top h1",function(){
    var $this = $(this);
    clearInterval(title_offset_interval);
    if($this.width()>$this.parent().width()){
        title_offset_interval = setInterval(function(){
            if($this.width()+parseInt($this.css('margin-left'))<$this.parent().width()) clearInterval(title_offset_interval);
            $this.css({'margin-left': Math.floor(parseInt($this.css('margin-left'))-1)+'px'});
        },10);
    }
})
.on('mouseleave',".h1top h1",function(){
    var $this = $(this);
    clearInterval(title_offset_interval);
    if(parseInt($this.css('margin-left'))<0){
        title_offset_interval = setInterval(function(){
            if(parseInt($this.css('margin-left'))>=0) clearInterval(title_offset_interval);
            $this.css({'margin-left': Math.floor(parseInt($this.css('margin-left'))+1)+'px'});
        },10);
    }
})
</script>

<div class="h1top">
    <h1>Как правильно сделать плавающий заголовок? Как правильно сделать плавающий заголовок? Как правильно сделать плавающий заголовок? Как правильно сделать плавающий заголовок?</h1>
</div>

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

Attyla
Юзер

Attyla - 13 августа 2015 14:47 -

http://www.dle-news.ru/extras/online/index.html?relatednews.html
{title limit="x"} - выводит заголовок новости, сокращенный до указанного количества в теге X символов. При этом сокращение заголовка производится до завершения логического слова, а не обрывается посередине.

Googledono
Юзер

Googledono - 13 августа 2015 18:00 -

я знаком с документацией DLE, если бы это было там - тут бы вопроса не было бы.

vitnet
Эксперт

vitnet - 13 августа 2015 16:58 -

Attyla,
Это не выход, ТС просит совсем другое.

Attyla
Юзер

Attyla - 13 августа 2015 17:27 -

Другой вариант это выключить анимацию если длина заголовка не превышает X-количество символов. Думаю что ТС сам должен уточнить что ему нужно, так как из вопроса не понятно что он именно хочет. Считаю что вопросы должны быть сформулированы так, чтобы не возникало разных интерпретаций, можно и в самом вопросе отсекать ненужные варианты. Вы что поняли?

Googledono
Юзер

Googledono - 13 августа 2015 18:09 -

если честно, я не знаю как это назвать. примером может послужить тот же контакт. когда ставишь виджет с группой себе на сайт и заголовок группы длиннее ширины блока, то он обрывается. когда наводишь - он скользит влево. в общем, я это и так в примере указал.однако, я выставил марджин только для одного заголовка, который очень длинный. но ведь не все заголовки длинные. смотри опять же мой пример: http://jsfiddle.net/MaHarder/4yphcyys/2/

в примере всё на css

Attyla
Юзер

Attyla - 13 августа 2015 20:02 -

https://jsfiddle.net/42w2qesj/3/ - Мой вариант.

// 50 - изменить на нужное значение

Googledono
Юзер

Googledono - 13 августа 2015 21:01 -

Спасибо!

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

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

наверх