jquery-newstape's Introduction

JQuery Newstape

Simple Touch-enabled News Ticker Plugin

Newstape is a really small jQuery text scroller plugin which automatically & vertically scrolls through a list of news feeds with support for mouse wheel, mouse drag and touch swipe events.

DEMO

How to use it:

Load jQuery library and the jQuery newstape plugin in your html page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.newstape.js"></script>

Load the optional jQuery mousewheel plugin for mouse wheel support.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

Load the optional jquery.event.drag plugin for drag & swipe support.

<script src="https://cdn.jsdelivr.net/jquery.event.drag/2.2/jquery.event.drag.min.js"></script>

Create a basic news ticker as follow.

<div class="newstape">
  <div class="newstape-content">
    <div class="news-block">
      <h3>News 1</h3>
      <small>13.04.2015</small>
      <p class="text-justify"> Content 1 ... </p>
      <div class="text-right"> <a href="#">More</a> </div>
      <hr />
    </div>
    <div class="news-block">
      <h3>News 2</h3>
      <small>13.04.2015</small>
      <p class="text-justify"> Content 2 ... </p>
      <div class="text-right"> <a href="#">More</a> </div>
      <hr />
    </div>
    <div class="news-block">
      <h3>News 3</h3>
      <small>13.04.2015</small>
      <p class="text-justify"> Content 3 ... </p>
      <div class="text-right"> <a href="#">More</a> </div>
      <hr />
    </div>
  </div>
</div>

Add your own CSS styles to the news ticker.

.newstape {
  background-color: #3BB0D6;
  color: #fff;
  height: 400px;
  overflow: hidden;
}

.newstape-content {
  position: relative;
  padding: 15px;
}

.newstape-drag { cursor: ns-resize; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

Call the plugin to start the news ticker.

$('.newstape').newstape();

Default settings.

$('.newstape').newstape({

// timer period
period: 30, 

// offset pixel count
offset: 1, 

// mousewheel scrolling
mousewheel: true, 

// mousewheel offset pixel count
mousewheelRate: 30, 

// dragging tape content
dragable: true

});

jquery-newstape's People

Contributors

Stargazers

Watchers

jquery-newstape's Issues

Scrolling without blank space!

Hello. These plugin is awesome. I think it would be better to scroll these news contents without blank space. These space depends on height of plugin. If these plugin is higher then the space is also bigger.

Can someone show me the code of infinite scrool? Or give me some advice to make it happen?

Best regards, Chris

Recommend Projects