Topic: Trying to eliminate space in ajax-dashboard6.php

[mexbound]

I have my ajax-dashboard6.php up and running. I have one thing I am trying to do. I have some "white space" I am trying to eliminate, but can't figure out how to do it.

Look at the heading "Liquid Precipitation" and notice the Rain Graph below the heading. I am trying to move the graph up towards the heading and eliminate the white space.

You can see it here: https://ajijicweather.com/wxindex.php

Also I have attached a jpeg showing it.

Any ideas?

[gwwilk]

It looks really good so far!  If you need some ideas, my overloaded dashboard might give you some ideas.

Keep up the good work.

[mexbound]

Two questions Jerry,

1. On your site you have a "Season Countdown" section. Where can I find code for that? I see it has something to do with "Curley's" script.

2. On my site, Just under "Liquid Precipitation" I have a large "whitespace" between the top of the column and the raintoday.gif. I can't for the life of me figure out how to eliminate that whitespace. I tried valign="top" on the <td> for the rain graph. I notice on your site it is nice and tight to the top. Any ideas?

http://ajijicweather.com/wxindex.php
 

[gwwilk]

The Season Countdown lowdown can be found here.

If you'll compare my entries under 'Precipitation' vs. yours you'll see that you're missing some.  Also, the adjacent 'Dew Point'/'Humidity' and 'Wind'/'Barometer' have been altered to occupy less space.

Here's my dashboard code.  If you compare this script with Ken's distribution you might better be able to identify my modifications.  I use 'CompareIt!' for this purpose, and that's how I incorporate Ken's changes while preserving my mods.

Hope this helps.

[mexbound]

Thanks for the info Jerry. I'll look into it tomorrow. I also use CompareIt! I'll let you know what I find ...

[mexbound]

Hi Jerry,

Thanks for letting me compare my ajax-dashboard6.php to yours. I was able to use CompareIt to work out some issues. I also added the Season Countdown.

I also changed my Chandler Burn Index to use firedangerWD.php. I read up about it on this webboard and am able to get it to work. I do have one problem with it. Right after the Temperature it is displaying some "weird" characters.

You can see it here: https://ajijicweather.com/wxindex.php

Any idea how to fix the "weird" characters?

[gwwilk]

Did you use my modified code for firedangerWD.php?

[mexbound]

Yes, I did see that. Attached find my ajaxWDwx3.js and firedangerWD.php

(added the file extension type of .txt so I could post)

And here is the code to display it:

<tr>
                <td colspan ="2" style="text-align: center;">
          <a class="hvr-glow hvr-grow" title="Jalisco Wildfire Danger">
                    <span class="ajax" id="ajaxfdimg"><img src="firedangerWD.php" height="135" width="170" alt=""/></span></a>
                  </td>
 </tr>

[mexbound]

I think I found the problem. At least it's not displaying the weird characters anymore. In firedangerWD.php here is the line of code I changed:

$degree_units = (($uom == 'E')?'�F':'�C');

changed to:

$degree_units = (($uom == 'E')?'F':'C');

I'm not sure how that line got those extra weird chars added ...

[gwwilk]

I'm not sure where the strange symbols came from either.  Glad you solved the problem.  Now watch to be sure that while the ajax updates are active the Fire Danger values change as well when necessary.

It has been years since I've played around with this code, so kudos on getting it up and running!

[mexbound]

Hey Jerry,

I also noticed on your site that when my mouse hovers over a "picture" it grows a bit. Like your 2 hour lightning and sunpie chart. How did you achieve this?

Darryl

[gwwilk]

If you read the text on my Scripts Page you'll see the 'CSS Hover Style' which is downloadable as a zip.  Implementation is fairly straightforward as you can see in my ajax-dashboard6.php script.

[mexbound]

Hi Jerry,

Yes, I read that text and placed the three css files in a subdirectory from my root named /css .
hover.css
hover-min.css
hover-tiny.css

In my ajax-dashboard6.php I have some code for my Lake Cam but I don't get the effects of growing when hovering over the image with the mouse.

<tr>
    <td align="center" colspan="3" valign="bottom">
    <a class="hvr-glow hvr-grow" href="<?php echo $spc_url?>" title="<?php langtrans('Click to see enlarged Image and Timelapse Videos'); ?>")>
    <img src="<?php echo getUniqueImageURL($spc_img)?>" alt="Lake Chapala Webcam Unavailable" style=" margin-top:9px;
           height:205px;width:265px;border:1px solid gray" /></a>
    </td>
</tr>

It's like it isn't finding the "class="

I also have it on the firedanger image:
<tr>
      <td colspan ="2" style="text-align: center;">
           <a class="hvr-glow hvr-grow" title="Jalisco Wildfire Danger">
                  <span class="ajax" id="ajaxfdimg"><img src="firedangerWD.php" height="135" width="170" alt=""/></span></a>
          </td>
</tr>

[gwwilk]

Sorry for not being more straightforward about how to implement this style, Darryl.

This is at the top of my 'index.php', in context:

Code: [Select]

...
include("top.php");
############################################################################
?>
<script type="text/javascript" src="https://...(elided)..."></script>
<link href="css/hover-tiny.css" rel="stylesheet" media="all"/>
<style type="text/css">
...
You only need to add this line:

Code: [Select]

<link href="css/hover-tiny.css" rel="stylesheet" media="all"/>
My scripts page has also been modified to reference this thread as further instructions regarding 'hover.css'.

[mexbound]

Thanks Jerry, adding that line in my wxindex.php worked great.

One last question. Do you compress or "minify" any of your javascripts or css files? Is it necessary? I see my ajaxWDwx3.js is pretty big.

[gwwilk]

I've attached the latest minified version of my 'ajaxWDwx3.js'.

Let me know if this misbehaves for you.

[mexbound]

I have tried to download the compress ajaxWDwx3.js file you attached but having problems with windows defender and virus checkers. Maybe if you rename it to ajaxWDwx3.js.txt I'll have better luck. I'm pretty good with windows and know about these kind of issues but I can't get around this one.

I went ahead and tried "Google Closure Compiler" to compress my ajaxWDwx.js and it did a pretty good job. From 141k to 61k. Testing out the results now ...

https://closure-compiler.appspot.com/home

[gwwilk]

Let's try this, then.

It looks like they're the same size.  The advantage of minifying an uncompressed ajaxWDwx.js file is that you can modify any settings according to your needs before compression.

BTW, I just downloaded the ZIP file successfully using the Brave browser.

And while looking for javascript minifiers I came across this unminifier:  https://unminify.com/  I tried it, and it seems to work well.

[mexbound]

I was able to download your compressed ajaxWDwx3.js after you renamed it. I tested it but there is a problem with using your version. I have a setting in my ajaxWDwx3.js which points to my clientraw file which is in a different folder than yours:

My setting in ajaxWDwx3.js is: var clientrawFile = './WD_realtime/clientraw.txt';

Anyway no problem. I was just wondering if you did any compression for your site. Some do, some don't.

I will look into  the   https://unminify.com/ and see what i find.  I am using the google compressor I mentioned in a previous post and it seems to be working fine. I used the "simple" option instead of the "advanced" option as I read you must write your javascript specifically to use the advanced option.