jquery ticker

I have been trying to find an html 5 replacement for

<marquee>

which is not supported by html 5 and the dumb idiots at wc3 have not give us any easy to implement replacement. there is text annimation css which is very complicated, some java scripts and so on. Searching for html 5 marquee or html 5 ticker has brought up a few items and I have not been able to get any to work…

my latest attempt came from here https://maze.digital/webticker/

https://weather.scottsworld.info/index.html

I installed jquery and webticker.min.js I think the problem lies in step 4

[quote]

In your Javascript file, select with jQuery the list you want to convert to a ticker, and run the webTicker function.

$('#webTicker').webTicker();

WebTicker is now activated on the list with id

Scott, have you looked at the ‘Examples’ web page?

From what I have read (learned) reading the different web pages (as well as the GitHub repository), you must first define what you want to appear in the ticker, ie: the HTML markup used for initializing the Web Ticker, such as:


<ul id="webticker-update-example" >
    <li data-update="item1">WebTicker v3.0.0 has just been released! Read the new documentation.</li>   
    <li data-update="item2">WebTicker v3.0.0 now has commercial licenses available. Check which license is applicable for you.</li>
</ul>

And then you run the webTicker function:


<script>
$('#webTicker').webTicker();
</script>

Looking at the source code for your web page, may I suggest that you load the required JQuery code from an external source such as the Cloudflare ‘CDNJS’ libraries or the ‘Google CDN’ hosted libraries. :wink:


<script src="scripts/jquery-3.4.1.min.js"></script>
<script src="scripts/jquery.webticker.min.js"></script><script src="scripts/maze.digital_main.js"></script>

just under my goolge Analytics code in the header

I looked at his examples but other than one little bit of code gives no examples of the jqury code and I don’t know anything about jquery…

[quote]

In your Javascript file, select with jQuery the list you want to convert to a ticker, and run the webTicker function.

$('#webTicker').webTicker();

WebTicker is now activated on the list with id

Scott, I have tried using that ticker on my test pages and could not get the script to work properly.

But, I have found another script that offers more possibilities for your ticker. It is called ‘jQuery Marquee with CSS3 Animations Support’ and can be found on the jQueryScript.Net site at ‘Text Scrolling Plugin for jQuery - Marquee’.

Thanks, got it working, still working on tweeking the settings https://weather.scottsworld.info/index.html Had to search google for easing.js and pause.js github had them. BTW the default speed number was WAY too low, it was moving so fast you could hardly see what it was.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="scripts/jquery-3.4.1.min.js"></script>
<script src="scripts/jquery.marquee.min.js"></script>
<script src="scripts/jquery.easing.min.js"></script>
<script src="scripts/jquery.pause.min.js"></script>
<script>
	$(function(){
		$('.marquee').marquee();
	});
    $(function(){
  $('.marquee').marquee({

  //If you wish to always animate using jQuery
  allowCss3Support: true,
  //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
  css3easing: 'linear',
  //requires jQuery easing plugin. Default is 'linear'
  easing: 'linear',
  //pause time before the next animation turn in milliseconds
  delayBeforeStart: 1000,
  //'left', 'right', 'up' or 'down'
  direction: 'left',
  //true or false - should the marquee be duplicated to show an effect of continues flow (setiing this to true resulted in two duplicate lines of ticker)
  duplicated: false,
  //speed in milliseconds of the marquee in milliseconds
  duration: 80000,
  //gap in pixels between the tickers
  gap: 20,
  //on cycle pause the marquee
  pauseOnCycle: false,
  //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
  pauseOnHover: true,
  //the marquee is visible initially positioned next to the border towards it will be moving
  startVisible: true,
  });
});
</script>
</head>


Great that you have managed to get the ‘markee’ script going … good for you.

In the previous message, I suggested to you that you get some of the main script libraries from main servers (such as the Cloudflare ‘CDNJS’ libraries or the ‘Google CDN’ hosted libraries) to save traffic on your own web server. Not only that, those main server are usually much faster than your web server in downloading those libraries.

So, you could replace the following lines of code:


