Continuous News Ticker jQuery

Developer
Hemant Aggarwal
Size
2,279 Kb
Views
8,096
  1. Continuous News Ticker jQuery Previews
  2. Continuous News Ticker jQuery HTML Codes
  3. Continuous News Ticker jQuery CSS Codes
  4. Continuous News Ticker jQuery JS Codes

How do I make an continuous news ticker jquery?

News Ticker with stop on hover and is continuous.. What is a continuous news ticker jquery? How do you make a continuous news ticker jquery? This script and codes were developed by Hemant Aggarwal on 09 January 2023, Monday.

Continuous News Ticker jQuery Previews
IQ Test

Continuous News Ticker jQuery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Continuous News Ticker jQuery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="outer"> <div id ="tick"> <li><a href="#">I am First</a></li> <li><a href="#">I am Second</a></li> <li><a href="#">I am Third</a></li> <li><a href="#">I am Fourth</a></li> <li><a href="#">I am Fifth</a></li> </div> <div id="tick2"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Continuous News Ticker jQuery - Script Codes CSS Codes

#tick li, #tick2 li { list-style-type:none; float:left; padding-right:20px; position:absolute; left:0px;}
#tick, #tick2 { position:relative; display:block; width:5000px; margin:0; content=""; display:table; height:0px; }
#outer{width:300px;height:25px; overflow:hidden; background:#EEEEEE;}
#outer a {text-decoration:none; color:#333; font-family:Calibri; font-size:18px;}
#outer a:hover {border-bottom:2px solid #777;}

Continuous News Ticker jQuery - Script Codes JS Codes

$('#tick2').html($('#tick').html());
//alert($('#tick2').offset.left);
var temp=0,intervalId=0;
$('#tick li').each(function(){ var offset=$(this).offset(); var offsetLeft=offset.left; $(this).css({'left':offsetLeft+temp}); temp=$(this).width()+temp+10;
});
$('#tick').css({'width':temp+40, 'margin-left':'20px'});
temp=0;
$('#tick2 li').each(function(){ var offset=$(this).offset(); var offsetLeft=offset.left; $(this).css({'left':offsetLeft+temp}); temp=$(this).width()+temp+10;
});
$('#tick2').css({'width':temp+40,'margin-left':temp+40});
function abc(a,b) { var marginLefta=(parseInt($("#"+a).css('marginLeft'))); var marginLeftb=(parseInt($("#"+b).css('marginLeft'))); if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){ $("#"+a).css({'margin-left':(marginLefta-1)+'px'}); } else { $("#"+a).css({'margin-left':temp}); } if((-marginLeftb<=$("#"+b).width())){ $("#"+b).css({'margin-left':(marginLeftb-1)+'px'}); } else { $("#"+b).css({'margin-left':temp}); }
} function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 50) } $(function(){ $('#outer').mouseenter(function() { window.clearInterval(intervalId); }); $('#outer').mouseleave(function() { start(); }) start(); });
Continuous News Ticker jQuery - Script Codes
Continuous News Ticker jQuery - Script Codes
Home Page Home
Developer Hemant Aggarwal
Username mstoic
Uploaded January 09, 2023
Rating 3
Size 2,279 Kb
Views 8,096
Do you need developer help for Continuous News Ticker jQuery?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hemant Aggarwal (mstoic) Script Codes
Name
Theme HTML OLD
Images For ThemeForest - Envato
Adsense Code Converter - Mstoic.com
Social Share Count With JS
Amazing Hover Effect for Categories WP
Working Ticker
A Pen by Hemant Aggarwal
BreadCrumb Design
Navigation for Touch
DEL - SIP Calculator
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!