How do i make the text to scroll automatic from top to bottom ?

[risq]

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 notifications@github.com:

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/risq/jquery-advanced-news-ticker/issues/4 .

[Csharper1972]

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 ?

[risq]

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; }
}