HTML "Title" to pop-up explanantion of fields

[mikechristelow]

I can never get the hang of when wind chill and heat index apply so have to keep looking these up. I decided to modify my Cumulus web page (the indexT.html page) to provide a little pop-up explanation of the criteria, whenever the cursor hovers over the text - see the attached picture.

You can do this using the HTML "abbr" (abbreviation) and "title" features. Edit the indexT.html file (best save a copy beforehand, just in case) and then change (for example)

<td>Windchill</td>

to

<td><abbr title="Wind chill is only defined for temperatures at or below 10 °C (50 °F) and wind speeds above 4.8 kilometres per hour (3.0 mph)">Windchill</abbr></td>

where
- the text enclosed in "" is what will appear in the pop-up (you can put whatever definition you want here of course), and
- Windchill is the text as it appears on the Cumulus web page

The next time Cumulus runs a web page update you will be able to hover the cursor over the Windchill label and the long text will pop-up automatically. Obviously you can use the same technique on any of the lables.

All I need to do now is sort out how to use an "if ... then ... else" statement so that the actual values for Windchill and Heat Index are shown only when they are applicable, and I display "N/A" or "---" when they are not.

Mike

[duke]

Nice idea, I like that. Something else to occupy my time

Duke

[Matt.j5b]

I was doing the same thing with the pop up labels to explain what heat index, wind chill etc are which I did yesterday, before I set up my website, hopefully today.

[beteljuice]

I must admit I've never used it, but as far as I can tell the only difference between using title=".. in <abbr> and in <span> is the dotted underline when using <abbr>.

[GraemeT]

You could use something like this:

Code: Select all

<?php
if ($temp<="10") 
		echo '<td>Windchill</td><td class="obs_data"><span class="ajax" id="wchill"></span></td>';
		else if (($temp>"27") && ($dew>"12") && ($hum>"40"))
		echo '<td>Heat Index</td><td class="obs_data"><span class="ajax" id="heatindex"></span></td>';
		else echo '<td></td><td class="obs_data"></td>';
?>

to decide whether to display windchill,heatindex, or nothing.

[mikechristelow]

Cheers Graeme. I assume (please excuse my naieivty) that this implies the use of PHP which I'm not using (as far as I know). I was hoping to be able to do this with javascript and html only.

[beteljuice]

To replace a line in the table with Heat Index / Windchill / (nothing) assuming you are using <#webtags> , temperature / dew in deg C and JavaScript:
(and using GraemeT logic)

Code: Select all

<tr class="td_temperature_data">
   <script language="JavaScript" type="text/javascript">
   document.write((<#RCtemp> >= 10 ? "<td>Windchill</td><td><#wchill>&nbsp;<#tempunit></td>" : (<#RCtemp> > 27 && <#RCdew> > 12 && <#RChum> > 40 ? "<td>Heat Index</td><td><#heatindex>&nbsp;<#tempunit></td>" : "<td>&nbsp;</td><td>&nbsp;</td>")));
    </script>
    <noscript><td>&nbsp;</td><td>&nbsp;</td></noscript>
    <td>Right-hand column description</td>
    <td>Right-hand column data (and unit)</td>
</tr>

It's been awhile since I used double ternary notation, but I think that's right
The use of <#RCxxxx> makes it 'transportable' for those who use , as a decimal seperator.

But as you are going to have to rearrange your <table> contents, why not get rid of Heat Index and Windchill and just put Apparent Temp underneath Temp ?

[MickinMoulden]

I've been using these for months. Got 19 on just the home page. Quite handy. I don't use the <abrr> thingy, just the title=. I use it for explanations, more information, or for comparing records. In my monthly records, it will display yearly records when you hover over. In my yearly, it displays All-Time records. It makes it much easier to make comparisons for Facebook updates. Then everyone thinks I'm really clever....or a number nerd. mmmmm. Good idea with the HI and WC. I think we got a wind chill once?

[GraemeT]

Mike,
I struggle with javascript (some would say say I struggle with php as well), but I think Beteljuice has it nailed.

If using ajax to update the data live, you might also find that the use of <#RCxxxx> is necessary to avoid anchor definition errors, as the <span> tag doesn't like to use an anchor more than once on a page. I've found it is possible to define additional "pseudo" tags within cumulus.xml to overcome this.
For example, if you want to use a tag twice on the page, once in the header and again in the page body, the following will achieve the result without an error:

Code: Select all

<item name="currentwdir">
	<value><#currentwdir></value>
	<unit></unit>
	<image></image>
	<class>dynamic</class>
	<description>Current (latest) wind bearing as read from the console as a compass point</description>
</item>
<item name="currentwdir2">
	<value><#currentwdir></value>
	<unit></unit>
	<image></image>
	<class>dynamic</class>
	<description>Copy of currentwdir</description>
</item>

Be aware though, the cumulus.xml file tends to grow quickly if you add too many items, and the bigger it is, the longer it takes to load at the client end at each update.