Thursday, June 10, 2010

Animated News Gallery with jQuery & CSS

6/10/2010

This is a very helpful and 'sweet' news 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;
}

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

3 comments :

  1. thanx for the nice script

    ReplyDelete
  2. Great tutorial
    thanks for sharing

    ReplyDelete
  3. nice tick for rotating the news. Keep it up;)

    ReplyDelete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism