Problem with jquery fadeToggle

See attached file.
When I click the left button, it works. But when clicking the middle or right button, one has to click twice. I can’t find out why.

test fadeToggle.hype.zip (46.9 KB)

Hi,
don´t know, where the mistake is in your file, since I don´t use jquery… :wink: I would do it this way, using the new dataset feature of Hype 4. Code is even shorter:

var myButton = document.querySelector ('.' + element.classList [1]);

if (element.dataset.clicked == 0) {

	hypeDocument.setElementProperty(myButton, 'opacity', 0.2, 0.5, 'easeinout');
	element.dataset.clicked = 1;

} else {

	hypeDocument.setElementProperty(myButton, 'opacity', 0.5, 0.5, 'easeinout');
	element.dataset.clicked = 0;

}

test fadeToggle 2.hype.zip (50.9 KB)

Or even on step easier:

if (element.dataset.clicked == 0) {

	hypeDocument.setElementProperty(element, 'opacity', 0.2, 0.5, 'easeinout');
	element.dataset.clicked = 1;

} else {

	hypeDocument.setElementProperty(element, 'opacity', 0.5, 0.5, 'easeinout');
	element.dataset.clicked = 0;

}
1 Like

Hi Kalle, thanks for answering. But just found the solution. I need to add “return this;” and it works.

case buttonsRoot[0]:
this.toggle = !this.toggle;
$(".root1").stop().fadeTo(10, this.toggle ? 1 : 0.5);
return this;
break;

1 Like

Since I was writing up any way…

var buttonsRoot = ['root1M', 'root2M', 'root3M'];
	
var el = element.id;
 
 
 
 if (typeof hypeDocument.customData[el]  == "undefined") {
  hypeDocument.customData[el]  = false
}

 


var toggled = !hypeDocument.customData[el] 

switch (el) {
 
 

case buttonsRoot[0]:

  
   	     $(".root1").stop().fadeTo(10,toggled ? 1 : 0.5);
   	  
   	    
break;
case buttonsRoot[1]:
 
        $(".root2").stop().fadeTo(10, toggled ? 1 : 0.5);
      
       
break;
	
case buttonsRoot[2]:

 
        $(".root3").stop().fadeTo(10, toggled ? 1 : 0.5);
       
     
break;
}	

  hypeDocument.customData[el]  = toggled
2 Likes

Put this on a click handler. This is more along the lines of the jQuery solution but only using Hype. Why use jQuery if there is querySelector(All) and Hype :wink:

var opacity = hypeDocument.getElementProperty(element, 'opacity');
hypeDocument.setElementProperty(element, 'opacity', (opacity==0.2) ? 0.5 : 0.2, 0.5, 'easeinout');
3 Likes

This is a smart solution. Thank you.
I’m still at the bottom of a learning curve. :blush:

Well then remove jQuery from that leaning curve. It is a dying library! And an unnecessary additional dependency :grin:

1 Like

Will do.
A last question.
I have a reset button. Back to opacity 0.5.
var x = document.querySelectorAll(".root1, .root2, .root3");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.opacity = “0.5”;
}
This works. But when I click the circle the first time after the reset, it goes to opacity 1, but immediately back to 0.5. Clicking again does show opacity 1.
How to solve this?

test fadeToggle 2.hype.zip (48.0 KB)

Please attach your document. By the way you could also just use symbols… not sure what your trying todo and your goal is. If it’s learning JS then I understand the effort. If it is only animating multiple buttons and reseting them, then Hype does it already all without JS.

file is there

Sorry for the delay. It is because you are setting the opacity directly using the style. Use hypeDocument.setElementProperty instead so the runtime actually knows the new value!

2 Likes

Sorry to bother you again. I can’t get it to do what I want. The button works ok, but after clicking again all the circles get an opacity of 1. That should not happen. What’s wrong in the code?

test fadeToggle 3.hype.zip (48.0 KB)

I also included a version that resets to values set on the attribute panel
(see identity panel data-opacity)
Please try to name stuff, use tabs and use good comments to remember stuff.
Again, all this can be done easily without code with relative timelines, I am under the assumption that you are using this to learn code and not to find the most “Hype” way of doing it.

fadeToggle_max.hype.zip (70,2 KB)

2 Likes

Hi Max, thank you very much for helping with this. A lot to think about :thinking:
I know I can do a lot with Hype. My project leans on it. But this solution is a time saver. When I’m in Berlin I’ll buy you a Erdinger!

2 Likes