Hype 3 with Simple Weather plugin

Hello. I am trying to get my project working with Simple weather plugin.
Based on a weather different objects will either be visible or totally transparent.
Luckyde made an example how to make it work this way, but I just can’t get it working with his script.

Could someone please have a look at my project and try to figure out what I am doing wrong?
I am not very skilled in JavaScript so it may contain some very basic mistakes.

startpage.hype.zip (227.5 KB)

I would appreciate any kind of help.

There’s a couple different issues here; the way to get hints on what is going wrong is to look at the developer console and see if there are any errors logged.

The first error I came across is that the jQuery variable wasn’t found. You are including the jquery-1.8.2.min.js file, but in looking at the Head HTML, this is loading after the simpleWeather plugin. Hype loads javascript in the order in which they were added to the document (it’d be nice if we had a way to change this!), so the way to fix this is to simply remove the javascript files and re-add them with jquery-1.8.2 first.

Second and related to that, is that you’ve added both the jquery.simpleWeather.min.js and jquery.simpleWeather.js files; you only need to add one of those. The minified version is not much smaller and harder to debug, so I’d probably just go with adding only jquery.simpleWeather.js to the document.

After that is fixed, there is still this error in the console:

SyntaxError: Unexpected token ')' — index_hype_generated_script.js:110

This is a little harder to debug, but comes down to line 69 from getWeather:

hypeDocument.setElementProperty(Rain, 'opacity', 1, 1.0, 'easeinout'))

You have an extra closing parenthesis at the end; you should remove that.

After that, I see this error:

[Log] Error in getWeather: ReferenceError: Can't find variable: getWeatherText

I suspect this would be from line 16 of getWeather(), but I am an unsure what you are trying to do here to give a specific fix. My guess is that you are trying to reference an element with the id of getWeatherText, but that does not currently exist in the document. So maybe you need to set a unique element ID somewhere in the Hype document for that to work.

Another error I see that will take place down the road is that some of your unique element IDs have ampersands in them. The way you are referencing them isn’t valid; for example on a line like:

hypeDocument.setElementProperty(Snow&Rain, 'opacity', 1, 1.0, 'easeinout')

You’ll instead need to access it like:

hypeDocument.setElementProperty(hypeDocument.getElementById("Snow&Rain"), 'opacity', 1, 1.0, 'easeinout')

I hope that points you in the right direction!