cloudy cloudy

Author Topic: jquery ticker  (Read 358 times)

0 Members and 1 Guest are viewing this topic.

Offline dsscheibe

  • Posts: 148
  • Phoenix, AZ
  • OS/Browser:
  • Win NT 10.0
  • Firefox 67.0
    • Scotts Weather Station, Cactus Wren, Phoenix, Arizona
jquery ticker
« on: May 28, 2019, 05:37:56 AM »
I have been trying to find an html 5 replacement for
Code: [Select]
<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 ‘webTicker

I have looked at his page source  the only place he has .js is in the header so I copied his main.js and the ticker stuff in his css file  some of his example classes in the examples do not exist in his css file but if you look at the page code the individual lines of code are styled.

there are 3 list items, the three marquee below are the list times and it should animate one ticker with all 3 in it, it stopped displaying all 3 list items and only shows the first but is not animating it.  Following his directions does not work.


Code: [Select]
<p>Jquery ticker test</p>
$('#webTicker').webTicker();
<div class="tickercontainer" style="height: 75px; overflow: hidden;">
        <ul id="WebTicker">
             <li data-update="item1" style="white-space: nowrap; float: left; padding: 0px 7px; line-height: 75px;">
AZZ544
There are no active watches, warnings or advisories</li>
            <li data-update="item2" style="white-space: nowrap; float: left; padding: 0px 7px; line-height: 75px;"><span class="datastrong">Daily Records:</span> Low Temperature:63°F at 7:57 AM High Temperature: 79.4°F at 3:47 PM  Daily high pressure: 29.267  Daily low pressure: 29.151  Daily low windchill: 62.6 Daily high heat index: 79.4°F Daily high gust speed: 22.0 Daily high average speed: 15.2</li>
            <li data-update="item3" style="white-space: nowrap; float: left; padding: 0px 7px; line-height: 75px;"><span class="datastrong">Daily Records:</span> Record high temperature: 100.8°F Record low temperature: 26.4°F  Record high gust: 38.0 mph  Record high average: 22.4 mph  Record daily rain: 1.12 In   Record low windchill: 23.9°F  Record high barometer: 29.967 inHg Record low barometer: 28.939 <abbr title="Inches of Mercury">inHg</abbr></li>
           <li class="ticker-spacer" style="float: left;width:138px;height:75px;"></li></ul><span class="tickeroverlay-left" style="display: none;">&nbsp;</span><span class="tickeroverlay-right" style="display: none;">&nbsp;</span>

</div>
Scott
Davis Pro2 Plus daytime aspirated, wired
Weather Display


Offline R_o_B

  • Posts: 317
  • Maple Bay, British Columbia, Canada
  • OS/Browser:
  • Win NT 10.0
  • Firefox 52.0
    • Tzouhalem-Maple Bay Weather
Re: jquery ticker
« Reply #1 on: May 28, 2019, 02:07:57 PM »
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:
Code: [Select]
<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:
Code: [Select]
<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:
R_o_B
---
eMail: weather@tzweather.org

Offline dsscheibe

  • Posts: 148
  • Phoenix, AZ
  • OS/Browser:
  • Win NT 10.0
  • Firefox 67.0
    • Scotts Weather Station, Cactus Wren, Phoenix, Arizona
Re: jquery ticker
« Reply #2 on: May 29, 2019, 09:18:49 AM »
Code: [Select]
<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 ‘webTicker’.
that is there but shows in the page, do I put script around it or do something else. I am brarely starting java script.
Scott
Davis Pro2 Plus daytime aspirated, wired
Weather Display


Offline R_o_B

  • Posts: 317
  • Maple Bay, British Columbia, Canada
  • OS/Browser:
  • Win NT 10.0
  • Firefox 52.0
    • Tzouhalem-Maple Bay Weather
Re: jquery ticker
« Reply #3 on: May 29, 2019, 03:41:12 PM »
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'.
« Last Edit: May 29, 2019, 04:09:56 PM by R_o_B »
R_o_B
---
eMail: weather@tzweather.org

