How to make float action button?


#1

First time, so I need your help, guys. How to make floating action button?


(Mark Hunte) #2

Please explain more…


#3

Sorry for my short explanation.
Please click this URL…

I want to operate this interaction.
When user scroll down with mouse or finger on the list component, floating action button disappear to down,
and when user scroll up on the list, floating action button will appear from bottom to top.

https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button


(Mark Hunte) #4

Hmm, still not really clear…

But as a test to get a floating button that always floats back to it’s position after a scroll up or down, I created a function and added an scene onload action to run the javascript function.

	var actioNButton = hypeDocument.getElementById('actioNButton');
	
	$(document).ready(function(){
 
  window.addEventListener("scroll", function() {
    
    
    hypeDocument.setElementProperty(tButton, 'top', $(window).scrollTop() +100, 1.0, 'easeinout')
});

});

Scroll test.hype.zip (49.8 KB)
This worked surprising well… :grinning:


Drag element so it will change position and trigger waypoint?
#5

Nice technique!


(Oliver) #6

Hey, is it possible to make this purely in CSS?
I don’t need my Floating-Button to be animated.


#7

What do you mean exactly? If you don’t want the button to animate do you just want it to always be 100px from the top. If so then just use position: fixed !important; in your CSS.


#9

Hi Mark!

I was working with your Hype doc & I can not figure out the purpose for the following code:

var actioNButton = hypeDocument.getElementById('actioNButton');

I’ve not found such a beast in the timeline layers; and when I comment it out everything appears to work the same.

Is this line a coding relic from another version?

Thanks!


Anyway to add a sticky or floating button?
(Mark Hunte) #10

Hey Jim,

Looks like I forgot to delete it, what ever it was for… :blush:


(Casey) #11

What about if the object needs to be sticky and anchored to the bottom of the browser window? I’m thinking of a global (back to top) type of button/symbol.


#12

Hi Casey!

The following code works in “regular” HTML scripting programs but not in Hype :

<style>
#myBtn {
	position: fixed !important;
	bottom: 30px !important;
	right: 30px !important;
}
</style>

If You leave out the “bottom” & “right” properties You at least get the “fixed” part to work in Hype. (Have tried “Protect from External Styles” on-off; “Use CSS Top/Left” on-off, “Webkit Graphics Acceleration” on-off, etc.)

Haven’t tried the following (on the run here) but going the JavaScript route should work. You might have to diddle around a bit with this code (in the “Head” or “On Scene Load” would be good locations for it) which assumes that the button is initially at 30px from right & 30px from the bottom of the window:

<script type="text/javascript">
  function resize() { 
  document.getElementById("myBtn").style.bottom = "30px";
  document.getElementById("myBtn").style.right = "30px";
  }

  window.onresize = resize;
</script>

#13

Hi Casey!

Just gave the above JavaScript code a trial and it does not work in Hype, unfortunately. As with the CSS approach - the JavaScript works fine in a regular scripting program.

Curiously if I use “top”~“left” instead of “bottom”~“right” it works in Hype. So a work around could possibly be using the window resize info and do the math to calculate the width~height of the button + desired pixel distance from the bottom right sides and set the “top” & “left” accordingly.

Something of a kluge - perhaps others have a more straightforward solution.

Below is the scroll to top code (which works fine in Hype). The first several lines control the visibility of the “Go to Top” button - so it does not show up initially until the user scrolls a certain amount of pixels down - in this example “100”.

$(document).ready(function() {
			// Show or hide the sticky footer button
			$(window).scroll(function() {
				if ($(this).scrollTop() > 100) {
					$('.go-top').fadeIn(200);
				} else {
					$('.go-top').fadeOut(200);
				}
			});
			
			// Animate the scroll to top
			$('.go-top').click(function(event) {
				event.preventDefault();
				
				$('html, body').animate({scrollTop: 0}, 300);
			})
		});

(Fábio França) #14

Hi,

This solution (MarkHunt one) works great when you want the button always on the top…
I would love to have a similar solution (easy to apply to non coders, like this one), but having as you are asking the button always on the bottom of the browser’s window.

I did not understand the solution given by JimScott. I can have my button always on the center bottom of my browser windows if I use responsive layout and pin my bottom menu button on the bottom of my browser window.
But doing so I can’t scroll my scene up and down.
Any help?

All the best,
Fábio.


(Mark Hunte) #15

To answer about changing the code

I would change the code to

