Forked from: tokkonopapa's jsdo.it my codes ticker jQuery plugin View Diff (1) forked: jsdo.it --> Profile Codes Streamer/Ticker Widget - jQuery plugin The_Radical_ Follow 2017-05-05 10:22:49 License: MIT License Fork0 Fav0 View454 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 357 lines HTML 142 lines CSS 12 lines forked: jsdo.it --> Profile Codes Streamer/Ticker Widget - jQuery plugin // forked from tokkonopapa's "jsdo.it my codes ticker jQuery plugin" http://jsdo.it/tokkonopapa/eep7 /* * doticker.js v1.0.1 * * Copyright (c) 2011 tokkonoPapa http://tokkono.cute.coocan.jp/blog/slow/ * * doticker.js is freely distributable under the terms of an MIT-style license. * For details, see http://www.opensource.org/licenses/MIT */ (function ($) { $.fn.doticker = function (opts) { var $this = this; var defaults = { loop: true, maxCodes: 10, interval: 6000, scrollbar: false, duration: 'slow', width: 'auto', height: '300px', background: '#9bc6f2', bodyground: '#fff', bordercolor: '#888', url_user: 'http://api.jsdo.it/v0.2/user/show.json', url_list: 'http://api.jsdo.it/v0.2/user/codes.json', url_code: 'http://api.jsdo.it/v0.2/code/show.json', url_logo: 'http://jsdo.it/img/common/sitename_03.png', name: '' }; var options = $.extend(defaults, opts); // For restart clearTimeout(options.timer); $this.empty(); // // Setup styles // var setupStyles = function () { var s = '.doticker-wrap {' + 'float:left;' + 'width:[width];' + 'margin:0 auto;' + 'padding:0;' + 'border-radius:5px;' + 'background:[background];' + 'font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif !important;' + '}\n' + '.doticker-wrap * {' + 'margin:0 !important;' + 'padding:0 !important;' + '}\n' + '.doticker-wrap img {' + 'float:left;' + 'border:none;' + '}\n' + '#[id]head,\n' + '#[id]foot {' + 'min-height:32px !important;' + 'padding:10px !important;' + 'overflow:hidden;' + 'position:relative;' + '}\n' + '#[id]head {' + 'font-size:14px !important;' + 'line-height:1.4 !important;' + '}\n' + '#[id]head img {' + 'width:32px !important;' + 'height:32px !important;' + '}\n' + '#[id]head div {' + 'margin-top:-4px !important;' + 'margin-left:40px !important;' + '}\n' + '#[id]head p {' + 'margin-right:4px !important;' + 'font-size:12px !important;' + 'background:[background];' + '}\n' + '#[id]body {' + 'clear:both;' + 'height:[height];' + 'margin:0 1px !important;' + 'font-size:12px;' + 'overflow:[scrollbar];' + 'border-radius:5px;' + 'background:[bodyground];' + '}\n' + '.[id]doc {' + 'clear:both;' + 'padding:8px !important;' + 'background:[bodyground];' + 'border-bottom:1px dotted [bordercolor];' + '}\n' + '.[id]doc img {' + 'width:50px !important;' + 'height:50px !important;' + '}\n' + '.[id]doc div {' + 'margin-left:58px !important;' + '}\n' + '.[id]doc h5 {' + 'font-size:100%;' + 'font-weight:normal;' + '}\n' + '.[id]doc p {' + 'margin-top:4px !important;' + 'font-size:12px !important;' + '}\n' + '#[id]foot {' + 'font-size:12px !important;' + 'line-height:1.2 !important;' + 'padding-bottom:6px !important;' + '}\n' + '#[id]foot img {' + 'width:79px;' + 'height:39px;' + 'margin-top:-3px !important;' + '}\n' + '#[id]foot p {' + 'top:50%;' + 'margin-left:90px !important;' + 'margin-right:8px !important;' + '}\n'; // Style options options.id = $this.attr('id') + '-dt-'; options.scrollbar = options.scrollbar === true ? 'auto' : 'hidden'; // Replace '[key]' with value in options $.each('id width height scrollbar background bodyground bordercolor'.split(' '), function (i, key) { // s = s.replace(new RegExp('\\[' + key + '\\]', 'img'), options[key]); s = s.split('[' + key + ']').join(options[key]); }); // Add styles into the head var e = document.createElement('style'); e.type = 'text/css'; if (e.styleSheet) { e.styleSheet.cssText = s; } else { e.innerHTML = s; } document.getElementsByTagName("head")[0].appendChild(e); }; // // Setup ticker widget // var setupWidget = function () { var id = options.id; $this.append( '<div class="doticker-wrap">' + '<div id="' + id + 'head"></div>' + '<div id="' + id + 'body"></div>' + '<div id="' + id + 'foot">' + '<a href="http://jsdo.it/">' + '<img src="' + options.url_logo + '" title="jsdo.it" />' + '</a>' + '<p><a href="http://jsdo.it/">Share JavaScript, HTML5 and CSS</a></p>' + '</div>' + '</div>' ); // Shortcut objects options.bottom = $('#' + id + 'foot').offset().top; options.body = $('#' + id + 'body'); options.body.pend = options.loop === true ? options.body.prepend : options.body.append; // Mouse event $('#' + id + 'body').hover( function () { options.body.addClass('doticker-stop'); }, function () { options.body.removeClass('doticker-stop'); } ); }; // // Setup widget header with user info // var showProfile = function (user) { // Correct bug user.url = 'http://jsdo.it/' + user.name; $('#' + options.id + 'head').append( '<a href="' + user.url + '">' + '<img src="' + user.icon + '" title="profile" />' + '</a>' + '<div>' + '<h4>' + '<a href="' + user.url + '" title="profile" target="_blank">' + user.name + '</a>' + '</h4>' + '<p>' + '<a href="' + user.url + '/codes" title="codes" target="_blank">codes ' + user.counts.codes + '</a> / ' + 'forked ' + user.counts.forked + ' / ' + '<a href="' + user.url + '/favorites" title="favorites" target="_blank">♥ ' + user.counts.favorited + '</a>' + '</p>' + '</div>' ); }; // // Keep the codes of interest // var setupCodes = function (list) { options.codes = []; var n = 0; if (list.results !== undefined) { n = list.results.length < options.maxCodes ? list.results.length : options.maxCodes; var i, code; for (i = 0; i < n; i++) { code = list.results[i]; options.codes[i] = document.createElement('div'); options.codes[i].innerHTML = '<div class="' + options.id + 'doc">' + '<a href="' + code.url + '" target="_blank">' + '<img src="' + code.thumbnail['100'] + '" title="' + code.title + '" />' + '</a>' + '<div>' + '<h5>' + '<a href="' + code.url + '" target="_blank">' + code.title + '</a>' + '</h5>' + '<p>' + 'Last modified ' + code.modified_date.split(' ')[0] + '<br />' + 'views ' + code.statistic.pageview + ' / ' + 'forked ' + code.statistic.forked + ' / ' + '♥ ' + code.statistic.favorite + '</p>' + '</div>' + '</div>'; } } // Behavior options options.ie = navigator.userAgent.match(/MSIE\s([^;]*)/); options.current = options.maxCodes = n; options.timer = null; options.timeout = options.interval; if (options.loop !== true) { options.interval = options.duration = 0; } return n; }; // // Exec animation // var doAnimation = function (obj, callback) { if (options.ie) { obj.hide().slideDown(options.duration, callback); } else { obj.hide().css({opacity: 0}).slideDown(options.duration).animate({opacity: 1}, options.duration, callback); } }; // // Main loop // var mainLoop = function () { clearTimeout(options.timer); if (options.body.hasClass('doticker-stop') === false) { // Restet pointer if (options.current >= options.maxCodes) { options.current = 0; } // Add content var e = options.body.pend(options.codes[options.current]).children(':first'); // It causes jump effect without height setting // cf: http://blog.pengoworks.com/index.cfm/2009/4/21/Fixing-jQuerys-slideDown-effect-ie-Jumpy-Animation e.height(e.height()); // Show with animation doAnimation(e, function () { var f = options.body.children(); var i = f.length - 1; if (options.loop === true && options.scrollbar === false) { // Remove unvisible items for (; i >= 0; i--) { if ($(f[i]).offset().top > options.bottom) { $(f[i]).remove(); } else { break; } } } else { // Remove overflow items for (; i >= options.maxCodes; i--) { $(f[i]).remove(); } } }); // Set next item options.current++; } // Next loop if (options.loop === true || options.current !== options.maxCodes) { options.timer = setTimeout(mainLoop, options.interval); } }; var errorMsg = function (msg) { options.body.append('<div class="' + options.id + 'doc">' + msg + '</div>'); }; // // Initialization // var init = function () { setupStyles(); setupWidget(); // Setup Ajax default settings $.ajaxSetup({ dataType: "jsonp", data: { name: options.name }, timeout: options.timeout, error: function (jqXHR, textStatus, errorThrown) { errorMsg(textStatus); } }); // Now get the user infomation $.ajax({ url: options.url_user, success: function (user, textStatus, jqXHR) { if (user.error === undefined) { showProfile(user); // Now get the codes list $.ajax({ url: options.url_list, success: function (list, textStatus, jqXHR) { if (setupCodes(list)) { mainLoop(); } } }); } else { errorMsg(user.error); } } }); }; init(); return $this; }; })(jQuery); <!-- ここにウィジェットを挿入する div を置きます(高さを必ず指定します) --> <div id="ticker"> </div> <!-- パラメータテスト用のフォーム --> <div id="form"> <form action="javascript:void(0);"> <p> user: <input type="text" name="name" size="15"> </p> <p> loop: <select name="loop"> <option value="false"> false </option> <option value="true"> true </option> </select> </p> <p> maxCodes: <input type="text" name="maxCodes" size="10"> </p> <p> interval: <input type="text" name="interval" size="10"> </p> <p> scrollbar: <select name="scrollbar"> <option value="false"> false </option> <option value="true"> true </option> </select> </p> <p> duration: <select name="duration"> <option value="slow"> slow </option> <option value="normal"> normal </option> <option value="fast"> fast </option> </select> <small> or msec </small> </p> <p> width: <input type="text" name="width" size="10"> <small> or auto </small> </p> <p> height: <input type="text" name="height" size="10"> </p> <p> background: <input type="text" name="background" size="10"> </p> <p> bodyground: <input type="text" name="bodyground" size="10"> </p> <p> bordercolor: <input type="text" name="bordercolor" size="10"> </p> <p> <input type="submit" value="変更する"> </p> </form> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> function setForm(options) { var i, value; for (i in options) { value = options[i]; if (value === true) { value = "true"; } else if (value === false) { value = "false"; } $("[name='" + i + "']").val(value); } } function getForm() {; var i, value, f = $('form p').children(), n = f.length - 1, opts = {}; for (i = 0; i < n; i++) { value = $(f[i]).val(); if (value === "true") { value = true; } else if (value === "false") { value = false; } opts[$(f[i]).attr("name")] = value; } return opts; } $(function() { var options = { name: 'tokkonopapa', loop: true, maxCodes: 10, interval: 6000, scrollbar: false, duration: 'slow', width: '250px', height: '300px', background: '#9bc6f2', bodyground: '#fff', bordercolor: '#888' }; var ticker = $("#ticker").doticker(options); setForm(options); $('form').submit(function() { $(ticker).doticker(getForm()); }); }); </script> forked: jsdo.it --> Profile Codes Streamer/Ticker Widget - jQuery plugin body { font-family: "lucida grande",lucida,tahoma,helvetica,arial,sans-serif; font-size: 14px; } #ticker { min-height: 300px; margin-right: 20px; float: left; } #form p { margin: 0.5em; } // forked from tokkonopapa's "jsdo.it my codes ticker jQuery plugin" http://jsdo.it/tokkonopapa/eep7 /* * doticker.js v1.0.1 * * Copyright (c) 2011 tokkonoPapa http://tokkono.cute.coocan.jp/blog/slow/ * * doticker.js is freely distributable under the terms of an MIT-style license. * For details, see http://www.opensource.org/licenses/MIT */ (function ($) { $.fn.doticker = function (opts) { var $this = this; var defaults = { loop: true, maxCodes: 10, interval: 6000, scrollbar: false, duration: 'slow', width: 'auto', height: '300px', background: '#9bc6f2', bodyground: '#fff', bordercolor: '#888', url_user: 'http://api.jsdo.it/v0.2/user/show.json', url_list: 'http://api.jsdo.it/v0.2/user/codes.json', url_code: 'http://api.jsdo.it/v0.2/code/show.json', url_logo: 'http://jsdo.it/img/common/sitename_03.png', name: '' }; var options = $.extend(defaults, opts); // For restart clearTimeout(options.timer); $this.empty(); // // Setup styles // var setupStyles = function () { var s = '.doticker-wrap {' + 'float:left;' + 'width:[width];' + 'margin:0 auto;' + 'padding:0;' + 'border-radius:5px;' + 'background:[background];' + 'font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif !important;' + '}\n' + '.doticker-wrap * {' + 'margin:0 !important;' + 'padding:0 !important;' + '}\n' + '.doticker-wrap img {' + 'float:left;' + 'border:none;' + '}\n' + '#[id]head,\n' + '#[id]foot {' + 'min-height:32px !important;' + 'padding:10px !important;' + 'overflow:hidden;' + 'position:relative;' + '}\n' + '#[id]head {' + 'font-size:14px !important;' + 'line-height:1.4 !important;' + '}\n' + '#[id]head img {' + 'width:32px !important;' + 'height:32px !important;' + '}\n' + '#[id]head div {' + 'margin-top:-4px !important;' + 'margin-left:40px !important;' + '}\n' + '#[id]head p {' + 'margin-right:4px !important;' + 'font-size:12px !important;' + 'background:[background];' + '}\n' + '#[id]body {' + 'clear:both;' + 'height:[height];' + 'margin:0 1px !important;' + 'font-size:12px;' + 'overflow:[scrollbar];' + 'border-radius:5px;' + 'background:[bodyground];' + '}\n' + '.[id]doc {' + 'clear:both;' + 'padding:8px !important;' + 'background:[bodyground];' + 'border-bottom:1px dotted [bordercolor];' + '}\n' + '.[id]doc img {' + 'width:50px !important;' + 'height:50px !important;' + '}\n' + '.[id]doc div {' + 'margin-left:58px !important;' + '}\n' + '.[id]doc h5 {' + 'font-size:100%;' + 'font-weight:normal;' + '}\n' + '.[id]doc p {' + 'margin-top:4px !important;' + 'font-size:12px !important;' + '}\n' + '#[id]foot {' + 'font-size:12px !important;' + 'line-height:1.2 !important;' + 'padding-bottom:6px !important;' + '}\n' + '#[id]foot img {' + 'width:79px;' + 'height:39px;' + 'margin-top:-3px !important;' + '}\n' + '#[id]foot p {' + 'top:50%;' + 'margin-left:90px !important;' + 'margin-right:8px !important;' + '}\n'; // Style options options.id = $this.attr('id') + '-dt-'; options.scrollbar = options.scrollbar === true ? 'auto' : 'hidden'; // Replace '[key]' with value in options $.each('id width height scrollbar background bodyground bordercolor'.split(' '), function (i, key) { // s = s.replace(new RegExp('\\[' + key + '\\]', 'img'), options[key]); s = s.split('[' + key + ']').join(options[key]); }); // Add styles into the head var e = document.createElement('style'); e.type = 'text/css'; if (e.styleSheet) { e.styleSheet.cssText = s; } else { e.innerHTML = s; } document.getElementsByTagName("head")[0].appendChild(e); }; // // Setup ticker widget // var setupWidget = function () { var id = options.id; $this.append( '<div class="doticker-wrap">' + '<div id="' + id + 'head"></div>' + '<div id="' + id + 'body"></div>' + '<div id="' + id + 'foot">' + '<a href="http://jsdo.it/">' + '<img src="' + options.url_logo + '" title="jsdo.it" />' + '</a>' + '<p><a href="http://jsdo.it/">Share JavaScript, HTML5 and CSS</a></p>' + '</div>' + '</div>' ); // Shortcut objects options.bottom = $('#' + id + 'foot').offset().top; options.body = $('#' + id + 'body'); options.body.pend = options.loop === true ? options.body.prepend : options.body.append; // Mouse event $('#' + id + 'body').hover( function () { options.body.addClass('doticker-stop'); }, function () { options.body.removeClass('doticker-stop'); } ); }; // // Setup widget header with user info // var showProfile = function (user) { // Correct bug user.url = 'http://jsdo.it/' + user.name; $('#' + options.id + 'head').append( '<a href="' + user.url + '">' + '<img src="' + user.icon + '" title="profile" />' + '</a>' + '<div>' + '<h4>' + '<a href="' + user.url + '" title="profile" target="_blank">' + user.name + '</a>' + '</h4>' + '<p>' + '<a href="' + user.url + '/codes" title="codes" target="_blank">codes ' + user.counts.codes + '</a> / ' + 'forked ' + user.counts.forked + ' / ' + '<a href="' + user.url + '/favorites" title="favorites" target="_blank">♥ ' + user.counts.favorited + '</a>' + '</p>' + '</div>' ); }; // // Keep the codes of interest // var setupCodes = function (list) { options.codes = []; var n = 0; if (list.results !== undefined) { n = list.results.length < options.maxCodes ? list.results.length : options.maxCodes; var i, code; for (i = 0; i < n; i++) { code = list.results[i]; options.codes[i] = document.createElement('div'); options.codes[i].innerHTML = '<div class="' + options.id + 'doc">' + '<a href="' + code.url + '" target="_blank">' + '<img src="' + code.thumbnail['100'] + '" title="' + code.title + '" />' + '</a>' + '<div>' + '<h5>' + '<a href="' + code.url + '" target="_blank">' + code.title + '</a>' + '</h5>' + '<p>' + 'Last modified ' + code.modified_date.split(' ')[0] + '<br />' + 'views ' + code.statistic.pageview + ' / ' + 'forked ' + code.statistic.forked + ' / ' + '♥ ' + code.statistic.favorite + '</p>' + '</div>' + '</div>'; } } // Behavior options options.ie = navigator.userAgent.match(/MSIE\s([^;]*)/); options.current = options.maxCodes = n; options.timer = null; options.timeout = options.interval; if (options.loop !== true) { options.interval = options.duration = 0; } return n; }; // // Exec animation // var doAnimation = function (obj, callback) { if (options.ie) { obj.hide().slideDown(options.duration, callback); } else { obj.hide().css({opacity: 0}).slideDown(options.duration).animate({opacity: 1}, options.duration, callback); } }; // // Main loop // var mainLoop = function () { clearTimeout(options.timer); if (options.body.hasClass('doticker-stop') === false) { // Restet pointer if (options.current >= options.maxCodes) { options.current = 0; } // Add content var e = options.body.pend(options.codes[options.current]).children(':first'); // It causes jump effect without height setting // cf: http://blog.pengoworks.com/index.cfm/2009/4/21/Fixing-jQuerys-slideDown-effect-ie-Jumpy-Animation e.height(e.height()); // Show with animation doAnimation(e, function () { var f = options.body.children(); var i = f.length - 1; if (options.loop === true && options.scrollbar === false) { // Remove unvisible items for (; i >= 0; i--) { if ($(f[i]).offset().top > options.bottom) { $(f[i]).remove(); } else { break; } } } else { // Remove overflow items for (; i >= options.maxCodes; i--) { $(f[i]).remove(); } } }); // Set next item options.current++; } // Next loop if (options.loop === true || options.current !== options.maxCodes) { options.timer = setTimeout(mainLoop, options.interval); } }; var errorMsg = function (msg) { options.body.append('<div class="' + options.id + 'doc">' + msg + '</div>'); }; // // Initialization // var init = function () { setupStyles(); setupWidget(); // Setup Ajax default settings $.ajaxSetup({ dataType: "jsonp", data: { name: options.name }, timeout: options.timeout, error: function (jqXHR, textStatus, errorThrown) { errorMsg(textStatus); } }); // Now get the user infomation $.ajax({ url: options.url_user, success: function (user, textStatus, jqXHR) { if (user.error === undefined) { showProfile(user); // Now get the codes list $.ajax({ url: options.url_list, success: function (list, textStatus, jqXHR) { if (setupCodes(list)) { mainLoop(); } } }); } else { errorMsg(user.error); } } }); }; init(); return $this; }; })(jQuery); <!-- ここにウィジェットを挿入する div を置きます(高さを必ず指定します) --> <div id="ticker"> </div> <!-- パラメータテスト用のフォーム --> <div id="form"> <form action="javascript:void(0);"> <p> user: <input type="text" name="name" size="15"> </p> <p> loop: <select name="loop"> <option value="false"> false </option> <option value="true"> true </option> </select> </p> <p> maxCodes: <input type="text" name="maxCodes" size="10"> </p> <p> interval: <input type="text" name="interval" size="10"> </p> <p> scrollbar: <select name="scrollbar"> <option value="false"> false </option> <option value="true"> true </option> </select> </p> <p> duration: <select name="duration"> <option value="slow"> slow </option> <option value="normal"> normal </option> <option value="fast"> fast </option> </select> <small> or msec </small> </p> <p> width: <input type="text" name="width" size="10"> <small> or auto </small> </p> <p> height: <input type="text" name="height" size="10"> </p> <p> background: <input type="text" name="background" size="10"> </p> <p> bodyground: <input type="text" name="bodyground" size="10"> </p> <p> bordercolor: <input type="text" name="bordercolor" size="10"> </p> <p> <input type="submit" value="変更する"> </p> </form> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> function setForm(options) { var i, value; for (i in options) { value = options[i]; if (value === true) { value = "true"; } else if (value === false) { value = "false"; } $("[name='" + i + "']").val(value); } } function getForm() {; var i, value, f = $('form p').children(), n = f.length - 1, opts = {}; for (i = 0; i < n; i++) { value = $(f[i]).val(); if (value === "true") { value = true; } else if (value === "false") { value = false; } opts[$(f[i]).attr("name")] = value; } return opts; } $(function() { var options = { name: 'tokkonopapa', loop: true, maxCodes: 10, interval: 6000, scrollbar: false, duration: 'slow', width: '250px', height: '300px', background: '#9bc6f2', bodyground: '#fff', bordercolor: '#888' }; var ticker = $("#ticker").doticker(options); setForm(options); $('form').submit(function() { $(ticker).doticker(getForm()); }); }); </script> body { font-family: "lucida grande",lucida,tahoma,helvetica,arial,sans-serif; font-size: 14px; } #ticker { min-height: 300px; margin-right: 20px; float: left; } #form p { margin: 0.5em; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author The_Radical_One Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/iTYv/js"></script> application css CSS css3 html5 html5_elements&api HTMLv5 Javascript javascript jQuery jquery other plugin smartphones&tablets user_interface Discussion Questions on this code? Tags HTMLv5 Javascript application css css3 html5 html5_elements&api jQuery other plugin smartphones&tablets user_interface