Hype Stepper Symbol

(Mark Hunte) #1

This Stepper just user Hype Elements and Normal Javascript.

The Stepper’s Form is inside the Elements innerHTML.

We have two functions.

The first function ( stepper() )is used to get the Symbol and it’s child Stepper. Then count up or down the number.
There is a repeater function that allows for you to hold the spinner buttons down and repeatedly step.

The forms inneHTML code also validates for numbers only.

This code should not need editing. And is called from the mouse down Action.

The second function ( spinEnd() ) is used to invalidate the setTimeInterval from the first Function.

This stops the repeater.

This function is called from the mouse up Action.

You can add code to this function after the single line of code there.

Code you would add here would be to get the value of the Stepper and then do something.

You would need to give the Symbol and ID. If you duplicate the Symbol then give each their own ID.

To then get the value of the respective spinner you would use something like.


step1 being the ID we gave to the Symbol.

The Symbol elements UI can be changed using the normal Hype techniques. They can also be duplicated and the Elements UI of the individual Symbols changed.

v2 update
Stepper_MHv2.hypesymbol.zip (16.8 KB)

Using Jquery Ui stepper
(Jonathan Deutsch) #2

Cool widget! I find when I click quickly it doesn’t seem to always register.

(Randy Power) #3

Wow! Were you listening to my questions today?! lol I like what I see. It is a little sluggish. But it works on an android! Thank you very much!

(Mark Hunte) #4

It seems to work ok here but I may need to perfect the interval. At the moment it is at 100 milliseconds. Any ideas on that. I kept it at 100 so as to not jump too many digits on each click

(Mark Hunte) #5

I was… :grin:

(Randy Power) #6


(Mark Hunte) #7

@jonathan, I just tried 70, That seems to work better. without stepping multiple times on a single click… does it for you.

(Randy Power) #8

I just used 60 and that is perfect!

(Mark Hunte) #9

Ah, Just did 60. A bit too fast, I get multiple steps on a single click. I think 70 works better, here any way how does 70 work for you.

I also forgot to add onsubmit="return false" to the from tag. This prevents the enter key reseting the form if you click into the input and hit enter.

Will need to update the above Symbol.

(Randy Power) #10

Thanks Mark! I’ll play with it tonight too.

(Mark Hunte) #11

This is the latest Version.

There are now a couple of extra functions.

There is a new ini() function that is called on Symol load.

This simply sets up a function that will be called if the user hits the enter key inside the input.

The function that is called is named yourFunctions().

This is now where you place your code for the stepper. This same function is also called when the stepEnd() function is called.

This makes it easier to edit your own code and takes into account entries made manually in the input.

The yourFunctions() has block of code already inside which should not be removed.

 if (  Object.prototype.toString.call(this) === "[object Window]" ){
		"[object Window]"
		"[object object]"

Because the yourFunctions() function would not normally be called in any of the hype actions, mouse click, load actions etc. It will not export with the symbol. To counter this I have added it to the Symbol on load action.
The line above insures that nothing actually is run when the symbol on load runs. But everything works correctly when the buttons or enter key are used.

(@jonathan, it would be great if there was an option on Symbol export to choose what Functions should be included )

Again the symbol can be duplicated


Stepper_MHv4.hypesymbol.zip (32.0 KB)

(Randy Power) #12

Too late, I grabbed the latest version. I think it’s great but still is very slow on android. I remedied this by slowing it down far enough to be held down and tick by with enough time to let the user pick. I’ll stay tuned though. I think you’re on to something!


(Mark Hunte) #13

Lol. I found a bug I want to fix… before I re instate post 11 with the new version.

(Ken Heins) #14

It’s very cool, but a question though. How are you using it? It’s function?

(Mark Hunte) #15

Ok, re instated the last update above in post 11 and hopefully the bugs are fixed. So grab that one. v4

(Mark Hunte) #16

See the last version (v4)

Normally you want to capture the inputs value and use that somewhere or trigger something when at a particular number.

You can add your code for this at the bottom of the yourFunctions() function. There is an example there.

(Ken Heins) #17

I can tell that I am going to need to learn a lot more about functions, javascript, the extensions of Hype.

(Mark Hunte) #18


Works pretty much the same but changed some of the code. to make it cleaner.

The yourFunction() is now just for your code use. I used a trick I forgot about to export the function.

The input is now set to background colour transparent This means we can now use the Rectangle’s colour to style it.

Stepper_MHv5.1.hypesymbol.zip (29.5 KB)

(Jonathan Deutsch) #19

I haven’t looked at the code, but macOS steppers will always trigger on mouse down, then have a delay before the repeat comes into play. So I’d start a timer for 1000ms (1s) to begin a repeat and then from then on use the 100ms to increment. The initial down should always instantly trigger a step.

(Mark Hunte) #20

Here is one using a timeout to do it how you suggest. Work well for me.

I also now have the templates users functions ( yourFunctions() ) trigger as the user types in the input field as well as on each step. This seems more in keeping with a real stepper.

I like that I can use Hype to create a stepper for the simple reason this type of Template makes it very easy for us to customise the styling without having to put in any css.

Stepper_MHv6_test.hypesymbol.zip (31.0 KB)