Problem with jquery fadeToggle

Using JavaScript with Hype
1

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)

2

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)

3

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
4

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
5

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
6

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
7

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

8

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

1 Like
9

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)

10

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.

11

file is there

12

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
13

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)

14

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
15

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
16

Strange things happen. I’m adding two layouts. It seems that your solution only works when activating in sequence. First 667x375, then 812x375 and finally 1024x768.
It took me some time before I understood where the problem was, but unfortunately I can’t fix it.
Any ideas?

fadeToggle_max.hype.zip (67.4 KB)

17

I think the problem is in this line of code:

var cirkels = document.querySelectorAll('.cirkel1, .cirkel2, .cirkel3');

It is finding elements with that class across the different layouts; this eventually causes an exception when trying to modify ones that aren’t on the current layout.

Instead, the querySelectorAll should be scoped to the current scene. So replace that line in resetOpacity() and resetOpacityToDatabaseValue() with this code:

var sceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());
var cirkels = sceneElement.querySelectorAll('.cirkel1, .cirkel2, .cirkel3');
2 Likes
18

Hat’s off for Jonathan!
That did the trick.
Thank you very much!

1 Like