How to make float action button?

24

Just wanted to jump in here, Mark, and say that’s a hell of a fun little floating-button function.

1 Like
25

Hi @MarkHunte,

Thanks , and It is really great.

I have problem to integrate it into my completed Hype projects, and I read Javascripts at https://tumult.com/hype/documentation/3.0/#javascript, and lots of posts, and still have several questions:

1#I found there is a file named: jquery.min.js in your hype template file:

and I already copied this line into my project by head html, but still does not show up:

	<!-- Files added by the Resource Library -->
	<script type="text/javascript" src="${resourcesFolderName}/jquery.min.js"></script>

So, how to import jquery.min.js to my hype project please?

2# I am still confused upon how to make your Javascript works with a button, I mean I did not find any custom definition with that button.

For example, what about if I add another one button or element and make it work with your javascript, where should I define it? I mean in your following codes:

/* 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)
    
   
};

3# By the way, the button will quake a lot when the elements moves by, is that right? anyway to make it quiet please?

Thanks

Alex

26

Are you able to post an example project of where you are at and what you setup is?

27

Hi @MarkHunte,

Thanks, please check sample hype file.

stickmenutest.hype.zip (42.9 KB)

BTW, please allow me explain what I want to do:

I have more than twenties webpages which was build by Hype, and several webpages are quite long with more than 20,000 pixel, so I am just planning to divide them into one primary scene and several sub scenes, or alternatively, divided into several sub pages(if it is too slow to load because it is too large), so that users will be redirected to sub scenes or sub pages, and could be redirect back by click that stick button which we are discussed now.

Thanks.

28

Hi @MarkHunte,

I upload your template project to our site, but the button does not show up, would you please check at: https://www.lovcour.com/scroll-test

but there is no any errors:

Thanks

Alex

29

Ok I have adjust the code a bit for you.

The jitter is normal and the way you would get rid of it is to not do things fast. We slow the move down so the buttons float to the new position slowly or we hide the buttons when scrolling and show them again after scroll has stopped.

A simple timeout can be set have a handler to move and show the button. But if a new scroll happens before the timeout fires. the timeout is canceled and a new one starts… this goes on until scrolling really has stopped and the timeout can complete it’s handler.

We then move the buttons and show them.

New code.

Also since we are using Jquery we use it to iterate over each button.
Each button is given the class Name of tButton which it uses to find them.

/* 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;


var isScrolling;

function scollto() {
$( ".tButton" ).each(function() {
 
var tButton_ = $( this )[0]
// Hide buttons
  hypeDocument.setElementProperty(tButton_, 'opacity',  0)
});

  	// Clear our timeout throughout the scroll
	window.clearTimeout( isScrolling );

	// Set a timeout to run after scrolling ends
	isScrolling = setTimeout(function() {

		// Run the callback
		$( ".tButton" ).each(function() {
var tButton_ = $( this )[0]
// Move buttons & show them when scroll has finished
 hypeDocument.setElementProperty(tButton_, 'top',  $(window).scrollTop() + window.innerHeight - 36 )
 hypeDocument.setElementProperty(tButton_, 'opacity',  1)
});

	}, 	500);
	
	
 
   
};


 

});

stickmenutest_mhv1.hype.zip (47.4 KB)

Now saying all of the above I know you will have more questions. The code above is simple but also not vanilla Javascript. And from what I can tell you are not understanding the fundamentals of Javascript or using it in Hype.

Not a negative criticism , just saying for you to really move along you need to maybe take a step back and go over the basics in Javascript And then using Javascript in Hype will make much more sense.

2 Likes
30

Hi @MarkHunte,

Thanks.

Your are right, I am not good at JavaScript, From understanding, the name of tButton could be changed, right?

If I want to add more sticky buttons in one scene, I need to duplicate your JavaScript, and change the name of tButton, and make it run on scene load, right? But, still I do not know how to make that class name related to a specific button please?

31

This is a class name. yes it can be changed to a name that you choose.

Not really. we are using a class name on the buttons not an ID.

Think of it like this.

Classes.

You have two Cars.

Both Cars are; well CARS but each car is a different colour. One red and one blue.
Each Car has four wheels but one Car has 20 inch wheels and the other has 24 inch wheels.

But Both are Cars. Cars is the class of object. The same goes for the wheels. They have different attributes but both are classed as Wheels

Now we have a man called Jack Stevens who has been told to go and wash each Car in the car Park.
Jack Stevens, JS for short, does not care what colour the Cars are or how big the wheels are.
All JS is concerned about is that he follow the instructions, goes to the Car park, finds each car and washes it.

So we have two objects with the class Car. And JS instructions to find all objects of class Car and do something to them.

IDS

The Car park does not only contain Cars. It also contains other vehicles (objects ) Like Motor Bikes, Cycles.

The next day the boss tells JS to go to the car park and find Bobs vehicle. The boss does not know what it is and needs a picture of it but it will have Bobs ID on it. Each person's vehicle get a unique ID so they can park it in the Car park.

JS goes to the Car park and looks for the ID, finds Bobs vehicle and takes a Picture of it for the boss.

So we have many objects in the car park but all of them have a single unique ID which allows us to find them alone and not mix them up with any other object that may be similar or have the same class.

--

So again, I gave each button a class name ( Identity Inspector )

08
081038×510 38.7 KB

and we are looking for all of them and running some instructions on each.

32

@MarkHunte,

Oh, God! you are not only expert but also great story master, and you are the only one who make me fully understand JS :smile: Really great thanks.

To make sure it will work for me, I put something into scene and change one of button to be more recognized in mobile mode:

As screenshot show, it works fine in local, but the buttons still does not show up in Wordpress, FYR, I am using the HYPE official wordpress plugin at Tumult Hype Animations Wordpress Plugin

I deactivated any of optimization plugin to track this issue, but still can not fix it.

It would be highly appreciated if you or anyone could help here, please access this page for check at https://www.lovcour.com/scroll-test

and here is attached hype document, thanksstickmenutest_mhv1.hype.zip (55.4 KB)

Alex

33

It looks like you need to account for where the Hype scene’s top actually starts after your header.

You could try and deduct the header height also.

So instead of

hypeDocument.setElementProperty(tButton_, 'top', $(window).scrollTop() + window.innerHeight - 36 )

increase the minus ( - ) of the innerHight to a number that brings the buttons up

For example

hypeDocument.setElementProperty(tButton_, 'top', $(window).scrollTop() + window.innerHeight - 158 )

34

Great, you are absolutely right!:slight_smile:

Thanks so much, have a nice day!

Alex

1 Like
35

can we add ease on this ?
hypeDocument.setElementProperty(tButton_, 'opacity', 1)

36

four builtin easings ... but there's also the possibility to insert your own function.

37

no idea... :sweat_smile: I don't know how to code, lol..

38

hypeDocument.setElementProperty(tButton_, 'opacity', 1, 'easeinout')

39

not working, its just show up at sudden

$( ".tButton" ).each(function() {
  var tButton_ = $( this )[0]
  // Move buttons & show them when scroll has finished
  hypeDocument.setElementProperty(tButton_, 'top',  $(window).scrollTop() + window.innerHeight - 36)
 hypeDocument.setElementProperty(tButton_, 'opacity',  1, 'easeinout')
}