summaryrefslogtreecommitdiffstats
path: root/ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md
diff options
context:
space:
mode:
authortalasila <talasila@research.att.com>2017-02-07 15:03:57 -0500
committertalasila <talasila@research.att.com>2017-02-07 15:05:15 -0500
commit4ad39a5c96dd99acf819ce189b13fec946d7506b (patch)
treea1449286441947cc3d07a45227fa0d6f978e1a7d /ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md
parent5500448cbd1f374d0ac743ee2fd636fe2d3c0027 (diff)
Initial OpenECOMP Portal commit
Change-Id: I804b80e0830c092e307da1599bd9fbb5c3e2da77 Signed-off-by: talasila <talasila@research.att.com>
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md')
-rw-r--r--ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md99
1 files changed, 99 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md b/ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md
new file mode 100644
index 00000000..4383382c
--- /dev/null
+++ b/ecomp-portal-FE/client/bower_components/jquery.newstape/readme.md
@@ -0,0 +1,99 @@
+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](http://www.jqueryscript.net/demo/Simple-Touch-enabled-News-Ticker-Plugin-Newstape/)
+
+How to use it:
+-------------
+Load jQuery library and the jQuery newstape plugin in your html page.
+``` html
+<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.
+``` html
+<script src="jquery.mousewheel.min.js"></script>
+```
+Load the optional jquery.event.drag plugin for drag & swipe support.
+``` html
+<script src="jquery.event.drag.min.js"></script>
+```
+Create a basic news ticker as follow.
+``` html
+<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.
+``` css
+.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.
+``` javascript
+$('.newstape').newstape();
+
+```
+Default settings.
+``` javascript
+$('.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
+
+});
+```