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

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


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

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

на сайте у меня заголовки различаются длиной и я спрятал их через 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
72

243 | 128

Attyla - 13 августа 2015 14:47 - Юзер

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

Googledono
4

117 | 8

Googledono - 13 августа 2015 18:00 - Юзер

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

vitnet
218

2174 | 930

vitnet - 13 августа 2015 16:58 - Эксперт

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

Attyla
72

243 | 128

Attyla - 13 августа 2015 17:27 - Юзер

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

Googledono
4

117 | 8

Googledono - 13 августа 2015 18:09 - Юзер

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

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

Attyla
72

243 | 128

Attyla - 13 августа 2015 20:02 - Юзер

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

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

Googledono
4

117 | 8

Googledono - 13 августа 2015 21:01 - Юзер

Спасибо!

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

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