Function on scene load problem

Using JavaScript with Hype
1

Hey Guys,

have a little problem here. Have a Hype project with “scene A” and “scene B”.
– I am starting with “scene A”. After that I am jumping onClick to “scene B”.
– I am using this little javascript onSceneLoad for “scene-B”:

$('#tabs-swipe-demo').tabs({ 'swipeable': true });

The first time I am loading the scene everything is fine.
Jumping to “scene A” and after that back to “scene B” the script seems to stop.

In fact the script is working only the first time I am calling it…

Any quick fix without seeng the Hype scene – pretty complex to recreate without my content (confidential)

Thanks!

2

At a guess you need to load something on all scene loads.

But as you have not included any info at least on the API you are using, thats all I can offer without doing a search on google for something in Jquery that uses .tabs() and then have to work out if I have the right one and what it does…:frowning:

3

Thanks for the the quick one Mark. I will put together a Hype scene – you are right it is probably impossible to say something without seeng the scene – would be glad if you could have a look when I posted the scene…

THANKS!

1 Like
4

I will try … :grin:

5

@MarkHunte – Here we go again :slight_smile: Sorry for the huge scene and all the junk inside… I have deleted all the othe scenes.

Click Reel Holder > working fine
Click Start
Click Reel Holder > fails to build the tabs

Using the JS and the CSS from the materializecss library…
The tabs structure are declared in the innerhtml of the object “tab” in the second scene
JS for creating the tab is called at scene load “createTabs()”

Hope you have an idea.

And THANKS!!!

LINK REMOVED – see the other project link

6

@MarkHunte – doing a little search here. I suppose that I have to destroy the created tabs when leaving the scene and created them again on sceneLoad. Just don’t have a clue if there is an easy way doing this with JQuery… Unfortunately there is not so much documentation about this for materializecss…

7

This crossed my mind and I removed the on sceneload on Start scene.
Got the tabs twice but then failed.

Just trying to work me way through the flow…

9

yeah – after inspecting the DOM I realized that entering the scene again will create another (empty) instance of the carousel:

<div class="tabs-content carousel initialized" style="height: 776px;"><div class="tabs-content carousel initialized" style="height: 776px;"></div></div>

Sorry – I really know this is ABSOLUTELY unrelated to Hype, and that I am abusing here a lot of things :slight_smile:

Is there a way to call my createTabs() function only one time?

10

In between Macs at the mo, but you should be able put the tabs element in a global var and then check to see if it exists already…

11

OK. Did some further investigations here. Dropping the “swipable” function seems to result in cleaner code. Of course it is not so sophisticated, since you can not swipe now between the tabs. But changing the tabs is working if you klick on them. I think all this has to do something with the way how the guys are constructing the swipable tabs. There is no destroy option for the tabs (now) according to theyr GitHub pages. I think that since I will have to use a LOT of this tabs (this was the reason I opted for the 3rd party library and not for Hype native) the problems will even increase without a clear support from materializecss for creating/distroying/acting with multiple swipable tabs. I will fill a request anyhow on their page – would be absolutely nice to have this cool swipable tabs inside Hype.

Will continue anyhow tomorrow an will report here if I found something useful…

Uless of course one of you guys can come up with a nice idea :slight_smile:

Thanks & Cheers!

12

So found a way…

What seems to be happening is the materializecss replace the ‘tabs-content.carousel.initialized’ (Tabs) with a new one.
But it does not fully clear out all the old one.

I found this be giving each creation an id. Every time the createTabs() runs the children are moved to the new ‘tabs-content.carousel.initialized’ div. It is supposed to fully remove the old one but does not do this correctly and then things just compound into a mess.

The answer is to check for all the ‘tabs-content.carousel.initialized’ divs that do not have any children with a id ( in this example ) of #test-swipe-1 and remove them.

This seems to work. Note when materializecss first loads a ‘tabs-content.carousel.initialized’ s created.
We need to keep this one so we add a global var to the head file and use it as a run counter.

Place in head

window.tabCount = 0;

createTabs()

 window.tabCount++;
	 $('.tabs-content.carousel.initialized').each(function() {
  
  if ((!$(this).children('#test-swipe-1').length) && window.tabCount > 0)  {

   $( this ).remove();
  }

});

	 window.tabCreated = $('#tabs-swipe-demo').tabs({ 'swipeable': true });

Note, you do not need the on scene load call to createTabs(), but doing the above fixes that also any way.

This is an example for one set of tabs so you may need to use a slightly different check for children.

1 Like
13

@MarkHunte Mark, this is fantastic. Thank you very much! I love Hype and I love this community :slight_smile:

I have modified your script to search for DIVs with a class name of “tabcontent” – working perfectly with multiple tabs per project:

 window.tabCount++;
	 $('.tabs-content.carousel.initialized').each(function() {
  
  if ((!$(this).children('.tabcontent').length) && window.tabCount > 0)  {

   $( this ).remove();
  }

});

	 window.tabCreated = $('#tabs-swipe-demo').tabs({ 'swipeable': true });

I am uploading here a stripped down project (have to remove the initial one) in case that this is useful for somebody else.
Thanks again for the outstanding support and help…

TABS_MASTER.hype.zip (131.1 KB)

2 Likes