Skip to content

Commit 23d0918

Browse files
vaakashvaakash
committed
- Fix high CPU consumption bug
- Updated readme, test file
1 parent 8987ed7 commit 23d0918

File tree

5 files changed

+122
-73
lines changed

5 files changed

+122
-73
lines changed

‎README.md

Lines changed: 60 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
# jQuery Easy Ticker plugin
22

3-
jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with lot of features and works in all browsers.
3+
jQuery easy ticker is a news ticker like plugin which scrolls the list infinitely. It is highly customizable and flexible with lots of features and works in all browsers.
44

5-
## Demo
6-
7-
[Live plugin demo](http://www.aakashweb.com/demos/jquery-easy-ticker/) | [Plugin Home page](http://www.aakashweb.com/jquery-plugins/easy-ticker/)
5+
[👁️ Live demo](https://www.aakashweb.com/demos/jquery-easy-ticker/) - [🏠 Home page](https://www.aakashweb.com/jquery-plugins/easy-ticker/) - [☕ Buy me a Coffee !](https://www.paypal.me/vaakash/6)
86

97
## Features
108

@@ -14,57 +12,92 @@ jQuery easy ticker is a news ticker like plugin, which scrolls the list infinite
1412
* Supports 'easing' functions.
1513
* Mouse pause feature available.
1614
* The speed of the transition can be changed.
17-
* Controls can be added inorder to Play/pause or move the list Up and down.
15+
* Controls can be added in order to Play/pause or move the list up and down.
1816
* Cross browser support.
19-
* Light-weight (4 Kb - Full source / 2.7 Kb - Minified source).
17+
* Light weight (2.65 Kb - minified).
18+
19+
## Usage
2020

21-
## Syntax
21+
Include jQuery and easy ticker plugin (available under dist/) in the page.
2222

23-
Include jQuery and jQuery easy ticker in the source and use the
23+
```HTML
24+
<script src="jquery.js"></script>
25+
<script src="jquery.easy-ticker.min.js"></script>
26+
```
2427

2528
**HTML**
2629

27-
target --> parent --> children
28-
30+
Wrapper > Target > Children
31+
2932
```HTML
3033
<div class="myWrapper">
31-
<ul>
32-
<li>List element 1</li>
33-
<li>List element 2</li>
34-
<li>List element 3</li>
35-
<li>List element 4</li>
36-
</ul>
34+
<ul>
35+
<li>List item 1</li>
36+
<li>List item 2</li>
37+
<li>List item 3</li>
38+
<li>List item 4</li>
39+
</ul>
3740
</div>
41+
```
3842

3943
or
4044

45+
```HTML
4146
<div class="myWrapper">
42-
<div>
43-
<div>Element 1</div>
44-
<div>Element 2</div>
45-
<div>Element 3</div>
46-
<div>Element 4</div>
47-
</div>
47+
<div>
48+
<div>List item 1</div>
49+
<div>List item 2</div>
50+
<div>List item 3</div>
51+
<div>List item 4</div>
52+
</div>
4853
</div>
4954
```
55+
5056
**jQuery**
5157

58+
With default options
59+
5260
```JavaScript
53-
$('.myWrapper').easyTicker({
54-
// list of properties
61+
$(document).ready(function(){
62+
63+
$('.myWrapper').easyTicker({
64+
direction: 'up',
65+
easing: 'swing',
66+
speed: 'slow',
67+
interval: 2000,
68+
height: 'auto',
69+
visible: 0,
70+
mousePause: true,
71+
controls: {
72+
up: '',
73+
down: '',
74+
toggle: '',
75+
playText: 'Play',
76+
stopText: 'Stop'
77+
},
78+
callbacks: {
79+
before: false,
80+
after: false
81+
}
82+
});
83+
5584
});
5685
```
5786

58-
[Demo](http://www.aakashweb.com/demos/jquery-easy-ticker/)
87+
[See demo](https://www.aakashweb.com/demos/jquery-easy-ticker/)
88+
89+
## Buy me a coffee !
90+
91+
Like this plugin ? If you find it useful and if it helped solved your problem, feel free to [Buy me a Coffee !](https://www.paypal.me/vaakash/6) 😀
5992

6093
## Documentation
6194

62-
Plugin's documentation is written in its official home page. Check it out in [this link](http://www.aakashweb.com/jquery-plugins/easy-ticker/)
95+
Plugin's documentation is available in the plugin homepage. Please refer [this page](https://www.aakashweb.com/jquery-plugins/easy-ticker/) for more details on usage, options and customization features.
6396

6497
## Requirements
6598

6699
* jQuery 1.7+
67100

68101
## License
69102

70-
Copyright (c) 2014 [Aakash Chakravarthy](http://www.aakashweb.com/), released under the MIT License.
103+
Copyright (c) 2020 [Aakash Chakravarthy](https://www.aakashweb.com/), released under the MIT License.

‎dist/jquery.easy-ticker.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jquery-easy-ticker",
3-
"version": "3.0.0",
3+
"version": "3.1.0",
44
"description": "jQuery easy ticker plugin allows to add news ticker like scroll to list elements",
55
"scripts": {
66
"build": "grunt"

‎src/jquery.easy-ticker.js

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* jQuery - Easy Ticker plugin - v3.0
2+
* jQuery - Easy Ticker plugin - v3.1.0
33
* https://www.aakashweb.com/
44
* Copyright 2020, Aakash Chakravarthy
55
* Released under the MIT License.
@@ -15,7 +15,7 @@
1515
interval: 2000,
1616
height: 'auto',
1717
visible: 0,
18-
mousePause: 1,
18+
mousePause: true,
1919
controls: {
2020
up: '',
2121
down: '',
@@ -49,7 +49,7 @@
4949
s.winFocus = 0;
5050
});
5151

52-
if(s.opts.mousePause == 1){
52+
if(s.opts.mousePause){
5353
s.elem.mouseenter(function(){
5454
s.timerTemp = s.timer;
5555
stop();
@@ -80,20 +80,20 @@
8080
s.elem.children().css('margin', 0).children().css('margin', 0);
8181

8282
s.elem.css({
83-
position : 'relative',
83+
position: 'relative',
8484
height: s.opts.height,
85-
overflow : 'hidden'
85+
overflow: 'hidden'
8686
});
8787

8888
s.targ.css({
89-
'position' : 'absolute',
90-
'margin' : 0
89+
'position': 'absolute',
90+
'margin': 0
9191
});
9292

93-
setInterval(function(){
94-
adjustHeight();
93+
s.heightTimer = setInterval(function(){
94+
adjustHeight(false);
9595
}, 100);
96-
96+
9797
}
9898

9999
function start(){
@@ -136,13 +136,13 @@
136136
}
137137

138138
s.targ.stop(true, true).animate({
139-
'top': eq + height + "px"
139+
'top': eq + height + 'px'
140140
}, s.opts.speed, s.opts.easing, function(){
141141

142142
selChild.hide()[appType](s.targ).fadeIn();
143143
s.targ.css('top', 0);
144144

145-
adjustHeight();
145+
adjustHeight(true);
146146

147147
if(typeof s.opts.callbacks.after === 'function'){
148148
s.opts.callbacks.after.call(s, s.targ, selChild);
@@ -153,11 +153,11 @@
153153

154154
function moveDir(dir){
155155
stop();
156-
if(dir == 'up') move('up'); else move('down');
156+
if(dir == 'up') move('up'); else move('down');
157157
// start();
158158
}
159159

160-
function fullHeight(){
160+
function setFullHeight(){
161161
var height = 0;
162162
var tempDisplay = s.elem.css('display'); // Get the current el display value
163163

@@ -173,26 +173,38 @@
173173
});
174174
}
175175

176-
function animateHeight(animate){
176+
function setVisibleHeight(animate){
177177
var wrapHeight = 0;
178+
var visibleItemClass = 'et-item-visible';
179+
180+
s.targ.children().removeClass(visibleItemClass);
181+
178182
s.targ.children(':lt(' + s.opts.visible + ')').each(function(){
179183
wrapHeight += $(this).outerHeight();
184+
$(this).addClass(visibleItemClass);
180185
});
181186

182-
if(animate == 1){
187+
if(animate){
183188
s.elem.stop(true, true).animate({height: wrapHeight}, s.opts.speed);
184189
}else{
185190
s.elem.css('height', wrapHeight);
186191
}
187192
}
188193

189-
function adjustHeight(){
190-
if(s.opts.height == 'auto' && s.opts.visible != 0){
191-
anim = arguments.callee.caller.name == 'init' ? 0 : 1;
192-
animateHeight(anim);
193-
}else if(s.opts.height == 'auto'){
194-
fullHeight();
194+
function adjustHeight(animate){
195+
196+
if(s.opts.height == 'auto'){
197+
if(s.opts.visible > 0){
198+
setVisibleHeight(animate);
199+
}else{
200+
setFullHeight();
201+
}
202+
}
203+
204+
if(!animate){
205+
clearInterval(s.heightTimer);
195206
}
207+
196208
}
197209

198210
return {

‎test/test.html

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
<script type="text/javascript">
1313
$(document).ready(function(){
1414

15-
var dd = $('.vticker').easyTicker({
15+
var myET = $('.myTicker').easyTicker({
1616
direction: 'up',
1717
easing: 'swing',
1818
speed: 'slow',
19-
interval: 2000,
19+
interval: 3000,
2020
height: 'auto',
2121
visible: 1,
22-
mousePause: 0,
22+
mousePause: true,
2323
controls: {
2424
up: '.up',
2525
down: '.down',
@@ -29,6 +29,7 @@
2929
callbacks: {
3030
before: function(ul, li){
3131
console.log(this, ul, li);
32+
$(li).css('color', 'red');
3233
},
3334
after: function(ul, li){
3435
console.log(this, ul, li);
@@ -37,60 +38,63 @@
3738
}).data('easyTicker');
3839

3940
cc = 1;
40-
$('.aa').click(function(){
41-
$('.vticker ul').append('<li>' + cc + ' Triangles can be made easily using CSS also without any images. This trick requires only div tags and some</li>');
41+
$('.add').click(function(){
42+
$('.myTicker ul').append('<li>' + cc + ' Triangles can be made easily using CSS also without any images. This trick requires only div tags and some</li>');
4243
cc++;
4344
});
4445

45-
$('.vis').click(function(){
46-
dd.options['visible'] = 3;
46+
$('.visible-3').click(function(){
47+
myET.options['visible'] = 3;
4748

4849
});
4950

50-
$('.visall').click(function(){
51-
dd.stop();
52-
dd.options['visible'] = 0 ;
53-
dd.start();
51+
$('.visible-all').click(function(){
52+
myET.stop();
53+
myET.options['visible'] = 0 ;
54+
myET.start();
5455
});
5556

5657
});
5758
</script>
5859

59-
<button class="aa">ADD</button>
60-
<button class="vis">SET VISIBLE 3</button>
61-
<button class="visall">SET VISIBLE ALL</button>
60+
<button class="add">ADD</button>
61+
<button class="visible-3">SET VISIBLE 3</button>
62+
<button class="visible-all">SET VISIBLE ALL</button>
6263

6364
<button class="up">UP</button>
6465
<button class="down">DOWN</button>
6566
<button class="toggle">TOGGLE</button>
6667

67-
<div class="vticker">
68+
<div class="myTicker">
6869
<ul>
6970
<li>Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
7071
<li>List 2</li>
71-
<li>List 3</li>
72+
<li>This trick requires only div tags and some CSS works. To get this trick, just use the code below. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
7273
<li>List 4</li>
73-
<li>List 5 </li>
74-
<li class="ww">Hey... Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
74+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum porro quod nostrum est quos, rerum possimus voluptas exercitationem atque, vel fugiat nobis praesentium animi iure necessitatibus reprehenderit. Pariatur, tempore officia.</li>
75+
<li class="last-item">Hey... Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
7576
</ul>
7677
</div>
7778

7879
<style>
79-
.vticker{
80+
.myTicker{
8081
border: 1px solid red;
8182
width: 400px;
8283
}
83-
.vticker ul{
84+
.myTicker ul{
8485
padding: 0;
8586
}
86-
.vticker li{
87+
.myTicker li{
8788
list-style: none;
8889
border-bottom: 1px solid green;
8990
padding: 10px;
9091
}
9192
.et-run{
9293
background: red;
9394
}
95+
.et-item-visible{
96+
color: blue !important;
97+
}
9498
</style>
9599

96100
</body>

0 commit comments

Comments
 (0)