-1

I used this code to create a news ticker in webflow

[original code][https://discourse.webflow.com/t/automated-scrolling-news-bar/29033/5]

Works great, but I need to make it full browser width. Nothing I do seems to make that happen, even setting everything to 100%. Any ideas?

I tried setting everything to 100%, not sure where this fixed width is coming from.

My code below...

jQuery.fn.liScroll = function(settings) {
  settings = jQuery.extend({
    travelocity: 0.07
  }, settings);
  return this.each(function() {
    var $strip = jQuery(this);
    $strip.addClass("newsticker")
    var stripWidth = 1;
    $strip.find("li").each(function(i) {
      stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
    var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width    
    $strip.width(stripWidth);
    var totalTravel = stripWidth + containerWidth;
    var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye     
    function scrollnews(spazio, tempo) {
      $strip.animate({
        left: '-=' + spazio
      }, tempo, "linear", function() {
        $strip.css("left", containerWidth);
        scrollnews(totalTravel, defTiming);
      });
    }
    scrollnews(totalTravel, defTiming);
    $strip.hover(function() {
        jQuery(this).stop();
      },
      function() {
        var offset = jQuery(this).offset();
        var residualSpace = offset.left + stripWidth;
        var residualTime = residualSpace / settings.travelocity;
        scrollnews(residualSpace, residualTime);
      });
  });
};

$(function() {
  $("ul#demo").liScroll();

});
.tickercontainer {
  border: 0px solid #000;
  background: #f5d82b;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tickercontainer .mask {
  position: relative;
  left: 10px;
  top: 0px;
  width: 100%;
  overflow: hidden;
}

ul.newsticker {
  position: relative;
  left: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.newsticker li {
  float: left;
  margin: 0;
  padding: 0;
  background: #f5d82b;
}

ul.newsticker a {
  white-space: nowrap;
  padding: 0;
  color: #ff0000;
  margin: 0 0px 0 0;
}

ul.newsticker span {
  margin: 0 0px 0 0;
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body class="body">
  <div class="news-ticker wf-section">
    <div class="news-ticker-container w-container">
      <div class="tickercontainer">
        <div class="mask">
          <ul id="demo" role="list" class="list newsticker" style="width: 753.516px; left: 670.826px;">
            <li>Finding the right artist for your creative endeavour has never been so easy - all on one page.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

1

1 Answer 1

0

It turned out the custom code and css was all fine, but webflow put an extra container around everything with display: flex; , I switched this to display: block; and it worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.