jQuery acme newsticker restart marque position

user_2571904 0
Viewed 192

I'm using this plugin to marque the text. It's running OK. Now I have a refresh button there and I want when I click that button it should be start the marque from first position (back to breaking news 1).

Is it possible to do that?

function doRefresh()
{
  $('.my-news-ticker-2').AcmeTicker({
    type: 'marquee',
    /*horizontal/horizontal/Marquee/type*/
    direction: 'left',
    /*up/down/left/right*/
    speed: 0.05,
    /*true/false/number*/ /*For vertical/horizontal 600*/ /*For marquee 0.05*/ /*For typewriter 50*/
    controls: {
      toggle: $('.acme-news-ticker-pause'),
      /*Can be used for horizontal/horizontal/typewriter*/ /*not work for marquee*/
    }
  });
}

doRefresh();

$('#refresh').on('click', function()
{
  $('.acme-news-ticker-box').replaceWith($(".acme-news-ticker-box").clone());
  doRefresh();
});
@media (min-width: 768px)
{
    .acme-news-ticker
    {
        margin-top: 0;
    }
}
  
    @media (max-width: 575px) {
      .acme-news-ticker-label {
        position: absolute;
        top: -45px; } }
  .announcementBox {
    height: 45px;
    padding-top: 10px;
    overflow: hidden; }
    @media (max-width: 575px) {
      .announcementBox {
        padding-left: 10px;} }
    .announcementBox ul {
      width: 100%;
      list-style-type: none !important;
      padding: 0;
      margin: 0; }
      .announcementBox ul li a {
        text-decoration: none; }
  .acme-news-ticker-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    height: 100%;
    right: 0;
    top: 0; }
    .acme-news-ticker-controls span {
      height: 100%;
      background: #f6f6f6;
      padding: 0;
      width: 40px;
      border-color: #eeeeee;
      border-style: solid;
      border-width: 0 0 0 1px;
      cursor: pointer;
      display: inline-block; }
      .acme-news-ticker-controls span:hover {
        background: #eeeeee; }
      .acme-news-ticker-controls span.acme-news-ticker-arrow {
        margin: 0;
        display: inline-block;
        position: relative; }
        .acme-news-ticker-controls span.acme-news-ticker-arrow:after {
          border-color: #999;
          border-bottom-style: solid;
          border-bottom-width: 2px;
          border-right-style: solid;
          border-right-width: 2px;
          content: '';
          display: inline-block;
          height: 8px;
          left: 50%;
          position: absolute;
          top: 50%;
          width: 8px; }
      .acme-news-ticker-controls span.acme-news-ticker-pause {
        position: relative;
        display: inline-block; }
        .acme-news-ticker-controls span.acme-news-ticker-pause:before {
          position: absolute;
          content: "";
          width: 10px;
          height: 10px;
          border-color: #999;
          border-style: solid;
          border-width: 0 2px 0;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          left: 50%;
          top: 50%; }
    .acme-news-ticker-controls.acme-news-ticker-horizontal-controls span.acme-news-ticker-prev:after {
      -webkit-transform: translate(-50%, -50%) rotate(135deg);
          -ms-transform: translate(-50%, -50%) rotate(135deg);
              transform: translate(-50%, -50%) rotate(135deg); }
    .acme-news-ticker-controls.acme-news-ticker-horizontal-controls span.acme-news-ticker-next:after {
      -webkit-transform: translate(-50%, -50%) rotate(315deg);
          -ms-transform: translate(-50%, -50%) rotate(315deg);
              transform: translate(-50%, -50%) rotate(315deg); }
    .acme-news-ticker-controls.acme-news-ticker-vertical-controls span.acme-news-ticker-prev:after {
      -webkit-transform: translate(-50%, -50%) rotate(225deg);
          -ms-transform: translate(-50%, -50%) rotate(225deg);
              transform: translate(-50%, -50%) rotate(225deg); }
    .acme-news-ticker-controls.acme-news-ticker-vertical-controls span.acme-news-ticker-next:after {
      -webkit-transform: translate(-50%, -50%) rotate(405deg);
          -ms-transform: translate(-50%, -50%) rotate(405deg);
              transform: translate(-50%, -50%) rotate(405deg); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>

<button id="refresh">Refresh</button>

<div class="acme-news-ticker-box">
  <ul class="my-news-ticker-2">
    <li><a href="#">Breaking News 1</a></li>
    <li><a href="#">Breaking News 2</a></li>
    <li><a href="#">Breaking News 3</a></li>
    <li><a href="#">Breaking News 4</a></li>
    <li><a href="#">Breaking News 5</a></li>
    <li><a href="#">Breaking News 6</a></li>
    <li><a href="#">Breaking News 7</a></li>
    <li><a href="#">Breaking News 8</a></li>
  </ul>
</div>

html javascript
1 Answers

Yes, you just need to slightly change your JS code. Since there is already a position on ul(my-news-ticker-2) from the style tag, it needs to remove.

function doRefresh() {
    $('.my-news-ticker-2').AcmeTicker({
        type: 'marquee',
        /*horizontal/horizontal/Marquee/type*/
        direction: 'left',
        /*up/down/left/right*/
        speed: 0.05,
        /*true/false/number*/ /*For vertical/horizontal 600*/ /*For marquee 0.05*/ /*For typewriter 50*/
        controls: {
            toggle: $('.acme-news-ticker-pause'),
            /*Can be used for horizontal/horizontal/typewriter*/ /*not work for marquee*/
        }
    });
}

doRefresh();

$('#refresh').on('click', function () {
    let clone = $(".acme-news-ticker-box").clone();
    clone = clone.find('.my-news-ticker-2').removeAttr('style');
    $('.acme-news-ticker-box').html(clone);
    doRefresh();
});
user_47130450
Related