Giter Club home page Giter Club logo

jquery-advanced-news-ticker's People

Contributors

bitdeli-chef avatar risq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-advanced-news-ticker's Issues

row_height vs max_rows

Hi,

I'm struggling with this problem: I want to show one item at the time, but I need a fairly tall size row (at least 30px) and when I set the height of the row to 30px it shows part of the second item, even when I have max_rows set to 1.

Can anyone help me with this?

Thanks

Why this javascript and css code is not working on my site ?

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <script language='JavaScript'> $(function(){ $("ul#ticker01").liScroll(); }); /*! * 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.10 }, settings); return this.each(function(){ var $strip = jQuery(this); $strip.addClass("newsticker") var stripWidth = 1; $strip.find("li").each(function(i){ stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi }); var $mask = $strip.wrap("
"); var $tickercontainer = $strip.parent().wrap("
"); 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); }); }); }; </script> <style> /* liScroll styles */ .tickercontainer { /* the outer div with the black border */ border: 1px solid #000; background: #fff; width: 500px; height: 27px; margin: auto 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: 500px; overflow: hidden; } ul.newsticker { /* that's your list */ position: relative; left: 500px; 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 a { white-space: nowrap; padding: 0; color: #ff0000; font: bold 10px Verdana; margin: 0 50px 0 0; } ul.newsticker span { margin: 0 10px 0 0; } </style> <style> #oneliner { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; position: relative; margin: 80px auto 40px auto; width: 900px; height: 44px; background-color: #fff; border-radius: 2px; } #oneliner:before, #oneliner:after { border-radius: 100px 100px 100px 100px / 10px 10px 10px 10px; bottom: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); content: ""; left: 10px; position: absolute; right: 10px; top: 50%; z-index: -1; } #oneliner .header { background-color: #ff2e2e; display: inline-block; width: 180px; height: 44px; text-transform: uppercase; font-weight: 500; line-height: 44px; color: #fff; white-space: nowrap; overflow: hidden; text-align: center; border-radius: 2px 0 0 2px; cursor: pointer; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-animation: redPulse 4s infinite; -moz-animation: redPulse 4s infinite; animation: redPulse 4s infinite; } #oneliner:hover .header { -webkit-animation: redPulse 1s infinite; -moz-animation: redPulse 1s infinite; animation: redPulse 1s infinite; } #oneliner .header:active { background-color: #000; margin-left: -12px; color: #aaa; } #oneliner ul.newsticker { display: inline-block; height: 44px; width: 710px; overflow: hidden; margin: 0 0 0 -3px; padding: 0 0 0 6px; line-height: 44px; font-weight: 500; background-color: #fafafa; } #oneliner ul.newsticker > li{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px dotted #888; } @-webkit-keyframes redPulse { from { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; } 50% { background-color: #bd0000; -webkit-box-shadow: 0 0 14px #ff2e2e; } to { background-color: #ff2e2e; -webkit-box-shadow: 0 0 9px #555; } } @-moz-keyframes redPulse { from { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; } 50% { background-color: #bd0000; -moz-box-shadow: 0 0 14px #ff2e2e; } to { background-color: #ff2e2e; -moz-box-shadow: 0 0 9px #555; } } @Keyframes redPulse { from { background-color: #ff2e2e; box-shadow: 0 0 9px #555; } 50% { background-color: #bd0000; box-shadow: 0 0 14px #ff2e2e; } to { background-color: #ff2e2e; box-shadow: 0 0 9px #555; } } </style>
Breaking News
  • hello
  • hi

The first part is working but the second part where start with the <style> and with oneliner is not working. Why the second part is not working ?

row_height setting for responsive design

Hi there,
I am using the example 'nt_example1' to create a news ticker. Is it possible to customize row_height dynamically according to the screen resolution? For example, if the screen resolution 1024px, the row_height is set to be 100px. However, if the screen resolution is smaller than that, I would need around 150px for the row_height. Is there any way to change it based on the screen resolution?

Or is it possible to adjust the row_height according to the size of the content?

animation issue

I have noticed that when using the newsticker, when the number of news items is equal or lower than max_rows, the slide animation still occurs.

Do not scroll when there is only one item.

When there is only one item in the scroll the ticker stills animate it. It would be usefull to add a configuration flag to turning this off.

I can confirm this occurs on a page with multiple tickers.

Cannot destroy

this._destroy is undefined, so calling destroy() on the plugin throws an exception.

Add additional moving(dir) callback

The movingUp/movingDown callbacks are useful, but it may make more sense to create a generic moving(dir) callback so that we don't need to care about the direction if we don't need to.

How can i add on one single page two different examples of the newsTicker ?

This is my code i'm not sure yet how to put it on jsfiddle: http://jsfiddle.net/chocolade/V4g83/

What iwant to do my goal is that the first part that is working will display each two lines from my text file in a newsTicker and scroll the text up.

The second part i want to add a Breaking News red box and inside display text running from right to left.

If i put each part on another page in my website it will work but when i put them togeather it's a mess it dosent work. The second part is inside or override the first part.

This is my site you can look here the second part alone is working:

http://newsxpressmedia.com/

And in this part of my website i added them togeather and this is the result:

http://newsxpressmedia.com/test.html

Could you show me the full code that is working for both of them on the same page ?
I tried many things also used noConflict(true) but nothing worked so far.

Thanks.

IE8 Incompatibility

I can't get the plugin to work well with IE8, is this expected? If so that's fine, I just wanted to confirm whether it was my mistake in using the plugin or not.

Disable Infinite Loop?

Wonderful script. I just need a little help.

I've been unable to figure this out with the documentation... is there any way to remove the infinite scroll? For example: if there's only five items on the ticker, it stops scrolling after five and doesn't loop back to number one.

Is this possible?

max_row limit

it seems that max_row is limited to max 5 items. when i set it to 6,7 and ... it only shows 5.

Working with mysql data

There's a way to use it to show data from Mysql, with automatic rollup ? I mean, i need to create a ticker that have the text provided from mysql data, and id needs do roll without user intervension, with automatic update (ajax)

Support for button states

For those of us who may wish to enable/disable buttons based on the ticker state, it would be useful to add:

startButtonDisabledClass - Automatically apply this class when ticker is running
stopButtonDisabledClass - Automatically apply this class when ticker is stopped
nextButtonDisabledClass + callback to return true/false whether the next button should be disabled
prevButtonDisabledClass + callback to return true/false whether the prev button should be disabled

Start functionality needs improvement

The current start functionality is a little simplistic/naive given only 0/1 (false/true).

In my current scenario I would like the ticker to not start unless there's some work to be done (ie: total height of li's within the ul must exceed specified height of ul). My initial thought is that this should be a default behaviour, but in order to maintain backwards compatibility and to prevent causing issues for people who don't want this behaviour, I propose that autostart should be able to handle three values: 0/1/function. The function can then output 0/1/false/true in order to determine if the ticker should start.

