top_menu

Thursday, 1 November 2012

How to create a simple news ticker using jQuery

.

Very simple, easy to use news ticker created using jQuery with awesome animation effect. Adds much more effect and attraction to your website. It accommodates a lot of content in a small space. The same has been adopted by facebook to showcase the recent activity of friends. You will find the code comparatively easy to understand.





The HTML

<div id="newsticker-container">
<ul>

<li>
<div>
1) <a href="http://www.2lessons.info/2012/03/facebook-type-vertical-navigation-menu.html">Facebook type vertical navigation menu created using jQuery</a>
</div>
</li>

<li>
<div>
2) <a href="http://www.2lessons.info/2012/05/how-to-create-facebook-style-activity.html">facebook style activity notification</a>
</div>
</li>

<li>
<div>
3) <a href="http://www.2lessons.info/2011/08/facebook-style-drop-down-menu-using.html">CSS jQuery Drop Down Menus</a>
</div>
</li>  

<li>
<div>
4) <a href="http://www.2lessons.info/2012/09/facebook-style-alert-confirm-box-using.html">Facebook Style Alert Confirm Box using jQuery</a>
</div>
</li>

<li>
<div>
5) <a href="http://www.2lessons.info/2011/12/facebook-like-red-notification-simple.html">facebook like red notification created using CSS only</a>
</div>
</li>

<li>
<div>
6) <a href="http://www.2lessons.info/2012/09/how-to-create-google-like-top-bar-using.html">Google.com like top bar with drop down menu using CSS</a>
</div>
</li>

<li>
<div>
7) <a href="http://www.2lessons.info/2012/09/gmail-type-select-all-checkbox-using.html">Gmail type select all checkbox using jQuery</a>
</div>
</li>

</ul>
</div>

The Javascript


(function($){

$.fn.newsTicker = function(options) {

var defaults = {

speed: 700,

pause: 4000,

NoOfItems: 4,

isPaused: false,

height: 0

};



var options = $.extend(defaults, options);

var obj = $(this);

var maxHeight = 0;



obj.css({overflow: 'hidden', position: 'relative'})

 .children('ul').css({position: 'absolute', margin: 0, padding: 0})

 .children('li').css({margin: 0, padding: 0, cursor:'pointer'});



// Get the height if the list items

 maxHeight = obj.children('ul').children('li').height();

// Set the height of the newsticker

 obj.height(maxHeight * options.NoOfItems);



// The main function which executes the move-up animation

var interval = setInterval(function(){

  moveUp(obj, maxHeight, options);

}, options.pause);



// To activate mouse pause

 obj.bind("mouseenter",function(){

  options.isPaused = true;

 }).bind("mouseleave",function(){

  options.isPaused = false;

 });

moveUp = function(container, height, options){

if(options.isPaused)

 return;

var obj_ul = container.children('ul');

var copy_first = obj_ul.children('li:first').clone(true);

obj_ul.animate({top: '-=' + height + 'px'}, options.speed, function() {

 $(this).children('li:first').remove();

 $(this).css('top', '0px');

});

obj_ul.children('li:first').fadeOut(options.speed);

if(options.height == 0)

{

obj_ul.children('li:eq(' + options.NoOfItems + ')').hide().fadeIn(options.speed).show();

}

copy_first.appendTo(obj_ul); // Copy the first element back to the main ul object

};

};

})(jQuery);

