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);
})
});
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?
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.
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.
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…
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…
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?
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.
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);
};
});
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.
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?
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 classCar. And JSinstructions 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 )
Oh, God! you are not only expert but also great story master, and you are the only one who make me fully understand JS 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.
Really great thanks.