Jquery Spy - вертикальная автопрокрутка текста - как установить динамическую высоту - PullRequest
Новая
       5

Jquery Spy - вертикальная автопрокрутка текста - как установить динамическую высоту

0 голосов
/ 20 июня 2010

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

http://jqueryfordesigners.com/demo/simple-spy.html

Если вы посмотрите на исходный код - высота установлена ​​на 90 пикселей, а переполнение скрыто 

#sidebar li {
    height: 90px;
    overflow: hidden;
}

Теперь я хочу показать весь текст здесь - поэтому я изменил атрибут переполнения на видимый.

Поскольку высота установлена ​​в 90px, если какой-либо комментарий длиннее, он переопределяет предыдущую запись - это означает, что вы можете увидеть последнюю строку этой длинной записи поверх предыдущей записи.

Это происходит только в браузере IE - в chrome - он автоматически регулирует высоту. Один из вариантов, который у меня есть, - это увеличить высоту с 90 до 130 пикселей, но это не очень хорошее решение, поскольку запись, содержащая только одну строку, будет иметь столько пустого пространства, а записи, которые еще длиннее, все равно могут превысить предел высоты в 130 пикселей .

Я не могу изменить этот атрибут высоты на auto или что-то еще, потому что он используется в скрипте для создания эффекта прокрутки.

Есть ли способ исправить это в IE Спасибо

1 Ответ

1 голос
/ 20 июня 2010

Вы пытались установить css на min-height: 90px? таким образом, он будет иметь 90px, если требуется одна строка текста, но если потребуется больше, он станет плавным!

И удалите этот скрытый перелив!

РЕДАКТИРОВАНИЕ - ПРИМЕР РАБОТЫ:

Хорошо, вот полный код, должным образом протестированный (и точно так же, как я показал вам инструмент, просто установив min-height, он работает отлично :) (извините за задержку, но я был очень занят ...: / 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Simply Spy</title>
<style type="text/css" media="screen">
<!--

/* Style and images take for example purposes only from http://www.quicksnapper.com */

body { font: 1em "Lucida Grande",Lucida,Verdana,sans-serif; font-size: 62.5%; line-height: 1;}
input, textarea { font-family: Arial; font-size: 125%; padding: 7px; }
label { display: block; }
p { margin: 0; margin-bottom: 4px;}
h5 { margin: 0; font-weight: normal; }
a:link,
a:hover,
a:visited {
    color: #fff;
}
#sidebar {
    color: #AFB0B1;
    background: #0D171A;
    float:left;
    margin:0 0 24px;
    padding:15px 10px 10px;
    width:300px;
}

#sidebar ul {
    font-size:1.2em;
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
}

.rating {
    background-image:url(http://static.jqueryfordesigners.com/demo/images/simple-spy/info_bar_stars.png);
    background-repeat:no-repeat;
    height:12px;
    text-indent:-900em;
    font-size:1em;
    margin:0 0 9px;
}

.none {
        background-position: 82px 0px;
}

.four {
        background-position: 82px -48px;
}

.five {
        background-position: 82px -60px;
}

.tags {
        color: #fff;
        margin: 0.5em;
}

.tags a,
.tags span {
        background-color: #333839;
        font-size: 0.8em;
        padding: 0.1em 0.8em 0.2em;
}

.tags a:link,
.tags a:visited {
        color: #fff;
        text-decoration: none;
}

.tags a:hover,
.tags a:active {
        background-color: #3e4448;
        color: #fff;
        text-decoration: none;
}

#sidebar li {
    min-height: 90px;
    overflow: hidden;
}

#sidebar li h5 {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#sidebar li h5 a {
    color:#A5A9AB;
    text-decoration:none;
}

#sidebar li img {
    float:left;
    margin-right:8px;
}

#sidebar li .info {
    color:#3E4548;
    font-size:1em;
}

#sidebar .info a,
#sidebar .info a:visited {
    color:#3E4548;
    text-decoration: none;
}

#sidebar .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#sidebar {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
}

