Accessing elements using Javascript

Using JavaScript with Hype
1

Hi everyone, I have been using Hype for one day now and am really enjoying it. I just have a quick question. How do you access the element you are writing the function for? I’ll explain with a quick example and excuse my lack of javascript experience.

So I was able to load Jquery in the head of the doc very easily. I have three rectangles that are different colors. When the user clicks on any of the rectangles, a label (#label_top) changes the color of the rectangle that was clicked.
So I just added a function to the rectangles on mouse click:

$("#label_top").css("background-color","#EF6B49");

I did this for all three buttons and it works fine - I just changed the hex value to the button color. Then I wanted to set up different layouts and it started getting tedious. I decided to write a function that I can just call, it would find the hex value of the element that was clicked and then assign it to the label. That way I can just write one function and assign it to all the buttons.

Anyway, I tried a couple different approaches - .this etc. and I’m not getting it to work.

So here’s the question:

What is the best way to refer to the current element as a variable? So I’d be creating a variable, assigning the current element’s color to it and then assigning that color to #label_top.

I have a feeling my error is in syntax, but also wanted to ask so I find the best workflow from the beginning.

Thanks,
Adam

2

Hi Adam (@adam)

Whenever you create a function within hype you get 3 arguments passed to it that help you out.

(hypeDocument, element, event)

so you can use the “element” argument to pass in the element that called the function.

So, for example, if I click on an element that has a background color I can get the color by:

var colour = element.style.backgroundColor; // vanilla
var colour2 = element.style.getPropertyValue('background-color'); // vanilla
var colour3 = $(element).css('background-color'); // jQuery

However note that these will return the rgb(value) which doesn’t matter if you’re just assigning another element with that colour

1 Like
3

Hi @DBear and thanks for the quick reply! I thought I tried the third method last night but it was late and I probably had a typo. I figured that’s why the arguments were there. Thanks again for the quick clear answer! Also great to see the same without jquery.
-Adam

1 Like
4

Small kick for this one:

This doesn’t work width some CSS properties (i.e. width).
$(element).css({“background-color”:“red”, “width”:100, “border”: “1px solid black”});

In this case the element gets a red background, a 1px black border, but the width is unchanged?
Any idea how to change the width / height of the element?

5

Hype uses the width property on elements so I’m surprised this wouldn’t work. I tried in a simple test and it worked for me; perhaps you could post a zip of your .hype document?

Note that the default width of elements is 100px, so I had to change the value first to see it change :slight_smile:.

Also I’ll point out that Hype’s runtime won’t know about these changes and that could lead to issues if you are going to be later modifying the width. Instead, I’d recommend using Hype’s setter API:

hypeDocument.setElementProperty(element, 'width', 100);
6

Yes, I’m running the code in runtime (i.e. while the scene / timeline is playing). I’ll try your solution, give me a second.

edit: yes works. I can’t change the width with JQ because the width is put in the inline-HTML markup by Hype (and this has priority over the JQ-CSS changes to the same element?)?

7

Hype does put it inline which will take CSS precedence over everything other than !important marked CSS, but I would have expected that jquery is manipulating in this method too (and like I said, the jquery worked for me?).