Blogroll

Monday, November 7, 2011

news scroller with p tag( simple code)

Jquery is powerful tool to animate for website display, have plugin support news scroller, hovever almost is very heavy and does't support scroll with p tag. To day, I guide the way to create news scroller.
Demo link
This is my html
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
And this is css.
#p_containter{
 height:100px;
 width:200px;
 overflow:hidden;
 }
 #p_containter .description p{
  padding:0px;
  cursor: text;
 }
And finally is javascript code
 var height_content  =$('#p_containter p').height(); 
   var height_border =$('#p_containter').height();
   var current_margin = null;
   var is_scroll =true;
   $(function() {
   height_content  =$('#p_containter p').height(); 
   height_border =$('#p_containter').height();
   // Slider
   setTimeout('ticker()', 200);
   $("#p_containter p").mouseenter(function(){
    is_scroll =false;    
   }).mouseleave(function(){
    is_scroll =true;
   });
   });
   function ticker(){
    if (is_scroll)
    {
    if (current_margin == null)
    current_margin =  height_border;
    current_margin -=1;
    if (current_margin < -height_content )
    {
     current_margin = height_border;
    }
    $('#p_containter p').css('margin-top', current_margin);
    }
    setTimeout('ticker()', 100) ;
   }
This is a simple code but beautiful. And this is full code
 
        
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Olá! Se você ainda não assinou, assine nosso RSS feed e receba nossas atualizações por email, ou siga nos no Twitter.
Nome: Email:

0 comments:

Post a Comment