Material Design Sliding Tabs – example and a question

Using JavaScript with Hype
1

Hey Guys,

I just made this small MD sliding tab. I am using also some JS/CSS from http://materializecss.com and JQuery. I am pretty fine with the results so far. For now I am sliding in the scenes from the bottom. Does one of you JS wizards having an idea how I could slide-in-out the scenes horizontally from left OR from righ according to the tab I am clicking? I think this is not doable without JS…

Cheers!

TABS.zip (149.5 KB)

2

hi @sandor,

give a id of destScene_currIndex to your tabs.
e.G. -> START_1 and so on …
then attach this script to the element
var info = element.id.split(’_’), //results in [destScene, index]
newIndex = parseInt(info[1]),//index as nbr
transition;

	if(newIndex > window.index){//compare currIndex with new index
	transition = hypeDocument.kSceneTransitionPushRightToLeft //go forward
	}else{
	transition = hypeDocument.kSceneTransitionPushLeftToRight //go back
	}
	
	window.index = newIndex; //newIndex now currindex
	
	hypeDocument.showSceneNamed(info[0], transition, 1.1)//show scene

create window.index = 1 in the head …

not tested, but should work … :slight_smile:

1 Like
3

@h_classen Thank you very much Hans-Gerd!

I am not sure what you mean with

"create window.index = 1 in the head ..." so I left this step out (sorry for my ignorance)…

I have done the rest and the transitions are starting from left or from right depending on which button I push. So this is fine – but only my first scene is transitioning – hope this is making sense :slight_smile: Anyhow: I attached the new project – would be great if you have a minute to check it out…

THANKS!!!

TABS.zip (149.9 KB)

4

TABS 2_corr.hype.zip (143.3 KB)
seems that explaining is not my strength :slight_smile:

1 Like
5

@h_classen AWESOME!!! And no, you are wrong: explaining is not the problem – in fact seems that CODING is not MY strenght :slight_smile: Thank you very much for the help! BTW: experimenting with some other stuff from materializecss inside Hype. Really cool stuff that you can make with that combo…

Thanks again!

1 Like
6

yes, but it is quite heavyweight ...

7

that’s true, but I am building mostly for mobile with local development on the device. I have to see what’s better during the process. The charme is that stuff like some CSS properties (like “pulse”, “waves” or “scale-transition”) are really out of the box. So creating material design elements is really a breeze :slight_smile: I will post some examples if I have some spare time …