Material Design Lite - Tabbed Panel Issues

1

Hey,

I have developed a tabbed panel that uses the Material Design Lite tabbed panel component.

I have programmed the tabs to run a timeline within Hype when pressed - all works well until i duplicate the scene when the code fails on Scene 2.

PROBLEM:
I need to use the tabbed panel as a global navigation in the form of a persistent symbol however as you can see here in the test the code only works once on Scene 1 then the tabbed panel breaks once duplicated on another Scene.

  • My thoughts are that this is an issue with conflicting Classes or panel ids but have tried everything I can think of to resolve and need some expert opinion!

Material-Design-Tabbed-Panel.zip (68.6 KB)

Live demo >

Thanks in advance.
Steve.

2

When clicking on a tab in scene 2 it’s calling a method that doesn’t exist

HYPE.documents['index'].startTimelineNamed...

I have a feeling this has been passed over from a “preview” as “index” is often used when previewing a document. You need to use the name of your document or make sure your passing in hypeDocument.

3

Thanks @DBear the template file does reference ‘index’ but the live demo has the file name of the exported file in place of ‘index’ so all is ok in that sense i think.

Problem lies when I change scene the js library seems to fail and the material design ‘ripple effect’ on the button no longer works, its a real head scratcher :thinking:

4

I checked the "live demo" and this is where I sow the console error regarding the aforementioned "linking" :wink:

5

:roll_eyes: I stand corrected…its been a long day I will update the live link to see will that help!

UPDATED LINK HERE @DBear I know its not hype related per say but heres the error from the console:

material.min.js:8 Uncaught TypeError: Cannot read property 'classList' of null
    at HTMLAnchorElement.<anonymous> (material.min.js:8)
6

I don’t know what this is supposed to do/be like, but the error comes from the fact that it is looking for IDs panel-2 and panel-3 but they do not exist in the Inner HTML of the Tabbed Panel elements:

<div class="mdl-tabs__tab-bar">
      <a href="#panel-1" class="mdl-tabs__tab" onclick="HYPE.documents['index'].startTimelineNamed('TAB-01-Timeline', HYPE.documents['index'].kDirectionForward)">Tab 1</a>
      <a href="#panel-2" class="mdl-tabs__tab" onclick="HYPE.documents['index'].startTimelineNamed('TAB-02-Timeline', HYPE.documents['index'].kDirectionForward)">Tab 2</a>
      <a href="#panel-3" class="mdl-tabs__tab" onclick="HYPE.documents['index'].startTimelineNamed('TAB-03-Timeline', HYPE.documents['index'].kDirectionForward)">Tab 3</a>
</div>

<div class="mdl-tabs__panel" id="panel-1">
	<!-- No content required here! Using Hype timelines instead -->
</div>

<div class="mdl-tabs__panel" id="panel-1">
	<!-- No content required here! Using Hype timelines instead -->
</div>

<div class="mdl-tabs__panel" id="panel-1">
	<!-- No content required here! Using Hype timelines instead -->
</div>

I think the last two divs need different IDs.

Also note that you use the same IDs in two different scenes; this will likely cause problems too.

7

Thanks for the reply @jonathan. The html in original post was a bit sloppy so I have fixed the demo updated links here > UPDATED LIVE DEMO | tabbedPanelDemo2.hypetemplate.zip (64.1 KB)

mockup
mockup.png1024×768 12.6 KB

Basically this is just a test for an element of a larger project. I would like to use the Material design Lite library to add some components to my project such as this tabbed panel. However the ripple effect for each tab seen in the video works on one scene only so far and breaks when you navigate to another scene.

I cant see any issues other than the obvious that yourself and @DBear have pointed out, all of which are now fixed and the problem still persists. Perhaps an issue with the Classes but not sure ?

Its not the end of the world if this doesn’t work but if it’s a quick fix then I think it would be a nice feature to implement into my project.

Thanks again lads,
Stephen.

8

xxx.hype.zip (64.5 KB)
quick’n dirty … seems to be a conflict on when it’s created/loaded …

2 Likes
9

Stroke of genius @h_classen I appreciate the help…need to upgrade my JS skills aparently!

Have you got a PayPal.me link? ill buy you a coffee :coffee:

cheers,
steve!

1 Like
10

less to do with js (at least on my side, just clears the active state …) … setup as persistant symbol is important … + init in first scene …

11

That was the bit I wouldn’t have thought of…at least not anytime soon!