ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md

   1 JQuery Newstape
   2 ===================
   3 Simple Touch-enabled News Ticker Plugin
   4
   5 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.
   6
   7 [DEMO](http://www.jqueryscript.net/demo/Simple-Touch-enabled-News-Ticker-Plugin-Newstape/)
   8
   9 How to use it:
  10 -------------
  11 Load jQuery library and the jQuery newstape plugin in your html page.
  12 ``` html
  13 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  14 <script src="jquery.newstape.js"></script>
  15 ```
  16 Load the optional jQuery mousewheel plugin for mouse wheel support.
  17 ``` html
  18 <script src="jquery.mousewheel.min.js"></script>
  19 ```
  20 Load the optional jquery.event.drag plugin for drag & swipe support.
  21 ``` html
  22 <script src="jquery.event.drag.min.js"></script>
  23 ```
  24 Create a basic news ticker as follow.
  25 ``` html
  26 <div class="newstape">
  27   <div class="newstape-content">
  28     <div class="news-block">
  29       <h3>News 1</h3>
  30       <small>13.04.2015</small>
  31       <p class="text-justify"> Content 1 ... </p>
  32       <div class="text-right"> <a href="#">More</a> </div>
  33       <hr />
  34     </div>
  35     <div class="news-block">
  36       <h3>News 2</h3>
  37       <small>13.04.2015</small>
  38       <p class="text-justify"> Content 2 ... </p>
  39       <div class="text-right"> <a href="#">More</a> </div>
  40       <hr />
  41     </div>
  42     <div class="news-block">
  43       <h3>News 3</h3>
  44       <small>13.04.2015</small>
  45       <p class="text-justify"> Content 3 ... </p>
  46       <div class="text-right"> <a href="#">More</a> </div>
  47       <hr />
  48     </div>
  49   </div>
  50 </div>
  51 ```
  52 Add your own CSS styles to the news ticker.
  53 ``` css
  54 .newstape {
  55   background-color: #3BB0D6;
  56   color: #fff;
  57   height: 400px;
  58   overflow: hidden;
  59 }
  60
  61 .newstape-content {
  62   position: relative;
  63   padding: 15px;
  64 }
  65
  66 .newstape-drag { cursor: ns-resize; }
  67
  68 .text-center { text-align: center; }
  69
  70 .text-right { text-align: right; }
  71
  72 .text-justify { text-align: justify; }
  73 ```
  74 Call the plugin to start the news ticker.
  75 ``` javascript
  76 $('.newstape').newstape();
  77
  78 ```
  79 Default settings.
  80 ``` javascript
  81 $('.newstape').newstape({
  82
  83 // timer period
  84 period: 30,
  85
  86 // offset pixel count
  87 offset: 1,
  88
  89 // mousewheel scrolling
  90 mousewheel: true,
  91
  92 // mousewheel offset pixel count
  93 mousewheelRate: 30,
  94
  95 // dragging tape content
  96 dragable: true
  97
  98 });
  99 ```