Identical js working in one scene but not in the next scene

1

At the top right of the screen there is a button called Button_Bug_Box it fades in a symbol called Bug_Box using this script:

$(hypeDocument.getElementById(‘Bug_Box’)).fadeIn();

Inside the symbol Bug_Box there is a button bottom centre of the screen which fades out the symbol using this script:

$(hypeDocument.getElementById(‘Bug_Box’)).fadeOut(

This all works fine until I get to the next scene, where all these symbols still exist (and still have the same names). In the next scene the exact same buttons and scripts no longer fade in the Bug_Bug symbol. I just can’t see why this isn’t working since all the scripts and symbol names are the same in both scenes.

Here’s a link to download the file:

Any help would be greatly appreciated.

2

an id has to be unique. so may be better to go with a class instead.

`$(document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]').querySelector('.Bug_Box')).fadeIn();`

the thread to extend hype offers this nice code to get the sceneELement.

OR use a persistant symbol (if it fits your needs)

3

Thanks for this. I made the class name for the symbols Bug_Box and I replaced my code with your code but it didn't work. I'm wondering what the forward arrow '>' in your code is for.

4

ah, sry … copy pasting without testing is not always a good idea :slight_smile:

i took the snippet out of its environment … so ‘this’ was not the expected hypeDocument …

$(document.querySelector('#'+ hypeDocument.documentId() +' > 
 HYPE_scene[style*="block"]').querySelector('.Bug_Box')).fadeIn()
5

@Antiphones

I believe You have corrupt symbols in Scenes 2-4. Questions JHSv1.hype.zip (412.2 KB)

After a bit of initial testing in which I changed the ID for bug box in Scene 2 and nothing happened I stripped everything down to the bare minimum - removed all scenes but Scene 2 (Scene 3 & 4 had same issue as 2 but this kept it as tight as possible); removed .mp3 files and all other functions, elements & symbols but the following:

36%20PM

My own additions:
Trial Rect-1 - a simple Hype primitive turned to a Symbol (id "Rect-1").
New Bug - a brand new Symbol (not duplicate or copy) into which I placed a copy of the "Bug_Box" Symbol contents. (id "Bug-new").

I then wrote a new function ("bugTest") for the "Button_Bug_Box" trigger:

	//document.getElementById('Bug_Box').style.display = "none";
	document.getElementById('Bug-new').style.display = "none";
	document.getElementById('Rect-1').style.display = "none";

For this test I had all symbols set to visible - and this was the telling point...

When the (original) "Bug_Box" Symbol was commented out both the "New Bug" & "Trial Rect-1" symbols disappeared - as they should. When "Bug_Box" Symbol was included (no comment out) or ran just by itself (other symbols commented out) nothing happened - nor were there any errors in the browser console.

To confirm the "corrupt" Symbol theory I used the original posted~linked project of @Antiphones and created a new symbol (new id) in Scene 2 and the Symbol appeared as per the code.


Antiphones:
You still have the issue of creating unique IDs or using classes, etc. Since You are already going the ID route...

One way to do this would be to give each Symbol an ID to match the Scene name, so Scene "5_q1", "5_q2", etc. would have the corresponding names for the "Bug_Box" symbol such as "Bug_Box-1", "Bug_Box-2", etc.

Then use something like this bit of code in the "Button_Bug_Box" function to determine the Scene and so establish the correct ID for the "Bug_Box" symbol.

whichScene = hypeDocument.currentSceneName(); // e.g. "5_q2"
whichScene = whichScene.slice(-1); // get the last character of the Scene name... "2"
whichScene = 'Bug_Box-' + whichScene; // which reads as "Bug_Box-2"
$(hypeDocument.getElementById(whichScene)).fadeIn();
6

Thanks for this JIm. Yes I had already tried giving each Box_Box symbol a unique ID before I posted and that hadn’t’ worked for me either. So I’m wondering now if your idea of a corrupt symbol is correct. The symbol does have a lot going on inside it. And I did copy and paste it from another Hype document. Perhaps some corruption occurred during that.

Does anyone have any advice on how I can remedy a corrupt symbol without having to rebuild it form scratch?

Perhaps I should try copy and pasting again from the original Hype document that it came from?

7

Not necessary & possibly the source of the problem!

Just copy the interior contents from your current symbol(s) and paste into the timeline layers;
then make this newly pasted content a Symbol ("Symbol" menu > "New Symbol from Selection").
Note: You can have multiple items selected when You use this command.

"Rebuilding from scratch" is easy - I already tried this process on your set-up and all (3) damaged symbols took less than a minute to fix.

I'm signing off for now - 2:15 am here in California.

8

Thanks h_classen. I think using classes is the best approach but I still couldn’t get your code to work.

$(document.querySelector(’#’+ hypeDocument.documentId() +’ > HYPE_scene[style*=“block”]’).querySelector(’.Bug_Box’)).fadeIn()

9

Many thanks for this Jim, it works perfectly for this situation! I did start with a fresh Hype doc and did a copy and past of Bug_Box symbol from the another previous Hype doc. So I'm hoping this has got round any issues of symbol corruption that may have occurred. So far it's all working fine. Thanks again.

1 Like
10

jQueryFadeIn.hype.zip (19.0 KB)

1 Like