.tags span,
.tags a {
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8">
$(function () {
    $('ul.spy').simpleSpy().bind('mouseenter', function () {
        $(this).trigger('stop');
    }).bind('mouseleave', function () {
        $(this).trigger('start');
    });
});

(function ($) {

$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 4;
    interval = interval || 4000;

    function getSpyItem($source) {
        var $items = $source.find('> li');

        if ($items.length == 1) {
            // do an hit to get some more
            $source.load('ajax-spy-helper.php');
        } else if ($items.length == 0) {
            return false;
        }

        // grab the first item, and remove it from the $source
        return $items.filter(':first').remove();
    }

    return this.each(function () {
        // 1. setup
            // capture a cache of all the list items
            // chomp the list down to limit li elements
        var $list = $(this),
            running = true,
            height = $list.find('> li:first').height();

        // TODO create the $source element....
        var $source = $('<ul />').hide().appendTo('body');

        $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').appendTo($source);

        $list.bind('stop', function () {
            running = false;
        }).bind('start', function () {
            running = true;
        });

        // 2. effect
        function spy() {
            if (running) {
                var $item = getSpyItem($source);

                if ($item != false) {
                    // insert a new item with opacity and height of zero
                    var $insert = $item.css({
                        height : 0,
                        opacity : 0,
                        display : 'none'
                    }).prependTo($list);

                    // fade the LAST item out
                    $list.find('> li:last').animate({ opacity : 0}, 1000, function () {
                        // increase the height of the NEW first item
                        $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

                        // AND at the same time - decrease the height of the LAST item
                        // $(this).animate({ height : 0 }, 1000, function () {
                            // finally fade the first item in (and we can remove the last)
                            $(this).remove();
                        // });
                    });
                }
            }

            setTimeout(spy, interval);
        }

        spy();
    });
};

})(jQuery);



</script>
</head>
<body>
    <h1>Simple Spy</h1>

    <div id="sidebar">
        <ul class="spy">
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>
                <li>
                        <a href="#" title="View round"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/1.png" title="" /></a>
                        <h5><a href="#" title="View round">round</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>
                        <p class='rating none'>Not Rated</p>

                        <p class="tags"></p>
                </li>

                <li>

                        <a href="#" title="View reflet"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/2.png" title="" /></a>
                        <h5><a href="#" title="View reflet">reflet</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>

                        <p class='rating none'>Not Rated</p>
                        <p class="tags"><a href="#" title='Find more images tagged Tactile'>Tactile</a></p>
                </li>

                <li>

                        <a href="#" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/3.png" title="" /></a>
                        <h5><a href="#" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>

                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit neue's userpage.">neue</a></p>
                        <p class='rating four'>Four Stars</p>
                        <p class='rating four'>Four Stars</p>
                        <p class="tags"><a href="#" title='Find more images tagged Kate Moross'>Kate Moross</a></p>
                </li>

                <li>

                        <a href="#" title="View Untitled"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/4.png" title="" /></a>

                        <h5><a href="#" title="View Untitled">Untitled</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit mike1052's userpage.">mike1052</a></p>
                        <p class='rating none'>Not Rated ah ad hfdsa fhjad jf adjf ad fja dj ad fj adfj ad j ad ja dj ad ja dj ad j ad ja dj ad j</p>
                        <p class="tags"></p>
                </li>

                <li>

                        <a href="#" title="View My Tutorial's Library"><img width="70" height="70" src="http://static.jqueryfordesigners.com/demo/images/simple-spy/5.png" title="" /></a>
                        <h5><a href="#" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
                        <p class="info">Nov 29th 2008 by <a href="#" title="Visit FrancescoOnAir's userpage.">FrancescoOnAir</a></p>
                        <p class='rating five'>Five Stars</p>
                        <p class="tags"></p>
                </li>
        </ul>
    </div>
</body>
</html>

Я не форматировал стиль для хорошего внешнего вида, но, как вы можете видеть, некоторые элементы больше других ...:)

Просто скопируйте код в файл .html и просмотрите его!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...