20 comments:

  1. An interesting discussion is definitely worth comment.

    I believe that you should write more about this subject matter, it may not be a taboo matter but usually
    people don't discuss such topics. To the next! Many thanks!!
    Also see my web site: Dir Print

    ReplyDelete
  2. Very nice post. I just stumbled upon yоur blog and wanted to say that I
    have really enjoyеd surfіng аround your blog pοѕts.
    In anу case I'll be subscribing to your feed and I hope you write again very soon!
    Also visit my webpage - product reviews

    ReplyDelete
  3. I like the valuable info you provide in your articles.
    I'll bookmark your weblog and check again here frequently. I am quite sure I will learn many new stuff right here! Good luck for the next!
    Here is my web site : Facebook Page Entreprise

    ReplyDelete
  4. Please let me know if you're looking for a author for your site. You have some really great articles and I feel I would be a good asset. If you ever want to take some of the load off, I'd love to write some content
    for your blog in exchange for a link back to mine.

    Please blast me an email if interested. Thank you!
    Stop by my weblog : investir maroc secteur

    ReplyDelete
  5. I blog often and I truly thank you for your content.
    This great article has really peaked my interest.
    I am going to bookmark your site and keep checking
    for new details about once per week. I subscribed to your RSS feed too.
    My web site > markthelink.com

    ReplyDelete
  6. I am really pleased to glance at this weblog posts which includes plenty of helpful facts, thanks for providing such data.
    Here is my web site :: sac Cadeau pas cher

    ReplyDelete
  7. hello ,
    did you have noticed that there is a tick (jump) after line no 2?

    ReplyDelete
  8. I've been browsing online more than three hours today, yet I never found any interesting article like yours. It's pretty worth enough for me.
    In my view, if all web owners and bloggers made good content as you did,
    the web will be much more useful than ever before.
    My website :: uk merchant cash advance

    ReplyDelete
  9. Hmm it seems like your blog ate my first comment (it was extremely long)
    so I guess I'll just sum it up what I wrote and say, I'm thoroughly enjoying
    your blog. I too am an aspiring blog writer but I'm still new to the whole thing. Do you have any tips and hints for beginner blog writers? I'd definitely appreciate it.
    Also see my webpage > Oyunu

    ReplyDelete
  10. Nice post. I learn something new and challenging on websites
    I stumbleupon everyday. It's always interesting to read articles from other writers and practice something from their sites.
    Also visit my web blog :: document

    ReplyDelete
  11. Wow! This blog looks just like my old one! It's on a completely different subject but it has pretty much the same page layout and design. Wonderful choice of colors!
    Feel free to visit my blog SEO Info

    ReplyDelete
  12. Remarkable! Its truly awesome piece of writing, I have got much clear idea on the topic of from this piece of writing.
    Also see my page: games online

    ReplyDelete
  13. Heya! I'm at work browsing your blog from my new iphone 3gs! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the fantastic work!
    Feel free to visit my weblog : http://asuntoturkista.net

    ReplyDelete
  14. Of course this topic can be extremely challengeable for most of us, my opinion is there should be a middle or common ground that many of us all will find. I appreciate that you’ve added useful, relevant and rational commentary here though. Greatly because of you.
    cash advance loan online

    ReplyDelete
  15. This website was... how do you say it? Relevant!

    ! Finally I've found something that helped me. Many thanks!

    Feel free to visit my website :: vexxhost review sites

    ReplyDelete
  16. Good post. I learn something totally new and challenging on blogs I stumbleupon
    everyday. It's always useful to read through articles from other writers and practice a little something from their websites.

    My web page: home business
    Also see my web site > home business system

    ReplyDelete
  17. I found your site on http://www.2lessons.info/ and I'm so happy I did. It's like you read my mind.
    You appear to know so much concerning this, like you authored the book on it or something.

    While I think some extra media like some pics or a couple of
    videos, this will be a fantastic resource. I will
    certainly come back.

    My page: 38242

    ReplyDelete
  18. Hello there, I just wanted to see if you ever have any
    trouble with hackers? My last blogspot blog at http:
    //www.2lessons.info/ was hacked and I wound
    up losing a few months of hard work due to no back up.
    Do you have any ideas to stop intrudersI must ask
    though, but where exactly did you obtain your blog style:
    did you see it elsewhere or did you make it personally?
    With a theme like the one you have, my blog could really stand out
    more. Kindly tell me the place where you got your look.


    Feel free to surf to my website - licence

    ReplyDelete