gallery that can be helpful for displaying your notices or news to the users. Thanks to the animate() function
of Jquery
that made our livess free of heavy Flash
elements. Script is easy to understand and implement, still you can write to me if you face any problem.Now lets watch it working.
Live Demo. Download Script
jQuery Code
<script type="text/javascript" src="../jquery.js"></script>
<script language="javascript">
$(document).ready(function () {
var speed = 300;
var first = 0;
var pause = 3000;
setInterval(tick, pause);
function tick() {
first = $('ul#ticker li:first').html();
$('ul#ticker li:first').animate({
opacity: 0
},
speed).fadeOut('medium', function () {
$(this).remove();
last = '<li class="news">' + first + '</li>';
$('ul#ticker').append(last);
});
}
});
</script>
HTML Code
<body> <ul id="ticker"> <li class="news"> <img src="drop.PNG" /> <a href="#" class="news-title">Sexy Drop Down</a> <span class="news-text">It is the sexy drop down menu created totally with CSS without using any Javascript. Just try it out.</span> </li> <li class="news"> <img src="ex2.PNG" /> <a href="#" class="news-title">Expanding TextBox</a> <span class="news-text">Facebook like expanding textbox is first choice of many web developers. Here is one for you.</span> </li> <li class="news"> <img src="loadmore.PNG" /> <a href="#" class="news-title">Load More Results</a> <span class="news-text">Facebook/Twitter like 'load more results' script can be found here.</span> </li> <li class="news"> <img src="twitlogin.PNG" /> <a href="#" class="news-title">Twitter Login</a> <span class="news-text">Twitter like login box can be helpful to you.</span> </li> </ul> </body>
CSS Code
body {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
}
#ticker {
height:110px;
width:400px;
overflow:hidden;
border:solid 15px #C9C9C9;
padding:6px 10px 14px 10px;
}
#ticker li {
border:0;
margin:0;
padding:0;
list-style:none;
height:110px;
padding:5px;
}
#ticker a {
color:#0D0D0D;
text-transform: uppercase;
}
#ticker .news-title {
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:16px;
}
#ticker .news-text {
display:block;
color:#666666;
}
#ticker img {
float:left;
margin-right:14px;
padding:4px;
border:solid 1px #DEDEDE;
height:50px;
width:50px;
}
3 comments
thanx for the nice script
Great tutorial
thanks for sharing
nice tick for rotating the news. Keep it up;)
We would love to hear from you...