How can I degrade from Jquery carousel to css scrolling list gracefully

Question

update

I added these two lines to the script below: I ran the debugger and the execution appears to be removing the attributes, but the webpage continues to show the scroll bar.

       $("#newsticker-demo").removeAttr("overflow-y");
        $("#newsticker-demo").removeAttr("height");

---

<script type="text/javascript" language="javascript">
    $(function () {

        $(".newsticker-jcarousellite").jCarouselLite({
            vertical: true,
            visible: 1,
            auto: 1,
            speed: 8000,
            circular: true
        });
        $("#newsticker-demo").removeAttr("overflow-y");
        $("#newsticker-demo").removeAttr("height");
    });
</script> 

-- IN IE8 is my number 1 concern right now --

Hello, On our homepage there is a vertical scrolling carousel. What I want to do is have it gracefully fail to use only css if javascript is turned off. So that the result is text with a vertical scroll bar the user can click and drag to move through the list. Similar to what you mind find on a textarea element, that has too much data to display at once.

link to homepage. http://beta.sc-pa.com/home/pasite-home.asp

Once this is done.

Answer 1

I would start with a solution that works sans-Javascript, then apply your scrolling carousel, manipulating the DOM if necessary. The basic concept is easy: a fixed height container with overflow-y: auto

<style>
#foo {
    width: 100px;
    height: 150px;
    overflow-y: scroll;
}
#foo.carouselled {
    overflow: hidden;
}
</style>

<script>
$(function() {
    $('#foo').jCarouselLite({
        vertical: true,
        visible: 1,
        auto: 1,
        speed: 8000,
        circular: true
    }).addClass('carouselled');
});
</script>

<div id="foo">
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
    <p>bar</p>
</div>

See example.

The styles are CSS values rather than attributed direct on the element, to manipulate styles with jQuery use the css() function.