Dynamically adding a class (a how-to)

[ouch_stop]

Hey gang-

Giving back to the community! I couldn’t find how to dynamically add a class to an element on the forum, so here’s one way in case you’ve been wondering and aren’t on the higher end of the forum users (I quickly and happily concede to being on the lower end). I’m confident other people have other methods.

This shows how to make something pop to the front when you roll over it by adding a class to it.

Normal:

On mouse-over of BACK:

First I dragged a jquery library into the Resources:

Then, I add the class inside the Header HTML. In this case, it’s called “front” and it simply pushes the layering index to the front with a positive z-index:

Then return to Resources and add 2 functions:

Function 1 I named “push_to_front” and Function 2 I named “return_from_front”. They look like this:

“push_to_front”:

“return_from_front”:

You now have to hook up your Objects to run the javascript function, which will add the class you’ve defined in the Head HTML. This is done in the Actions by selecting the BACK element:

Now when you run it, you should have the BACK element pop in front of the FRONT element when you hover over it.

add_class.hype.zip (46.0 KB)

I’m confident there are better ways to do this, and I’d be extremely pleased to see how the above steps could be changed/improved.

[PappaSmalls]

Was wondering how to do this, thanks!

[ouch_stop]

You bet. Hope it helps.

[DBear]

Hi @ouch_stop et al

I admit, little things can be lost in the forums. Very good explanation. I would just like to point out that Hype has a built in tool for this

You still use the same “mouseover” and “mouseout” actions but instead of using jQuery you can use Hype’s built in setters (or getters) in this example using the setter method. (You will find these in the list bottom left of the function screen).

Hype also has a property you can use that is “element” which points to the element calling the function also. So, I would run a function like so, on “mouseover”

orig_zIndex = hypeDocument.getElementProperty(element, 'z-index')
	
hypeDocument.setElementProperty(element, 'z-index', +100)

and on “mouseout”:

hypeDocument.setElementProperty(element, 'z-index', orig_zIndex)

Demo

[ouch_stop]

And Boom - that’s why we love the forums. That’s awesome, thanks DBear!

[ouch_stop]

Using this technique, how would one procedurally animate a value, like opacity for example? Obviously, sure, I can create an Animation, but if I can make one function dynamically apply it to whatever the current Element is, that would save an immense amount of work and project management.

[DBear]

The same setter function has other properties you can set and animate.

Look at the documentation to see what’s available

Basically

// hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionName)
hypeDocument.setElementProperty(element, 'opacity', 0.8, 1.0, 'easeinout' )

Note: I believe there will be more available in the next update but don’t hold me to that.

[ouch_stop]

Ah, wow, ok. Eye-opening Reply here DBear. I just shifted my self-assessment of my skills to ever further down on the user-knowledge list This is extremely helpful.