Can element size controlled by CSS or JS?

Elements
1

Hello guys, I am a newbie with Hype and codes. I created a Navigation, which is a group “element” of text. How would I control the “Height of that element” by css or javascript? I would like to interact it with scrolling, like it is disappear while start, but gradually appear from button to top triggered by the user to scroll the page. (ps: not just made by timeline, opacity change or css clip property.)

like the left bottom navigation element of https://daoustlestage.com/en/

47 AM
Screen Shot 2018-04-18 at 9.18.47 AM.jpg860×702 140 KB

menu.hype.zip (17.8 KB)

Thanks a lot!!!

2

Hi @motchiual,

I’m not quite following what you’re after, but I’ll throw this on the wall to see if it sticks.

Under Tab 3, you can set the Overflow to scroll:

cap

Here’s an example file:

scroll.hype.zip (203.6 KB)

3

Hype element position/sizing can be controlled in JavaScript via the hypeDocument.setElementProperty() API. Please see this section of the documentation. There are keys for "top", "left", "width", and "height".

Example usage:

var myElement = hypeDocument.getElementById("myUniqueID");
hypeDocument.setElementProperty(myElement, "left", 100);
2 Likes
4

Hello O, thanks, it’s good for inspire… ^^

5

Hi Jonathan, it’s work! Thanks! However I find out it seems not the right way to make the parallax effect that I like to, haha, I am trying another method… Thanks anyway!!

1 Like
6

Maybe this will help:

https://forums.tumult.com/search?expanded=true&q=%20parallax%20effect

https://forums.tumult.com/clicks/track?url=http%3A%2F%2Fwww.hypedocks.com%2Fdownloads%2Fdrop-navigation-kit%2F&post_id=25123&topic_id=7135

2 Likes
7

woo, thanks Rick, such a cool kit would be useful in someday ^^

8

Is there a way to make this work with classes instead of IDs?

9

Yes. By using the “document.getElementsByClassName()” or “document.querySelectorAll()” methods. These are javascript methods to get elements by class name(s)

If you are needing to target more than one element then you could run a loop through the elements and run code on all at once.

You would then change

var myElement = hypeDocument.getElementById("myUniqueID");
hypeDocument.setElementProperty(myElement, "left", 100);

to something like

var elements = document.getElementsByClassName("myClass");
for(let i=0; i < elements.length; i++){
    hypeDocument.setElementProperty(elements[i], "left", 100);
}

The added bonus in hype is you can “restrict” lookups to specific elements within a scene / group by using that “element” as the root instead of “document”.

Run on scene load the element argument within the function will be the scene “element”.

element.querySelectorAll("className");

This would look for elements restricted to the scene that is calling the function and ignore other scenes.

3 Likes