javascript - How do you make JQuery WebTicket full-screen width? -
basically, webticket goes little on 2/5ths of screen, i'm trying figure out how can stretch width out covers entire screen's width.
fiddle: http://fiddle.jshell.net/wf43x/56/light/
javascript:
/*! * webticker 1.3 * examples , documentation at: * http://jonmifsud.com * 2011 jonathan mifsud * version: 1.2 (26-june-2011) * dual licensed under mit , gpl licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * requires: * jquery v1.4.2 or later * */ (function($) { var globalsettings = new array(); var methods = { init: function(settings) { // settings = jquery.extend({ travelocity: 0.05, direction: 1, moving: true }, settings); globalsettings[jquery(this).attr('id')] = settings; return this.each(function() { var $strip = jquery(this); $strip.addclass("newsticker") var stripwidth = 0; var $mask = $strip.wrap("<div class='mask'></div>"); $mask.after("<span class='tickeroverlay-left'> </span><span class='tickeroverlay-right'> </span>") var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>"); $strip.find("li").each(function(i) { stripwidth += jquery(this, i).outerwidth(true); }); $strip.width(stripwidth + 200); //20 used ie9 fix function scrollnews(spazio, tempo) { if (settings.direction == 1) $strip.animate({ left: '-=' + spazio }, tempo, "linear", function() { $strip.children().last().after($strip.children().first()); var first = $strip.children().first(); var width = first.outerwidth(true); var deftiming = width / settings.travelocity; //$strip.css("left", left); $strip.css("left", '0'); scrollnews(width, deftiming); }); else $strip.animate({ right: '-=' + spazio }, tempo, "linear", function() { $strip.children().last().after($strip.children().first()); var first = $strip.children().first(); var width = first.outerwidth(true); var deftiming = width / settings.travelocity; //$strip.css("left", left); $strip.css("right", '0'); scrollnews(width, deftiming); }); } var first = $strip.children().first(); var travel = first.outerwidth(true); var timing = travel / settings.travelocity; scrollnews(travel, timing); $strip.hover(function() { jquery(this).stop(); }, function() { if (globalsettings[jquery(this).attr('id')].moving) { var offset = jquery(this).offset(); var first = $strip.children().first(); var width = first.outerwidth(true); var residualspace; if (settings.direction == 1) residualspace = parseint(jquery(this).css('left').replace('px', '')) + width; else residualspace = parseint(jquery(this).css('right').replace('px', '')) + width; var residualtime = residualspace / settings.travelocity; scrollnews(residualspace, residualtime); } }); }); }, stop: function() { if (globalsettings[jquery(this).attr('id')].moving) { globalsettings[jquery(this).attr('id')].moving = false; return this.each(function() { jquery(this).stop(); }); } }, cont: function() { // if (!(globalsettings[jquery(this).attr('id')].moving)) { globalsettings[jquery(this).attr('id')].moving = true; var settings = globalsettings[jquery(this).attr('id')]; return this.each(function() { var $strip = jquery(this); function scrollnews(spazio, tempo) { if (settings.direction == 1) $strip.animate({ left: '-=' + spazio }, tempo, "linear", function() { $strip.children().last().after($strip.children().first()); var first = $strip.children().first(); var width = first.outerwidth(true); var deftiming = width / settings.travelocity; //$strip.css("left", left); $strip.css("left", '0'); scrollnews(width, deftiming); }); else $strip.animate({ right: '-=' + spazio }, tempo, "linear", function() { $strip.children().last().after($strip.children().first()); var first = $strip.children().first(); var width = first.outerwidth(true); var deftiming = width / settings.travelocity; //$strip.css("left", left); $strip.css("right", '0'); scrollnews(width, deftiming); }); } var offset = jquery(this).offset(); var first = $strip.children().first(); var width = first.outerwidth(true); var residualspace; if (settings.direction == 1) residualspace = parseint(jquery(this).css('left').replace('px', '')) + width; else residualspace = parseint(jquery(this).css('right').replace('px', '')) + width; var residualtime = residualspace / settings.travelocity; scrollnews(residualspace, residualtime); }); } } }; $.fn.webticker = function(method) { // method calling logic if (methods[method]) { return methods[method].apply(this, array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('method ' + method + ' not exist on jquery.webticker'); } }; })(jquery); jquery('#webticker').webticker()
css:
.tickercontainer { /* outer div black border */ width: 500px; height: 27px; margin: 0; padding: 0; overflow: hidden; } .tickercontainer .mask { /* serves mask. sort of padding both left , right */ position: relative; top: 8px; height: 18px; /*width: 718px;*/ overflow: hidden; } ul.newsticker { /* that's 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 check elem's width */ margin: 0; padding-right: 15px; /*background: #fff;*/ }
thanks, dan
Comments
Post a Comment