Building a website

Using JavaScript with Hype
1

I have a question relating to the use of javascript within a HTML based website. It seems that some browsers may strip out javascript. Is this still the case?

I am attempting to build a one page scrolling website where the action of scrolling fires animations backwards and forwards depending on whether the user is scrolling up or down.

I used the below as a basis but wondered, if javascript is an issue, is there a way to build a website using the below but in HTML?

http://tumult.com/support/examples/Scroll-Animation-Control_by-Survey-Legend/Scroll-Transition-Tutorial_by_Survey_Legend.html

2

I'd suggest animation based on a scroll-event will never work without javascript :slight_smile:

and I'd prefer using @MaxZieb 's ActionEvents. the thread includes some examples for interaction on scroll and intersection ...

3

First, if you're worried about that, then Hype isn't a solution. It simply doesn't work when JavaScript is disabled. The best it can do in that scenario is display a placeholder picture.

Next, if a visitor is blocking JavaScript on the modern Internet, then they're probably used to disappointment.

Third, which web browser are you worried about? In Safari, I can turn off JavaScript, but that's not an easy thing to do. The option to "Disable JavaScript" is in the Developer section.

Perhaps you might be worried about browsers that protect privacy. I'm not sure, but perhaps a third-party JavaScript file might be blocked. That might break your Hype project, if you were hosting the runtime on a third-party site.

Personally, I try to avoid using third-party scripts in my projects. But if it's absolutely necessary, then using Subresource Integrity is important.

…and in general, I don't know why that web page layout style caught on. Apple did it with the 2013 Mac Pro and I didn't like the design. It gets in the way of usability.

1 Like
4

That's really useful guys. I think the answer is go for it, using the javascript as all the javascript I will use will be directly based within Hype fortunately.

I guess the safari's of the world tend to be ok with javascript. It's more the commercial browsers used in the office environment such as the dreaded IE etc, Chrome maybe? I tried previewing with Chrome and it made the file really small on the screen but thats something that can be fixed I hope?

5

One thing I do see on the web is when a site has an image that fills the width of the screen, but when you make the page smaller manually instead of squeezing the image it makes the image slightly smaller and it shows less of the image on the page. I assume that is set up with the tools here, but not sure how at the moment?
Flexible layout
I wonder if anyone can help with that?

6

Correct, this is the Flexible Layout system. You will need to enable the width and/or height scaling first in the scene inspector and then select an element for the options to be available. Please see:

https://tumult.com/hype/documentation/#flexible-layout

If you want the entire scene to change in size, the easiest way is:

  • group everything
  • make sure the group size matches the scene size
  • turn on all pins and resize controls
  • Set a scaling behavior (like shrink to fit)
  • Check "zoom contents"
7

Thanks Jonathan, might be easier if I upload it. I dont think I have done it correctly? Sometimes the text gets hidden, depending how the browser is sized. This is a fundamental issue that I need to understand I think before I carry on. Do you have time to take a look?

I cant seem to drag and drop the hype file here?

8

I zipped it, that works.

Website Concept.hype.zip (261.4 KB)

9

You need to make sure the group size matches the scene size, and probably also want shrink to fit behavior instead of expand to fill.

Website Concept-fixed.hype.zip (261.5 KB)

10

Thanks Jonathan. When I squeeze the width it gives a horizontal letterbox effect and the same when I squeeze the height, a vertical letterbox effect. Is it possible to keep the black background or image to fill all of the screen without the image distorting?

1 Like
11

The thing to know is that zoom contents takes the visual contents of everything inside an element or a group and scales it like a bitmap (though in many cases the browser can re-render stuff like text to make it sharp).

Not all items need to be proportionate, so you can either:

  • move these outside the main group and then put your own flexible layout settings on them to scale as needed
  • Turn off zoom contents for the group, turn off the scaling behavior, and then set individual elements to scale and pin however you see fit (some elements like text may need zoom contents still turned on).

(You could also set the scene's background color to just be black in this case, but that might not hold up depending on future plans you want for a background :slight_smile:.)

12

That's helpful Jonathan. I will try your advice and report back in the interests of Forum detail/help for others.

2 Likes