Temperature Text Colour

[Mapantz]

I tried a search on here, but searches don't seem to work for me.

I've also had trawl on stackoverflow and can't find anything.

I want to experiment in making a new style home page and show various data that is colour coded

For example;

30°C
9.3°C
0°C
-5°C

etc..

Here's a page of colours that I would use to correspond to the temps: https://warehamwx.co.uk/colour_example.php

The trouble is, I get my values like this <td><span class="ajax" id="temp"></td> so I don't know how to go about it.

Any help greatly appreciated.

[beteljuice]

You are using smb_ajax.js ? - you are on your own !

You would need to break into the 'loop', check for id="temp", then check against value for color and add that style to the html content.

[Mapantz]

ah yes, the dreaded smb ajax!

Is it possible to do updates of data like smb, but with PHP? I've got all of the tags I use on my site being uploaded in to a PHP file.

[beteljuice]

I wasn't ignoring this ....

You gave an example of changing text colour of any temp value, then you gave a link to an example with changed background colours, then you gave a html example of a multi-span ajax call !

Hmpph .. How to tackle this ?
CSS3 / SASS although being able to create / prepend / append element content, can't actually 'see' it to do any calc( ) type stuff.

So ... Something to inspect content with numbers and perform some actions, In this case change colour(s).

If any one is interested a new beteljuice plaything.
It changes the background and text colour of the PARENT element of the data element for Mapantz custom temp range and colours.
Colours can easily be reversed or you could use the guts of the code to eg. change data units.
Or eg. create an alert at some predetermined data (numeric* or string) value.
* any numeric value MUST be at the start of the data (unless you know what you're doing )

It copes with static (hard-code, PHP, <#webtags>) and dynamic (ajax) content as long as the 'numeric' value is the first part of the data construct.
You may need to be a bit more creative with your containing elements and or style, but nothing too drastic
It won't be able to cope with 3rd party 'injects' where you can't alter the containing elements ..

Edit; It's pretty much an updated version of what Pintos original ajax does. We trawl the page for named class(es) and perform some action ...

So let me know if there is interest and I'll neaten-up / post the code.

[beteljuice]

OK Map - you've had the chance with your personal colours ...
Above link now works across a more realistic temperature range of -50 > +50 (using colours as in Yet Another Dayfile Reader)

[forestedge]

If any one is interested a new beteljuice plaything.
It changes the background and text colour of the PARENT element of the data element for Mapantz custom temp range and colours.
Colours can easily be reversed or you could use the guts of the code to eg. change data units.
Or eg. create an alert at some predetermined data (numeric* or string) value.
* any numeric value MUST be at the start of the data (unless you know what you're doing )

It copes with static (hard-code, PHP, <#webtags>) and dynamic (ajax) content as long as the 'numeric' value is the first part of the data construct.

Hi, I am trying to use this for webtag current temperature but no success so far with colours! Do I need to adapt the script?

Using Wordpress, hence the use of [insert_php] statement.

Code: Select all

<span style= "display: inline-block; width: 120px; text-align: center; border: 1px solid black;">
<span class= "Tcol" style= "font-size: 28px; font-weight: bold;">[insert_php] echo $temp.$tempunit; [/insert_php] </span>

Many Thanks

[beteljuice]

That little bit seems OK

A link to a test page ??

[forestedge]

A link to a test page ??

https://www.tottonweather.co.uk/testpage/ I have added the 3 examples but they do not look like yours! My preferred option is the first one with a dynamic update and coloured background.

[beteljuice]

the beteljuice has NEVER seen a 'basic' page with so much javascript and js calls in it
Is that because of wordpress ?

together with something has inserted html <p> etc. into the code section (perhaps also wordpress)

Your page IS loading jQuery, and also doing a check in the footer ... (but they are both a very early version)

So there is no need for the first line in my code.

In fact you can remove all this:

Code: Select all

// *** CHECK FOR JQUERY 
!window.jQuery && document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"%3E%3C/script%3E'));

// when and how to fire this function ?
// rather than event bubblers for individual changes, thinking bog standard time loop ....
// in that way we can ignore ajax and in max two loops any font colour will be correct
// and we save a lot of processor work !

I recommend you use Notepad++ to edit and paste into your page to circumvent any unwanted intervention by wordpress.

See if that fixes things ...

first one with a dynamic update

It can only be a dynamic update if you are using js ajax to update the element content from realtime.txt or similar