Comments (3)
You can set the same value for speed and duration : it will continuously
scroll, but the speed may not be exactly constant... Check this fiddle:
http://jsfiddle.net/rFnC3/
2014-03-10 17:23 GMT+01:00 Csharper1972 [email protected]:
I used the example
$('.newsticker').newsTicker({
row_height: 48,
max_rows: 2,
speed: 600,
direction: 'up',
duration: 4000,
autostart: 1,
pauseOnHover: 0
});But what it does is just moving one line each time up and moving the upper
line down.
Is there any way to make it to move smooth scrolling automatic ? Not line
by line but all the text to scroll animated.Reply to this email directly or view it on GitHubhttps://github.com//issues/4
.
from jquery-advanced-news-ticker.
risq thank you.
Another question please how can i create in my website this design of the text and button of breaking news like in this site: http://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/
?
I'm using in my site in Weebly with the Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker and it's working.
But i want to use my oqn button and design the same they show in the demo page.
Any ideas how to do it ? Or how to use the design they are using ?
from jquery-advanced-news-ticker.
Hi,
This is the first demo of the plugin I made for its first release.
You can check the sources of the demo on jqueryscripts, since this demo is not on github anymore (I think). Feel free to copy the HTML/CSS/JS for your website and customize it if you need, to see how it works ;)
Basically the js code is very simple :
//initialize the plugin
var oneliner = $('#oneliner .newsticker').newsTicker({
row_height: 44,
max_rows: 1,
time: 5000,
nextButton: $('#oneliner .header')
});
// Pause newsTicker on .header hover
$('#oneliner .header').hover(function() {
oneliner.newsTicker('pause');
}, function() {
oneliner.newsTicker('unpause');
});
as the HTML :
<div id="oneliner">
<div class="header"> Breaking News </div>
<ul class="newsticker">
<li>...</li>
<li>...</li>
</ul>
</div>
and for the CSS, I used css animations and keyframes for the glow effect :
#oneliner {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
position: relative;
margin: 80px auto 40px auto;
width: 900px;
height: 44px;
background-color: #fff;
border-radius: 2px;
}
#oneliner:before, #oneliner:after {
border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px;
bottom: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
content: "";
left: 10px;
position: absolute;
right: 10px;
top: 50%;
z-index: -1;
}
#oneliner .header {
background-color: #ff2e2e;
display: inline-block;
width: 180px;
height: 44px;
text-transform: uppercase;
font-weight: 500;
line-height: 44px;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-align: center;
border-radius: 2px 0 0 2px;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-animation: redPulse 4s infinite;
-moz-animation: redPulse 4s infinite;
animation: redPulse 4s infinite;
}
#oneliner:hover .header {
-webkit-animation: redPulse 1s infinite;
-moz-animation: redPulse 1s infinite;
animation: redPulse 1s infinite;
}
#oneliner .header:active {
background-color: #000;
margin-left: -12px;
color: #aaa;
}
#oneliner ul.newsticker {
display: inline-block;
height: 44px;
width: 710px;
overflow: hidden;
margin: 0 0 0 -3px;
padding: 0 0 0 6px;
line-height: 44px;
font-weight: 500;
background-color: #fafafa;
}
#oneliner ul.newsticker > li{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-bottom: 1px dotted #888;
}
@-webkit-keyframes redPulse {
from { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -webkit-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; }
}
@-moz-keyframes redPulse {
from { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; -moz-box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; }
}
@keyframes redPulse {
from { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
50% { background-color: #bd0000; box-shadow: 0 0 14px #ff2e2e; }
to { background-color: #ff2e2e; box-shadow: 0 0 9px #555; }
}
from jquery-advanced-news-ticker.
Related Issues (20)
- Support for button states
- Cannot destroy
- max_rows Configuration
- Do not scroll when there is only one item. HOT 4
- Suggestion: Horizontal scrolling HOT 3
- add bower HOT 3
- row_height vs max_rows HOT 1
- Adding Horizontal Scrolling
- max_row limit
- Change of <li> height due to different screen-sizes breaks Ticker
- Disable Infinite Loop? HOT 1
- Work on Hover?
- Variable Row Height HOT 2
- Solution to display first item with appropriate content from BD with demo#2 HOT 1
- Some tage in content box are not displayed at the correct place
- Not scrolling in proper order...
- Working with mysql data
- Will you change the file structure in the future? HOT 1
- jQuery 3.2.1 news-ticker not work
- Disable to top arrow when open first time
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-advanced-news-ticker.