Permalink
Browse files

Add ticker example

  • Loading branch information...
1 parent e864102 commit 77e115e9c7df0fe5ac049ef24bfe81707f23f08e @prefiks prefiks committed Feb 8, 2012
@@ -0,0 +1,62 @@
+/*!
+ * liScroll 1.0
+ * Examples and documentation at:
+ * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
+ * 2007-2010 Gian Carlo Mingati
+ * Version: 1.0.2.1 (22-APRIL-2011)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ * Requires:
+ * jQuery v1.2.x or later
+ *
+ */
+
+
+jQuery.fn.liScroll = function(settings) {
+ settings = jQuery.extend({
+ travelocity: 0.07
+ }, settings);
+ return this.each(function(){
+ var $strip = jQuery(this);
+ $strip.addClass("newsticker")
+ var $mask = $strip.wrap("<div class='mask'></div>");
+ var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
+ $strip.liScrollRestart(settings);
+ });
+};
+
+
+jQuery.fn.liScrollRestart = function(settings) {
+ settings = jQuery.extend({
+ travelocity: 0.07
+ }, settings);
+ return this.each(function(){
+ var $strip = jQuery(this);
+ var stripWidth = 1;
+
+ $strip.width("");
+ $strip.find("li").each(function(i){
+ stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
+ });
+ 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);
+ });
+ });
+};
@@ -0,0 +1,43 @@
+/* liScroll styles */
+
+.tickercontainer { /* the outer div with the black border */
+border: 1px solid #000;
+background: #fff;
+width: 738px;
+height: 27px;
+margin: 0;
+padding: 0;
+overflow: hidden;
+}
+.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
+position: relative;
+left: 10px;
+top: 8px;
+width: 718px;
+overflow: hidden;
+}
+ul.newsticker { /* that's your list */
+position: relative;
+left: 750px;
+font: bold 10px Verdana;
+list-style-type: none;
+margin: 0;
+padding: 0;
+
+}
+ul.newsticker li {
+float: left; /* important: display inline gives incorrect results when you check for elem's width */
+margin: 0;
+padding: 0;
+background: #fff;
+}
+ul.newsticker span {
+white-space: nowrap;
+padding: 0;
+/*color: #ff0000;*/
+font: bold 10px Verdana;
+margin: 0 50px 0 0;
+}
+/*ul.newsticker span {
+margin: 0 10px 0 0;
+} */
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Ticker Sender</title>
+ <style type="text/css">
+ html, body { height: 100%; margin: 0px; padding: 0px }
+ </style>
+ <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js'></script>
+
+ <script src="../../p1pp.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#connect").click(function() {
+ connect($("#password").val())
+ })
+
+ $("#update").click(function() {
+ var el = Strophe.xmlElement("value");
+ el.appendChild(Strophe.xmlTextNode($("#newContent").val()));
+
+ P1PP.publish("ticker", null, el, function() { });
+
+ $("#newContent").val("");
+ })
+ });
+
+ function on_state_change(state, c){
+ if(state === Strophe.Status.CONNECTED || state === Strophe.Status.ATTACHED) {
+ $("#loginPane").hide();
+ $("#inputPane").show();
+ }
+ }
+
+ function connect(password) {
+ P1PP.connect({
+ jid: "ticker@p1pp.net",
+ password: password,
+ debug: false, // Change to true to see messages trafic
+ on_strophe_event: on_state_change
+ });
+ }
+ </script>
+ </head>
+
+ <body>
+ <div id="loginPane">
+ <div>
+ Password: <input id="password" type="password" value="">
+ </div>
+ <div>
+ <input id="connect" type="button" value="Connect">
+ </div>
+ </div>
+ <div id="inputPane" style="display:none">
+ <input id="newContent" type="input">
+ <input id="update" type="button" value="Update">
+ </div>
+ </body>
+</html>
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>Ticker Viewer</title>
+ <style type="text/css">
+ @import url(li-scroller.css);
+ html, body { height: 100%; margin: 0px; padding: 0px }
+ span { margin: 4em 8em 0 8em; }
+ </style>
+ <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js'></script>
+ <script src='jquery.li-scroller.1.0.js'></script>
+ <script src="../../p1pp.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ P1PP.connect({
+ debug: false, // Change to true to see messages trafic
+ nodes: ["ticker@p1pp.net/ticker"],
+ publish: on_publish,
+ retract: on_retract,
+ on_strophe_event: on_state_change
+ });
+ $("#ticker").liScroll();
+ });
+
+ function on_state_change(state, c){
+ if(state === Strophe.Status.CONNECTED || state === Strophe.Status.ATTACHED) {
+ }
+ }
+
+ function on_publish(id, value, node, timestamp) {
+ $("#ticker").stop();
+ $("#ticker").append("<li id='"+id+"'><span>"+$(value).text()+"</span></li>");
+ $("#ticker").liScrollRestart();
+ }
+
+ function on_retract() {
+ }
+ </script>
+ </head>
+
+ <body>
+ <ul id="ticker">
+ </ul>
+ </body>
+</html>

0 comments on commit 77e115e

Please sign in to comment.