Publishing with .css and .js files [SOLVED]

#1

Confusion reigns!!
After being convinced by a client to develop some eLearning modules in Hype rather than in Adobe Captivate, I reluctantly proceeded.
I'm happy to say that after some time getting used to the interface and functionality, I have become comfortable that it's a reasonable tool.
Being able to do a large amount of work with CSS and JQuery is certainly helpful, and all seems to work in the testing environment.
But that's where it seems to stop.
I can't seem to get any external css or js files to work properly when published.

I have:

  • Used the resources folder to add the files to the project. (and this works great - but only in preview mode)
  • checked that the references are added in the tag automatically (checkbox in the Resources tab - include in document )
  • In the document settings, unchecked the box to 'Protect from external styles'

I have attempted to use the regular publish, advanced publish etc to no avail.
I have served the published documents on a local server, same result.

As a professional web developer for many years, I am intimate with coding, publishing and wrangling all different types of files, but up till now I've never seen an IDE that sticks DIV tags containing STYLE tags in the HEAD tag.
There are so many duplicated references to files, some of which SHOULD work, but don't.

So if anyone has any tips how to make what works great in the Preview environment work in the Published environment, I'll be super happy.
Failing that, I'm going back to Animate and Captivate.
Cheers

#2

in general external css- and js-resources can be loaded and should work.
there may be cases when those external resources conflict with Hypes functionality though ...

if a Hypepreview works, an installation on a webserver should work too. so the question appears "where are you trying to run the exports?". there may be restrictions in this special environment.

all in all: without any examplefile or link from your side it'll be hard to provide help

#3

Hans-Gerd
I'm not trying to do anything special here, I just want a published version work the same as a preview:
include my custom .css file
include my jQuery lib and custom .js
In my project, I'm using JQuery to dynamically add a .css class to the published HTML. It does this perfectly well - on inspecting the code I can see that the class has been added.
This tells me that the JQuery library I loaded, plus code that I have in my external .js file is working.

But the .css that's associated with the dynamic class that I have added is not.
I even added !important to every single line (which is a dirty hack anyway) and it didn't work.
Looking through the HTML code, I see that the stylesheet is correctly referenced.
But not a single style is coming through.
Normally you'd see style overrides, but all I see is a bucketload of inline styles. Nowhere do I see any style contained in my file.
I fear that there must be something in play that removes the styles in my file after the document has loaded.
In answer to your question "where are you trying to run the exports?", my answer is - anywhere they'll work. I run a local MAMP pro server which has no problem running a myriad of applications.
I'm an application and site developer, so these environments are as familiar to me as honey on toast.

I'll create a sample file and upload it here.
thanks for your interest.

#4

perhaps a problem concerning on timing...
any changes on html-elements (class etc) created by Hype have to happen on corresponding Hypeevents: HypeScenePrepareForDisplay or HypeSceneLoad in this case.

Good source: https://github.com/worldoptimizer/HypeCookBook/wiki/Hype-Events
also Hypes onlinedocumentation

#5

OK I get that, but how does that explain a simple thing like restyling a tag, or adding a class to an item (just in the html text, not dynamically)?
And why should it work perfectly well in Preview, but not in Publish?

#6

It's just about sharing a simple hypefile showing the issue ... btw have you checked http https? does the console log anything?

#7

H-G I'm just putting a sample together now, .... but Hype is crashing ... again

#8

Ok here's a sample:
I have included the hype document,
the css file, and the published version
testcss.zip (160.7 KB)

#9

Here's what the preview looks like on the left (correct) and published on the right (incorrect)

output
output1200×353 42.7 KB

#10

the reference in the cssfile is wrong.
the id in the exported file is testcss_hype_container and not index_hype_container

it works in Hypepreview cause this'll always uses index instead of real filename

3 Likes
#11

