Function to control button top on mouse click

Goodmorning everyone,

I would like each button of a presentation, regardless of its position on the table, has a downward movement of n pixels on mouse click (start touch), and on mouse down (end touch) returns to its initial position.

Exploring the list of functions I found the substitution variable “hypeDocument.getElementProperty (element, ‘top’)” and “hypeDocument.setElementProperty (element, propertyName, value, …”, which seem to respond exactly to my purpose.

I thought of creating a “startTouchTopDown” function and an “endTouchTopUp” function, and to apply these two functions to each presentation button.

I ask you if it is possible, in the second replacement variable, to replace “value” with an expression or some else (variable or other) that makes the two functions suitable to each button, regardless of its position on the table.

I am not very familiar with Javascript and writing code, any suggestion is greatly appreciated!
Thanks

There are likely a few ways of doing this with JS and timelines. ( if I understand you correctly )

	    	var buttonElTop = hypeDocument.getElementProperty(element, 'top')
 
	
	switch(hypeDocument.customData[element.id]) {
  case "false":
  /*move down*/
   hypeDocument.setElementProperty(element, 'top', buttonElTop + 20, 0.3, 'easeinout')
	hypeDocument.customData[element.id] =  "true"
    break;
  case "true":
  /*move up*/
  hypeDocument.setElementProperty(element, 'top', buttonElTop - 20, 0.3, 'easeinout')
	hypeDocument.customData[element.id] = "false"
    break;
  default:
   /* hypeDocument.customData[element.id] not inited yet - move down */
  hypeDocument.setElementProperty(element, 'top', buttonElTop + 20, 0.3, 'easeinout')
	hypeDocument.customData[element.id] = "true"
   
}

Button Toggle.hype.zip (17.2 KB)

1 Like

Hello MarkHunte,

thank you very much for your quick reply!

I think i need to share an example to be more clear about the effect I need: I want every button going down on “start touch” and return at its original position on “end touch”.

Thank you for your help

1 Like

Also check. It’s symbol based. Needs prior knowledge, though. Back to @MarkHunte. On the road. Just for reference.

And this must be by code ?

Ok here it is in code. Tried to keep it simple and with no timers ( which would not really work well if someone did quick clicks )

	//-- get initial top of element.
	var buttonElTop = hypeDocument.getElementProperty(element, 'top')
 
 //-- set button is not down and top height if not set already.
 if (typeof hypeDocument.customData[element.id + "_isDown"] === "undefined"){
 hypeDocument.customData[element.id + "_isDown"] =  "false"
 hypeDocument.customData[element.id + "_top"] = buttonElTop
 
 }
 
 
	
	//- button is up & event is mousedown.
	if ( hypeDocument.customData[element.id + "_isDown"]== "false" &&  event.type == 'mousedown'){
	 hypeDocument.setElementProperty(element, 'top', buttonElTop + 20, 0.3, 'easeinout')
	hypeDocument.customData[element.id + "_isDown"] =  "true"
	return
	}
	
	
	//- button is down & event is mouseup.
	
	//-- we always only go to inial top, otherwise a quick mouse click could jump to higher than needed if we use -20. .
	
	if ( hypeDocument.customData[element.id + "_isDown"] == "true" &&  event.type == 'mouseup'){
	 hypeDocument.setElementProperty(element, 'top',  hypeDocument.customData[element.id + "_top"], 0.3, 'easeinout')
	hypeDocument.customData[element.id + "_isDown"] =  "false"
	return
	}

Button Pulse.hypetemplate.zip (17.7 KB)

2 Likes

Hello MarkHunte,

first of all, thanks for your reply and for the attached file.

I opened your file and launched the preview in Chrome, unfortunately clicking on the buttons I see a different behavior from that of your video: once pressed the first time, the buttons go down, but clicking on it a second time, they stay down (I attach the video of my screen as a demonstration).

I also copied the code you shared in my file and simply applied it to my own button, and in fact I see the same behavior in preview: the button is lowered at the first click (mouse down) but then (mouse over) remains down.

Can you tell me if I have forgotten some fundamental passage?
Thanks

Goodmorning MaxZieb,
thank you!

I had already been playing with a more complex model as I noticed that if you slide the mouse out of the element while it is still down the mouse up that comes after will not be detected.
I assume this is what you mean.

New code

//-- All buttons given class buttonz
	 
	//-- get initial top of element.
	
 
 //-- set button is not down and top height if not set already.
 if (typeof hypeDocument.customData[element.id + "_isDown"] === "undefined"){
 	
 	var buttonElTop = hypeDocument.getElementProperty(element, 'top')
 	hypeDocument.customData[element.id + "_isDown"] =  "false"
 	hypeDocument.customData[element.id + "_top"] = buttonElTop
 

 
 }
 
 
	
	//- button is up & event is mousedown/pointerdown.
	if ( hypeDocument.customData[element.id + "_isDown"]== "false" &&  event.type == 'mousedown' || event.type == 'pointerdown'){
	 	hypeDocument.setElementProperty(element, 'top', hypeDocument.customData[element.id + "_top"] + 20, 0.3, 'easeinout')
		hypeDocument.customData[element.id + "_isDown"] =  "true"
	return
	}
	
	
	 
	
	/*
  	Button is down & events is mouseup/pointerup.
  	pointerup: - for chrome
	*/
	
	
	if ( hypeDocument.customData[element.id + "_isDown"] == "true" &&  event.type == 'mouseup' ||  event.type == 'pointerup' ){
	 	buttonUp(element)
	return
	}
	
	
	
	/*
  	.
  	mouseout: mouse  may  be dragged away and off element. 
  	Which will stop button down due to mouseup/pointerup not getting detected by the element.
  	
  	This event is on the buttons surrounding group which acts as a buffer zone.
 	
	*/
  	
	if (  event.type == 'mouseout'){
	
	var buttons_ = document.querySelectorAll('.buttonz')
	
	for (i = 0; i < buttons_.length; i++) {
	
	var element = buttons_[i]
	
	if ( hypeDocument.customData[element.id + "_isDown"] == "true"){
		buttonUp(buttons_[i])
			
		}
			
	}
		return
	}
	
 
	/*
  	we always only go to inial top, otherwise a quick mouse click could jump to higher than needed if we use -20.
  	*/
 	function buttonUp(element){
 	 	hypeDocument.setElementProperty(element, 'top',  hypeDocument.customData[element.id + "_top"], 0.3, 'easeinout')
		hypeDocument.customData[element.id + "_isDown"] =  "false"
	return
	
	}

The button up down elements have been given a joint class name that gets used in the code.
The also have a group on them individually which acts as a buffer zone for the mouseout event.
The Group buffer zone is used like this instead of the element itself because if we click the element near it’s top it slides down and we would likely get inconsistent behaviour.

Button Pulse v3.hypetemplate.zip (18.2 KB)

This all should give you some ideas on how to go about this.

2 Likes

Good afternoon MarkHunte,

thank you very much for your work: that seems to be exactly what I was searching for!

2 Likes