Hype Stepper Symbol

I just used 60 and that is perfect!

1 Like

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.

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

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)

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!


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

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

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

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.

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


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)

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.

1 Like

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)


Yes, that behaves really well!

1 Like

Thats great. Thanks.

I’m having a problem with it on Android. It doesn’t stop. Any ideas?

I do not have an android so cannot see what going on… also " It dosen’t stop " is not very enlightening !.

Ok. The stepper keeps running. Numbers increase with no control. I’m finding out that another stepper I created also doesn’t work on Android. I’ll investigate.



While reviewing this for another post.
I add a slight update to allow for multiple symbols to use the yourFunctions()

This was simply done by using a global for the last symbol's stepper being used.

The symbols already work independently but the point is to be able to direct your function to relate to the stepper being used.

The symbols can be either duplicated of copied on scene.

The simple change is to add just below this block in the stepper()

//-- get symbol instance
	var symbolInstance = null;
    var parentSymbolElement = element.parentNode;
    while (symbolInstance == null && parentSymbolElement != null) {
	    symbolInstance = hypeDocument.getSymbolInstanceById(parentSymbolElement.id);
	    parentSymbolElement = parentSymbolElement.parentNode;

This line

 //--- set global for last clicked stepper symbol element.
	 clickedStepper = symbolInstance.element()

Then use it in the yourFunctions() function

Like so;

Note the txt boxes in the symbols would need to use a class name of txt

	//-- clickedStepper is a global for the last clicked stepper symbol , see stepper()
	var thisHypeStepperTxt = clickedStepper.querySelector('.tx') //--- the example text box has a class of txt
	thisHypeStepperTxt.innerHTML  = document.querySelector('#' + clickedStepper.id).querySelector('.hypeStepper').value

Stepper_MHv7.hypesymbol.zip (44.6 KB)