Change of <li> height due to different screen-sizes breaks Ticker

Mostly due to sites using em/rem units, changing font sizes on different form factor and/or due to line-breaks in portrait screens - the ticker breaks, with content shown partially (or along with the next ticker shown partially). Ellipses aren't always the solution if it happens.

Fixing this won't be very difficult, and I've managed it for my purpose in debloper/glusterweb@58757f4

Can send pull request (with less glued, more generic code), if there's a need for fixing this upstream.

max_rows Configuration

Hi, there is an error on the landing page, when you show the configuration methods, you put max_row and it should be "max_rows".
Amazing plugin, i'm trying to use it on a twitter feed.

Variable Row Height

I have different row heights, does this plugin only work with a static height?

Not scrolling in proper order...

When the Ticker goes through the LI list, it is showing them in random order (for example, with 3 LI's it shows the first LI, then the third LI ,then the second LI.

Some tage in content box are not displayed at the correct place

Hi,

I'm using tinymce as text editor.

I got some issue with span in content so I will I prevent user to enter span in content to not break the display, which other htlm tag should I avoid?

I got issue with ahref and fixed it by tinymce settings

In both case the content are displayed in the title box instead of the content box.

I'm using this code

$(function() {
$('#nt-example2-infos .infos-hour').html($('#nt-example2 li:first span').html());
$('#nt-example2-infos .infos-text').html($('#nt-example2 li:first').data('infos'));
}); 

Work on Hover?

Is there a way to set this so that the arrows can work onhover instead of onclick?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.