tags:

views:

64

answers:

1
Q: 

Jquery Spy - vertical auto scrolling of text - how to set dynamic height

hey guys,

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

+1  A: 

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"&gt;
<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"&gt;&lt;/script&gt;

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

Zuul  2010-06-20 18:48:36
Thanks Zuul - I have tried that but it does not make any difference - I cannot remove the height attribute as the script stops working then - so along with the height attribute if I add min-height - its not making any difference
Gublooo  2010-06-20 18:53:58
the script does not work if you replace height:90px with min-height:90px ? If so, you need to adjust that script...Can't you post the script code ?
Zuul  2010-06-20 18:57:28
Just do a view source code to the link I posted - it will show the entire code - Thanks
Gublooo  2010-06-20 19:08:34
Ok, I sse that you get the height of the element to perform your animation, just get the height being used by that element and pass that value to your existent script: $("myelementtohide").height(); <- it will return the height being used by your element, and not the height set at your css... and like this you can set min-height as suggested and solve your issue :) give it a try!!
Zuul  2010-06-20 19:17:31
Thanks Zuul - can you show me exactly what change I need to make - I'm not well versed with javascript and am just using that script out of the box from this website - So which part of the code do I need to change and to what - Thanks
Gublooo  2010-06-20 19:21:35
I took a better look to your script, and It allready gets the view height of your element, the problem seems to be the fact that your script get the height of your elements container and the height of your element to be remove and works with that... with a container with fixed height, you'll always have problems with your script... let me test all of this theory locally and get back to you!
Zuul  2010-06-20 19:36:04
Thanks Zuul - also this is not my script - I was just searching for something and found this on google - thanks for your help
Gublooo  2010-06-20 20:22:14
Ok, I've edited my answer with a working sample of your code, copy )
Zuul  2010-06-23 11:14:50
Sorry Zuul - completely lost track of this question - appreciate your help - will go ahead and accept your answer - Thanks again
Gublooo  2010-07-12 07:54:42
No problem... tks! :)
Zuul  2010-07-12 09:26:12

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?