Special Weather Statement

Hi,

The button with the label “Special Weather Statement” is called an alert by OpenWeatherMap. When you click on the button, a small window with the actual text of the alert should pop up, see https://imgur.com/uQVQS14.

If nothing happens when you click on that button, then bootstrap might be missing or the wrong bootstrap version is selected. See system defaults “Disable Bootstrap” and “Bootstrap Version” under Settings->OWM Weather. “Disable Bootstrap” should only be checked if your theme already includes bootstrap. The “Bootstrap Version” must match your installed version; otherwise, I recommend version 5.

I diagnosed your website with the developer tools. The Formidable Forms plugin loads the Bootstrap 3 CSS file but not the JS (because it doesn’t need them). I manually loaded the JS file and was able to get the Modal to pop up. See https://imgur.com/IWB2njn.
There are a few caveats though: The Bootstrap 3 parameters differ from versions 4 and 5. And even after manually changing these parameters, the modal is still partially covered by other elements. I have to look into a solution that doesn’t require Bootstrap to show the alert contents. Something like this maybe: https://imgur.com/AMEBijV

Hi, Uwe —

Thanks so much for the reply. That final link you provided is visually pretty elegant, and I’m guessing it just resizes the box that’s already there rather than calling into being a new modal/pop-up.

If I’m understanding you correctly though, there’s not much I can do to effect any change. Is there a request that I should make of my theme’s designer (not that they take requests as a rule)? Or is there something I can do to add Bootstrap?

Thank you and stay well.

J.

I think I will add an option to the alerts where you can select the “Modal” or “Inline” display. “Modal” will be the default. “Inline” will then resize the box and show/hide the alert. (There could be multiple alerts from various sources as I have seen as many as 4 at a time.)

OWM Weather loads Bootstrap 4 or 5 if selected in the system settings. Having said that, adding these versions on top of the Bootstrap 3 that comes with the Forms on your website might have unintended side effects. It would be better to leave this alone and have OWM Weather work around it.

Well, I hope such an adjustment has the potential to help others as well.

Would suggesting to Formidable Forms that they think about moving to a newer version of Bootstrap be an unreasonable/offensive request? Seems that if we’re up to Bootstrap 5 now, OWM can’t be the only reason for upgrading.

Thanks again for your response and for a great weather tool!

J.

The new version 5.2.0 allows selecting the alert popup method. Please install the latest version and set the “Alert Popup” option under the “Display” tab to “Inline”. The full text of the alert will show up right under the button when clicked. A second click closes the alert again.

Hi, Uwe —

Again, thanks for the wonderful plugin and great support.

The entire copy of the weather alerts are shown by default (in the open position). I tested this in a fresh browser with all history cleared just to be sure.

Is there some way to ensure that only the alert buttons are visible until the reader clicks them?

J.

Hi,

Please check the Weather page Alert setting for popups under the Display tab. It should be set to Inline in your case, not Modal. Does that work?

Uwe

I followed those instructions before posting, and:

? yes, it displays inline just fine;
??but its initial, default state is open, as illustrated here:

https://www.greylockglass.com/wp-content/uploads/2022/05/Screen-Shot-2022-05-16-at-10.13.47-PM.png

This presentation detracts from the normally elegant crown your plugin creates at the top of the page. Once a user clicks the Weather Alert button, they’ll likely continue on down the page past the alert, or they’ll click the button again to see if it closes the alert (people like clicking buttons and making things happen).

So if the default were set to … state=”0″ for closed or some such code (I know next to nothing about code, apologies), you could, if you wanted, give people the choice to change that on the Settings > Display tab.

Thanks!

J.

The way you are describing it is how I actually implemented it. The alert detail is not shown until the website visitor clicks on the button. A second click on the button will hide the alert again. This is the same for the modal popup and the inline display.

Here is the PHP code that assign the display style “none” to the inline alert detail info:

$owmw_html["alert_inline"] .= '<div id="'.esc_attr($card).'" class="card" style="display: none;';

I had tested this on my end and it worked well.

I will monitor your website for the next couple of days until another alert comes up. Then I can look at the HTML code with the web developer tools.

• This reply was modified 2 years, 6 months ago by Uwe Jacobs.

Well, it certainly makes sense that you’d build it exactly that way.

My region could possibly have an extreme heat advisory (yes, in Massachusetts; yes in May) on Saturday. Also thunderstorms are a possibility on Sunday. I’ll message you here as soon as one pops up.

Thanks!

J.

You can try it at my demo page https://ujsoftware.com/owm-weather-blog/owm-weather-for-multiple-cities/. I changed the alert display to “Inline” and there are currently 2 cities with alerts.

So, I’ve been buried with work, and missed the alerts. I can tell you, though, that whatever was working on your demo is not working on my site at this very moment:
https://www.greylockglass.com/almanac/

Default state is open.

Is there some setting other than “inline” that I’m not aware of?

Thanks!

— J.

So, I’ve been buried with work, and missed the alerts. I can tell you, though, that whatever was working on your demo is not working on my site at this very moment:
https://www.greylockglass.com/almanac/

Default state is open. Is there some setting other than “inline” that I’m not aware of?

I made a screen recording of the Weather card loading (with spinner switched off), which shows not only the default open position, but also a strange phenomenon of the sun both rotating on its axis and drunkenly revolving around the cloud. What’s that all about? They look fine on your demo page.

I also made a screen recording of the Weather card I placed in the sidebar on my homepage to show that the weather alert is in open status there, too, and another odd thing —?the weather alert button is just black until you hover over it, and then the words appear, but in white. Is this a case of my homepage CSS overriding the Weather styles?

Both short screen recordings are here:
https://www.greylockglass.com/shared-media-demo-page/

I thank you for your attention and support, and hope that this troubleshooting ends up helping lots of folks and making your life easier eventually.

Thanks!

— J.

I was out of town and didn’t get to this until now.

The alert detail is definitely open by default. I really would like to see your website while this is happening so I can look at it with the developer tools. There is no other setting than modal/inline.

If you are not fond of the animated main icon, you can turn it off for all weather pages under Settings->OWM Weather->Layout->Disable animations for main icon->Suppress on all weather. Or individually under the Layout tab.

You can change the alert button (and text) color under the Display tab to match your theme.