How can I degrade from Jquery carousel to css scrolling list gracefully
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/p开发者_开发问答asite-home.asp
Once this is done.
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.
精彩评论