jQuery addClass example

Change class name on click in jQuery

by Mir Baybin

HTML

<script src="https://www.jqueryscript.net/demo/HTML-List-Based-Scroller-Ticker-Plugin-jQuery-simpleTicker/jquery.simpleTicker.js"></script>
<div id="ticker-roll" class="ticker">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet, leo eget fermentum sagittis, quam arcu dictum orci, tincidunt egestas ligula massa vel tellus. Proin orci lectus, placerat sit amet ipsum eget, eleifend elementum quam. </li>
    <li>Mauris gravida tortor quam, nec maximus leo blandit in. Proin ac libero quis massa euismod sodales vitae at risus. Quisque urna sapien, tempus sit amet vulputate eget, maximus ac massa.</li>
    <li>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ut rhoncus velit. Vestibulum elementum mattis condimentum.</li>
    <li>Aenean vulputate tortor ac ligula volutpat, vitae pharetra velit auctor. Aenean fermentum, lorem id luctus finibus, nunc tellus vulputate tortor, ac gravida nibh mauris sit amet sapien.</li>
  </ul>
</div>

CSS

.ticker {
  margin: 0 auto;
  padding: 10px;
  width: 200px;
  text-align: left;
  border: #ccc 1px solid;
  position: relative;
  overflow: hidden;
  background-color:#BF263C;
  color:#fff;
  display: block;
}

.ticker ul {
  position: relative;
}

.ticker ul li {
  display: none;
  -ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for WebKit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
        white-space: pre-wrap;
}

JavaScript

jQuery(function($){
  $.simpleTicker($("#ticker-roll"),{'effectType':'fade'});
});