(this is just a side note; @h_classen's reply shows the underlying problem)

I assume you're looking at the live DOM? This is a browser compatibility fix that allows dynamically adding style tags, required by Hype's usage. Modern browsers handle it fine, but some older ones didn't intend for <style> tags to be added programmatically. Placing it in a <div> is a hack that allows it to work. It is harmless to other browsers, even if it doesn't make structural sense.

#12

No way!!
I didn't think that the id name would change. Let me check this out.

#13

Cheers. So I guess that the requirement for validation has been ignored, then?

#14

Hans-Gerd
As usual, the simplest answer is always the best!
I never thought that Hype would change the ID name of it's main DOM element to match the filename.
If I hadn't been trying to override the styles by creating a more specific style in my external file, I guess this may not have happened.
From now, I'll be more aware of this. I've only been using Hype for a week now, so these quirks are new to me.
Danke schön, I owe ya one!
image

1 Like
#15

I'm unclear of what you mean by requirement and ignored - do you mind elaborating or if this was in regards to a different discussion, pasting a link?

Most validation (like ads and such) is done on the HTML file, which does not include a <div> in the <head>. This happens later to the DOM while running, and doesn't not negatively affect browser rendering -- unless you've seen otherwise?

Thanks!

#16

Hey Jonathan.
I was just looking at the HTML and noted the DIVs in the HEAD tag - I know that kind of thing doesn't pass W3C validation.
However, as you say, it seems to work OK, and Google pays less attention these days to pages that don't validate.
I guess being new to Hype I'm just getting my head around the quirks. I try and do a lot of dev using JQuery and CSS and attempt to streamline workflow with re-usable elements where possible.
So any advice is welcome. BTW I'm not trying to make trouble and diss the product - every piece of software or platform has it's good and bad points, and as developers we have to find out what they are so as to maximise our time.
One thing I DO appreciate is this forum, and the interest that people have in helping to solve problems. Worth it's weight in gold, thanks!

1 Like
#17

Also, Jonathan, I have to say that after only a few days of using it, I have begun to really like Hype!
I was on the Macromedia and Adobe teams for Director, Flash, Captivate and Fireworks, and despite that I am super impressed with the way it works.
I love the 'record' workflow - it's a really good way to get things done - fast!
The keyframe workflow is also great - has shades of Premiére and After Effects, but somehow easier to use.
One concept I had problems getting to grips with was the Timeline management. In Flash, you controlled self-contained movieClips. Here, you're just creating different instances of object states, without the necessity to 'contain' them. Super cool idea and much less onerous on overheads.
But you still can have the Symbol architecture too.
I also like the ability to use Javascript, which extends the functionality and particularly since I have a huge custom library of useful JQuery tools, will be great.
But I'm only a week into using it, and I'm sure that with more time on the tool plus this forum, I'll be singing real soon.
Thanks for your comments and help all the same. Cheers
JR

1 Like
#18

Don't worry, I did not think you were! It is always great to hear open thoughts.

In fact, hearing from users just starting out with the product is some of the most important feedback we can get since that is where first impressions are formed and we can hear about expectations vs. reality.

Glad to hear that. A lot of the inspiration came from my personal usage of Apple's Motion, which is pretty similar to After Effects. The idea for a record button was stolen from that app :slight_smile:.

Multiple simultaneously running timelines was one of Hype's original constructs to help further interactivity without code. I'm no Flash guru, but I always wound up baffled how even simple interactivity tended to require quite a bit of AS programming. It does take a bit to grok how they will behave at runtime since you have to keep states your head, and there are definite ways we'd like to improve this. Relative Keyframes add another level of power but also at the cost of more mental complexity.

Symbols landed later in Hype's history, and there is some use case overlap for sure. Still, we decided to keep multiple timelines within a symbol, though in many cases a single timeline will suffice.

Welcome! Please feel free to post any other thoughts or questions you have along the way :slight_smile:.

Products
Company
Social
Hype Support
Whisk Support
Store

Copyright © 2010-2020 Tumult Inc. All rights reserved.
Handcrafted in San Francisco.