Home/ Questions/Q 858149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T08:30:15+00:00

I am using this code to show latest user comments on my website –

  • 0

I am using this code to show latest user comments on my website – Some comments are 1 liners and others are longer.

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

If you look at the source code – the height is set to 90px and overflow is set to hidden

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

Now I want to show the entire text here – so I changed the overflow attribute to visible.

Since the height is set to 90px, if any comment is longer, its overrides the previous entry – meaning you can see the last line of this long entry on top of the previous entry.

This happens only in IE browser – in chrome – it automatically adjust the height.
One option I have is to increase the height from 90px to say 130px – but thats not a good solution – because the entry that has only 1 line will have so much blank space and entries that are even longer might still go over the 130px height limit.

I cant change that height attribute to auto or something cos that is being used in the script for creating the scrolling effect.

Is there a way to fix this in IE
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have you tried to set your css to min-height:90px ? like this it will have 90px if one line of text is required, but if more are required, it will grow fluid!

    And remove that over-flow hidden!

    EDITED — WORKING EXAMPLE:

    Ok, Here’s the complete code properly tested (and just like I’ve tool you, just setting min-height, it works fine 🙂 (sorry for the delay, but I’ve been extremely busy… :/

    <!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>

    I’ve not formated the style for good visual appearance, but as you can see, some items are bigger that others.. 🙂

    Just copy the code to .html file and view it!

    • 0