<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
body *{
margin:0px;
}
.containerScroll {
width:150px;
height:250px;
}
.containerScroll div.items{
height:220px;
overflow:hidden;
}
.containerScroll > div.items ul{
}
.containerScroll div.items ul li.first{
color:red
}
</style>
</head>
<script>
var t_scroll;
$(
function(){
t_scroll = setInterval(function(){
//alert($('.containerScroll > div.items ul li:first-child' ).length);
//alert($('.containerScroll')[0].offsetHeight);
//alert($('.containerScroll > div.items')[0].offsetHeight);
//alert($('.containerScroll > div.items ul li:first-child')[0].offsetHeight);
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
$('.containerScroll > div.items').bind('mouseenter' , function(e){
clearInterval(t_scroll);
$(this).css('overflow','auto');
})
$('.containerScroll > div.items').bind('mouseleave' , function(e){
$(this).css('overflow','hidden');
t_scroll = setInterval(function(){
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
})
})
</script>
<body>
<div class="containerScroll">
<div class="items">
<ul>
<li class="first">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
</ul>
</div>
</div>
</body>
<html>
*********************************************************************************
Above code does not display list indentation.Fixed it in below code
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
body *{
margin:0px;
}
.containerScroll {
width:150px;
height:250px;
}
.containerScroll div.items{
height:220px;
overflow:hidden;
}
.containerScroll > div.items ul{
}
.containerScroll div.items ul li.first{
color:red
}
.ie.containerScroll {
width:150px;
height:250px;
}
.ie.containerScroll div.items{
height:220px;
overflow:hidden;
}
.ie.containerScroll div.items ul{
border:1px solid red;
}
.ie.containerScroll div.items ul li{
margin:0 0 0 25px;
border:1px solid blue;
}
.ie.containerScroll div.items ul li.first{
color:red;
}
</style>
</head>
<script>
var t_scroll;
$(
function(){
t_scroll = setInterval(function(){
//alert($('.containerScroll > div.items ul li:first-child' ).length);
//alert($('.containerScroll')[0].offsetHeight);
//alert($('.containerScroll > div.items')[0].offsetHeight);
//alert($('.containerScroll > div.items ul li:first-child')[0].offsetHeight);
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
$('.containerScroll > div.items').bind('mouseenter' , function(e){
clearInterval(t_scroll);
$(this).css('overflow','auto');
})
$('.containerScroll > div.items').bind('mouseleave' , function(e){
$(this).css('overflow','hidden');
t_scroll = setInterval(function(){
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
})
})
</script>
<body>
<!--[if IE]>
<div class="ie containerScroll">
<![endif]-->
<!--[if !IE]><!-->
<div class="containerScroll">
<!--<![endif]-->
<div class="items">
<ul>
<li class="first">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
</ul>
</div>
</div>
</body>
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
body *{
margin:0px;
}
.containerScroll {
width:150px;
height:250px;
}
.containerScroll div.items{
height:220px;
overflow:hidden;
}
.containerScroll > div.items ul{
}
.containerScroll div.items ul li.first{
color:red
}
</style>
</head>
<script>
var t_scroll;
$(
function(){
t_scroll = setInterval(function(){
//alert($('.containerScroll > div.items ul li:first-child' ).length);
//alert($('.containerScroll')[0].offsetHeight);
//alert($('.containerScroll > div.items')[0].offsetHeight);
//alert($('.containerScroll > div.items ul li:first-child')[0].offsetHeight);
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
$('.containerScroll > div.items').bind('mouseenter' , function(e){
clearInterval(t_scroll);
$(this).css('overflow','auto');
})
$('.containerScroll > div.items').bind('mouseleave' , function(e){
$(this).css('overflow','hidden');
t_scroll = setInterval(function(){
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
})
})
</script>
<body>
<div class="containerScroll">
<div class="items">
<ul>
<li class="first">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
</ul>
</div>
</div>
</body>
<html>
*********************************************************************************
Above code does not display list indentation.Fixed it in below code
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<style>
body *{
margin:0px;
}
.containerScroll {
width:150px;
height:250px;
}
.containerScroll div.items{
height:220px;
overflow:hidden;
}
.containerScroll > div.items ul{
}
.containerScroll div.items ul li.first{
color:red
}
.ie.containerScroll {
width:150px;
height:250px;
}
.ie.containerScroll div.items{
height:220px;
overflow:hidden;
}
.ie.containerScroll div.items ul{
border:1px solid red;
}
.ie.containerScroll div.items ul li{
margin:0 0 0 25px;
border:1px solid blue;
}
.ie.containerScroll div.items ul li.first{
color:red;
}
</style>
</head>
<script>
var t_scroll;
$(
function(){
t_scroll = setInterval(function(){
//alert($('.containerScroll > div.items ul li:first-child' ).length);
//alert($('.containerScroll')[0].offsetHeight);
//alert($('.containerScroll > div.items')[0].offsetHeight);
//alert($('.containerScroll > div.items ul li:first-child')[0].offsetHeight);
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
$('.containerScroll > div.items').bind('mouseenter' , function(e){
clearInterval(t_scroll);
$(this).css('overflow','auto');
})
$('.containerScroll > div.items').bind('mouseleave' , function(e){
$(this).css('overflow','hidden');
t_scroll = setInterval(function(){
if( $('.containerScroll > div.items')[0].offsetHeight < ($('.containerScroll > div.items ul')[0].offsetHeight))
$('.containerScroll > div.items ul li:first-child' ).appendTo($('.containerScroll > div.items ul'))
},500)
})
})
</script>
<body>
<!--[if IE]>
<div class="ie containerScroll">
<![endif]-->
<!--[if !IE]><!-->
<div class="containerScroll">
<!--<![endif]-->
<div class="items">
<ul>
<li class="first">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
</ul>
</div>
</div>
</body>
<html>
No comments:
Post a Comment