Offline dsscheibe

  • Posts: 148
  • Phoenix, AZ
  • OS/Browser:
  • Win NT 10.0
  • Firefox 67.0
    • Scotts Weather Station, Cactus Wren, Phoenix, Arizona
Re: jquery ticker
« Reply #4 on: May 30, 2019, 07:50:16 AM »
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.

Code: [Select]
<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>



Scott
Davis Pro2 Plus daytime aspirated, wired
Weather Display


Offline R_o_B

  • Posts: 317
  • Maple Bay, British Columbia, Canada
  • OS/Browser:
  • Win NT 10.0
  • Firefox 52.0
    • Tzouhalem-Maple Bay Weather
Re: jquery ticker
« Reply #5 on: May 31, 2019, 03:01:40 PM »
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:
Code: [Select]
<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:
Code: [Select]
<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:
Code: [Select]
<script src="scripts/jquery.pause.min.js"></script>

The following portion of the script should be written differently - this code:
Code: [Select]
<script>
    $(function(){
        $('.marquee').marquee();
    });
    $(function(){
  $('.marquee').marquee({

  //If you wish to always animate using jQuery
should be corrected to (removing the three first lines):
Code: [Select]
<script>
$(function(){
  $('.marquee').marquee({

  //If you wish to always animate using jQuery
There is no need to have the same code twice - ie:
Code: [Select]
$(function(){
   $('.marquee').marquee();
});
R_o_B
---
eMail: weather@tzweather.org

Offline dsscheibe

  • Posts: 148
  • Phoenix, AZ
  • OS/Browser:
  • Win NT 10.0
  • Firefox 67.0
    • Scotts Weather Station, Cactus Wren, Phoenix, Arizona
Re: jquery ticker
« Reply #6 on: June 01, 2019, 07:56:50 PM »
Ok, thanks it was the combination of the double code and
Code: [Select]
//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 [code]<div class="marquee" style="width: 80%; margin-left: auto; margin-right: auto;">
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
Davis Pro2 Plus daytime aspirated, wired
Weather Display


Offline R_o_B

  • Posts: 317
  • Maple Bay, British Columbia, Canada
  • OS/Browser:
  • Win NT 10.0
  • Firefox 52.0
    • Tzouhalem-Maple Bay Weather
Re: jquery ticker
« Reply #7 on: June 02, 2019, 09:23:53 AM »
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:
R_o_B
---
eMail: weather@tzweather.org

Offline dsscheibe

  • Posts: 148
  • Phoenix, AZ
  • OS/Browser:
  • (Linux Mint)
  • Chrome 74.0.3729.157
    • Scotts Weather Station, Cactus Wren, Phoenix, Arizona
Re: jquery ticker
« Reply #8 on: June 03, 2019, 07:14:57 AM »
I got it to run with in the margins with this in the marquee div tag. ,
Code: [Select]
  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
Scott
Davis Pro2 Plus daytime aspirated, wired
Weather Display


Offline R_o_B

  • Posts: 317
  • Maple Bay, British Columbia, Canada
  • OS/Browser:
  • Win NT 10.0
  • Firefox 52.0
    • Tzouhalem-Maple Bay Weather
Re: jquery ticker
« Reply #9 on: June 03, 2019, 02:24:22 PM »
...but what happens when the service is slow or down as happened with Google analytics and the page waiting on it to load.
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...
R_o_B
---
eMail: weather@tzweather.org

Offline dsscheibe

  • Posts: 148
  • Phoenix, AZ
  • OS/Browser:
  • (Linux Mint)
  • Chrome 74.0.3729.157
    • Scotts Weather Station, Cactus Wren, Phoenix, Arizona
Re: jquery ticker
« Reply #10 on: June 15, 2019, 12:10:40 AM »
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..
Code: [Select]
<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>
Scott
Davis Pro2 Plus daytime aspirated, wired
Weather Display


 

cumulus