/* force a scroll to activate on sceneload */

$("html, body").animate({scrollTop: 2});
$("html, body").animate({scrollTop: 0});


//-- add event listner
	 
	$(document).ready(function(){
 
 //-- listen for scroll
  	window.addEventListener("scroll", scollto );

 //-- listen for window resize
	window.onresize =  scollto;




function scollto() {
    
    hypeDocument.setElementProperty(tButton, 'top',  $(window).scrollTop() + window.innerHeight - 36)
    
   
};
 
});

Scroll test v2.hype.zip (50.1 KB)


$(window).scrollTop() + window.innerHeight - 36

scroll top = current top of page.
window.innerHeight = inner height of window

-36 = 36px above the inner height.

Also note in this example I removed the optionalDuration, optionalTimingFunctionName from the setElementProperty but you can add it back so you can see the animation.

hypeDocument.setElementProperty(tButton, 'top', $(window).scrollTop() + window.innerHeight - 36, 0.4, 'easeinout')


#16

Hi Fábio!

My response above to @gatti was specifically addressed to his question:

What about if the object needs to be sticky and anchored to the bottom of the browser window? I’m thinking of a global (back to top) type of button/symbol.

At the time I wrote that post I was speculating on how to fix the button in place (but no code to go with that speculation). The code that was in the post relates to how the “Back to Top” button would respond to various scrolling scenarios, as well as the actual “scroll to the top of the page” scripting.


I have attached an example (“Scroll test v3jhs.hype.zip”) using @MarkHunte’s demo (“Scroll test v2.hype”) as the basis. I added the following code to it (also shown in my above response to Casey~gatti). It gives a “Scroll-to-the-top” capability to Mark’s button, plus if the scrollTop() is less than a certain number of pixels from the top, the button disappears. It appears when the scrollTop() exceeds the given number of pixels. The idea is if the user is not scrolled down very far there is no reason to display the “Go-to-top” button. In the code below the scrollTop() must exceed 10 pixels before the “Go to Top” button is displayed. This code is applied to all elements with a class of “go-top”. Note: As per the original example given by Mark, the code below utilizes jQuery.

function fadeInOutScrollBtn(hypeDocument, element, event) {
// Show or hide the sticky footer ("Go to Top") button
$(window).scroll(function() {
	if ($(this).scrollTop() > 10) {
               // greater than 10 pixels from the top of the page
		$('.go-top').fadeIn(200);
		} else {
                // less than 10 pixels from the top of the page
		$('.go-top').fadeOut(200);
	       }
        });
			
// Animate the scroll to top
	$('.go-top').click(function(event) {
	event.preventDefault();
				
	$('html, body').animate({scrollTop: 0}, 300);
    });
}

I also have adapted the graphics in Mark's last demo as many "scroll to the top" buttons are off to the side so they do not obscure text or graphics underneath them... but it could go anywhere.

Example here.

Scroll test v3jhs.hype.zip (51.3 KB)


(Stephen G) #19

Sorry I read the first post where user was asking how to make a floating action button, so thats why I shared


(Fábio França) #20

Thank you very much!
This has solved my problem… I’ve made a symbol with a drawer menu animation after clicking on the button that is always showing and fixed on the bottom of my windows browser thanks to your code.

I am not into java so I have now idea how your code works with so many “Top” mentions instead of “Bottom”.
Anyway… it is working fine for me… Thanks a lot…


Pinning position when other content scrolls
(Fábio França) #21

Hi Jim!

Your solution seems more adapted to a back to top button, and I was looking for something fixed in a specific place of the page, always visible and floating to serve as a drawer menu… The approach from MarkHunt seems to work fine on my project…

Wish Hype had an easier way to create all sorts of floating buttons. Or a set of JS files available on the resources area for each kind of floating button ( drawer menus, social sharing, back to top…).

Thanks for taking your time and giving me advice so quick…

All the best,
Fábio.


#22

@oifabio

The reason I wrote the post was to explain what was going on in the code so You at least understood what was happening, as previously You indicated:

I did not understand the solution given by JimScott.


(Fábio França) #23

Thank Jim,
I got the main thing, but I am too far from even the basics of javascript so some stuff I don’t get is due to my ignorance on the subject.

Anyway it is awesome for a non coder designer like me, to be supported by people like you guys on this forum.

All the best,
Fabio.

Envoyé de mon smartphone.
Veuillez m’excuser pour les éventuelles erreurs de frappe.