target an element whose opacity is 0.4 > where on :
onmouseover the opacity changes to > 1.0
onmouseout the opacity > 0.4
This should get you started … the rest has to be done by you 
var doc = hypeDocument.getElementById(hypeDocument.documentId());
var nodes = doc.querySelectorAll('.yourClassNameHere');
for (var i=0; i<nodes.length; ++i) {
var node = nodes[i];
if (node.style.opacity<0.5) {
//do something
} else {
//do something else
}
}
I mean that some element have a class whereto opacity is set to 0.4.
then when a mouse is over the element in the browser window > to set it to opacity 1.0,
and on mouse leave the opacity return to 0.4
or may be a SIMPLER approach
the original element has an opacity of 0.4
on mouseOver change into opacity 1.0
on mouseOut it return to its original opacity
write function to run on scene load that can do the below :
onmouseover.$('.opacity40').addClass('opacity100');
onmouseout.$('.opacity40').toggleClass('opacity100, opacity40');I just looked at your file… that’s way to much code and dependencies for this (in my opinion). If you want to do it in plain CSS do something like this…
.myClass {
opacity : 0.4;
}
.myClass:hover {
opacity : 1;
}
or
in Hype you can just do the following without jQuery (that library sucks anyway) and with an nice animation. You can set the initial state in Hype opacity 0.4.
onMouseOver
hypeDocument.setElementProperty(element, 'opacity', 1, 1.0, 'easeinout')
onMouseOut
hypeDocument.setElementProperty(element, 'opacity', 0.4, 1.0, 'easeinout')
3 Likes
@MaxZieb You don’t like jQuery? What do you use instead, plain javascript? i’ve found that learning javascript has become a lot easier by learning jQuery.
1 Like
This thread is the perfect example why I don’t like jQuery. Kamal is using it because he seams to think that every nail needs the same hammer. The library had it’s moment and help alot of people as queries in the DOM where hard in the beginning and jQuery made them easier but it also locks people in a tool space that is getting obsolete.
Vanilla JS was always a great thing but it failed on Browser-Vendors and their support for a unified query and many DOM quirks. This is getting less and less the case and lot’s can be done right out of the box. Just take …
document.querySelector
document.querySelectorAll
… they would suffice in many cases and wouldn’t introduce new dependencies.
If your looking for a new toolbox I suggest looking at Vue.js or React as they offer true Databinding and much more neat stuff and are pretty powerful.
Theses days lot’s of standards and new tech is evolving jQuery is from yesterday.
1 Like
@kamal Here are some examples … the first two work anywhere also outside of Hype. The second two are Hype-Specific. Hope this is instructional.
MouseOver-Examples.hype.zip (392,6 KB)
1 Like
Dear Mr. MaxZieb , Mr. Daniel Morgan ,
Congratulation for the nice work you did.
It is very explanatory , you did in 4 different ways , it is a very professional tutorial , specially for non professional “javascript coder” (as I came from a different industry > the printing and advertising domain).
I admire this type of work , and I suggest to CREATE a special category in Tumult Forums < to be only handled by the OFFICIAL TUMULT HYPE PERSONNEL > , for choosing and archiving this kind of documents , so non professional coders like me could benefits from such informations . >>> and also start building and creating “ A PARALLEL SET OF CODED EXAMPLES TO HYPE DOCUMENTATIONS “ , as it is very helpful for people like me / the non web professional developer / .
I believe that , targeting the Tumult Hype software TO BE to be the best tool for interactive and animated HTML docs FOR NON CODER/WEB DEVELOPER / ,
will increase the sales of the software by thousand times .
You suggested better toolbox / such as Vue.js , React / > I shall try to start learning how to use and implement them in future tutorials and projects.
One more thing ,
How to implement the addClass / toggleClass in a function file to run on scene load > initScene()
is there a an extension > hypeDocument.addClass(‘classname’, ‘classname’) / hypeDocument.toggleClass(‘oldClassname’, newClassname) / removeClassname ……etc
it might be helpful in other cases / scenarios of projects .
Many thanks
Mr. Morgan , for the above code, it is very obvious for advanced coders (not for very beginners like myself) to understand it , but implementing it in a “FUNCTION” , still for me it is a tedious business,
The js semantic mistakes I wrote in my file was the bug for not working. I am still educating myself on how to write the right code .
is it possible to have instead > the coded function full edited in future?
Many thanks for being very patient with BEGINNERS like me
also forgot to mention :
is there an extension for >
hypeDocument.getElementsByClassName()
The reason Hype has a …
hypeDocument.getElementById('yourID')
… is because Hype uses it’s own id-mapping and sometimes changes things around.
With classes you don’t need to use a Hype version. Just use the regular
document.getElementsByClassName()
But be aware that your searching across the whole page/document and not only in your Hype. To limit matches to your Hype use this inside your Hype.
var hype = hypeDocument.getElementById(hypeDocument.documentId());
hype.getElementsByClassName('yourClassName');
you can also always use querySelector (single match) and querySelctorAll (all matches) for more complex queries. In this case you have two options to limit the query to your Hype.
Option 1 : limit scope by calling the function on the node (doc)
var hype = hypeDocument.getElementById(hypeDocument.documentId());
hype.querySelectorAll('.yourClassName');
Option 2 : limit scope by a only query syntax
document.querySelectorAll(hypeDocument.documentId()' > .yourClassName');
A note about scope:
You don’t need to scope and always can just use document.getElementByClass or document.querySelector but you would run into trouble if you got two Hype-Instances on screen as you would also query into the other Hype-Instance. So limiting scope ist best pratice.
1 Like
I shall try it.
Is there an easy way to add , remove , toggle classes to element tru “function /s”.
Would appreciate it very much
thanks!
opacity property.hype.zip (99.5 KB)
I tried to implement the " document.getElementsByClassName(‘mm’) " in head document attached, it seems did not work??
Classic misstake var document.getElementsByClassName and document.querySelectorAll return a (node)list and not a single node.
So you would need todo something like this
/* first entry [0] */
var el = document.getElementsByClassName("mm")[0];
/* singular version */
var el = document.querySelector(".mm");
both worked fine , but not on the omg (screen shot in the document)
opacity property copy.hype.zip (100 KB)