<script src="scripts/jquery-3.4.1.min.js"></script>
<script src="scripts/jquery.marquee.min.js"></script>
<script src="scripts/jquery.easing.min.js"></script>

with:


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

The following script is not really necessary as most modern browser will provide a pause on hover, but it can be kept for the older browser:


<script src="scripts/jquery.pause.min.js"></script>

The following portion of the script should be written differently - this code:


<script>
    $(function(){
        $('.marquee').marquee();
    });
    $(function(){
  $('.marquee').marquee({

  //If you wish to always animate using jQuery

should be corrected to (removing the three first lines):


<script>
$(function(){
  $('.marquee').marquee({

  //If you wish to always animate using jQuery

There is no need to have the same code twice - ie:


$(function(){
   $('.marquee').marquee();
});

Ok, thanks it was the combination of the double code and

 //true or false - should the marquee be duplicated to show an effect of continues flow
  duplicated: true {/code]

before the combination of the two causing the multiple lines of ticker. Setting the above to false got rid of the multiple lines but would only scroll once until the page reloads. Getting rid of the extra code and resetting this to true now I have one line of continuously scrolling ticker.

Next thing I would like to fix is give it some margin/width constraints I tried styling the 
``` but it has no effect on it, the ticker is off the right side of the page.

Had a css based ticker that did the same thing but it also made the page scroll sideways so it had to go.

I have good hosting and the scripts are small, it is faster and more reliable than bringing them from somewhere else and more secure. This morning I saw the browser say it was waiting on google analytics to load… That is something I can not load locally.

Scott, you misunderstand the reason behind my suggestion. When someone download your web page into his/her browser and, for example, you link/point JQuery to the Cloudflare ‘CDNJS’ libraries, those libraries are downloaded into the user’s browser directly from the Cloudflare ‘CDNJS’ libraries without having to access (go through) your hosting server - the libraries are NOT downloaded to your hosting server and the libraries are NOT uploaded to the user’s browser - the libraries go directly from the Cloudflare ‘CDNJS’ to the user’s browser - thus, the loading of the libraries is quicker and safer… :wink:

I got it to run with in the margins with this in the marquee div tag. ,

  style="width: 90%; margin-left: auto; margin-right: auto; overflow: hidden;" 

I under stand the cds argument, but what happens when the service is slow or down as happened with Google analytics and the page waiting on it to load. Once they have loaded my page they have it. It runs on my mobile devices with out any perceptual delay. It is not that big of a file using the .min.js

It does not happen - I have been getting the libraries for JQuery, Sparklines, KWCountdown, EHCountdown, HighCharts, jQueryUI, Tablesorter, NivoSlider, and Modernizr using the Cloudflare ‘CDNJS’ site without any interruption or slowdown - in my view, the Cloudflare site has proven to be more reliable than the Google CDN site…

Next project for the ticker is change the color of the weather advisory when there is one. I think this might work but am unsure of the brackets/punctuation…


<script>
 (var NOAAThreshold = document.getElementById('NOAA'));
    if (val  NOAAThreshold == ('AZZ544 There are no active watches, warnings or advisories');{
       NOAAThreshold.style.color = "black";}
       )
  else {
       // if val  NOAAThreshold != ('AZZ544 There are no active watches, warnings or advisories');
       NOAAThreshold.style.color = "red";} 

}
</script>
<script>
 (var NOAAThreshold = document.getElementById('NOAA'));
    if (val  NOAAThreshold == ('AZZ544 There are no active watches, warnings or advisories');{
       NOAAThreshold.style.color = "black";}
       )
  else {
       // if val  NOAAThreshold != ('AZZ544 There are no active watches, warnings or advisories');
       NOAAThreshold.style.color = "red";
})
</script>
<script>
 (var NOAAThreshold = document.getElementById('NOAA'));
    if (val  NOAAThreshold == ('AZZ544 There are no active watches, warnings or advisories');{
       NOAAThreshold.style.color = "black";}
       )
  else {
       // if val  NOAAThreshold != ('AZZ544 There are no active watches, warnings or advisories');
       NOAAThreshold.style.color = "red";
}) 
</script>