I’m new to hype. But i’m a bit blurry on its features. Cause i saw some great sites in the gallery, but can’t always find the way how to achieve those.
Can i edit the css and html of elements in the app itself?
Furthermore, is it possible to set a scene that it takes up the full screen of the browser? or do you have to make every animation separate, and insert in your own html code?
In Hype, the HTML Head section can be edited. Additionally, HTML code can be added directly inside an element.
A Hype project can be flexible, responsive and can scale. So, yes, a Hype project can take up the full screen of the browser. It can even take over the whole screen by adding code to trigger full-screen mode.
Hype doesn't require coding to get started, but that's limited. To truly unlock the power of the software, an understanding of JavaScript, CSS and HTML is important.
2 Likes
you can‘t do drag and drop with peace of mind that‘s for sure
Michael, can you share that code? Many thanks!
1 Like
The following code should help you.
The first part is a function assigned to a variable that returns an object with values relating to the Browser Vendor. Basically this gets the version of your browser and assigns object keys and values for the prefix.
The second bit can be changed and adapted to your liking. This is set as a “key listener” for the F key on the entire document and then runs the “toggle screen” function. If you want this to happen on button press of an element then you can change the type of listener.
The final bit is the toggle screen function. This toggles the full screen based on the condition of what browser the document is in. This is where the prefix function at the beginning comes in.
####Note: You would run this script on scene load.
// helper function (variable) to find the vendor prefix.
prefix = (function () {
var styles = window.getComputedStyle(document.documentElement, ''),
pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1],
dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
return {
dom: dom,
lowercase: pre,
css: '-' + pre + '-',
js: pre[0].toUpperCase() + pre.substr(1)
};
})();
// add the keydown listener and listen for the "F" key
document.addEventListener('keydown', function(e){
if (e.keyCode == 70) {
toggleFullScreen();
}
}, false)
// function to toggle the screen based on Browser. Notice the different code for WebKit and Gecko(Firefox) requests.
function toggleFullScreen(){
if (prefix.dom == "WebKit") {
if (!document.webkitFullscreenElement){
document.documentElement.webkitRequestFullscreen();
} else {
document.webkitExitFullscreen();
}
} else if (prefix.dom == "Moz") {
if (!document.mozFullScreenElement){
document.documentElement.mozRequestFullScreen();
} else {
document.mozCancelFullScreen();
}
}
}
You can change the listener to something else if you need.
// add a click listener for a particular element
var el = hypeDocument.getElementById('myElement');
el.addEventListener('click', function(){
toggleFullScreen();
}, false)
1 Like
I’m trying with no luck. Would I bother you to make that function work on my example?
fullscreen.hype.zip (19.0 KB)
Much appreciated
What have you tried so far? In your example I don’t see any functions. You must have at least some understanding of Javascript otherwise it will become very complicated, very quickly.
That being said… I can surmise that from the wording on the button it looks like you want that to be the trigger for the fullscreen?
fullscreen-vDBear.hype.zip (19.7 KB)
1 Like
I'm sorry! I've tried copying and pasting your code into a new javascript function, being called on scene load, and also on clicking a button, but it didn't work, specially because I don't have any understanding of Javascript🙈
So that's why i created the example without any code for allowing you to put it correctly. What you did it is exactly what I was trying to achieve. Many many thanks😀
OK, what If I want to use a two-instances button:
I have created a symbol and they work fine, but if I exit fullscreen with the escape key rather than the button, the button does not change its instance:
full screen toggle.hype.zip (26.3 KB)
I really don’t need the second instance (exit fullscreen) having the escape key option, but if I hide that instance, when exiting fullscreen by pressing esc I don’t know how to make the button to appear again
create a key function ESC is key 27 make a function to go back or jump to scene
1 Like
use the event to trigger functions …
4 Likes
@h_classen Hans has posted a solution to this as the FullScreen API has a function that fires on... wait for it... "full screen change". One thing to note is that this cannot determine the state of the full screen i.e is it going to full screen or is it going out of full screen but it always fires on the change but this together with a boolean (true or false) would get what you want. e.g (pseudo code)
if(fullscreen is true){
changeTheFullscreenImage();
}
if(fullscreen us false){
changeTheImageBack();
}
Unfortunately, Hans may have missed this bit
Or chose to ignore it 
Just for your information Pablo. We cannot continually do the work for you you must put in some effort to learn. This kind of javascript is not for a beginner and as I said previously... you will get lost very quickly. Of course, we will post some form of help but if you just followed the post that Hans has posted then I'm pretty sure you will be lost.
Here is my final adjustment of your document. I have placed comments to help explain what is happening. I suggest you study it and make sure you understand what is going on before posting back with any more requests
full-screen-toggle-vDBear.hype.zip (27.8 KB)
1 Like
didn't read the whole thread ... sry
1 Like
Of course not. It was not my intention at all, but being Hype a software that promotes itself as a tool to design without code, you should expect a lot of people like me (non-coders) asking for help in the forum.
Believe me, I did that, but Javascript is not easy. I would love to learn it, but I guess that even having some sort of understanding of it, I couldn't manage the specific tasks that sometimes are needed inside Hype's console.
My "efforts" goes like this each time I'm facing an issue:
- Look at Hype's documentation and looking at its video tutorials.
- Search youtube videos with other users solutions
- Search in the forums for the topic
If I do not find the solution on that places I THEN ask in the forums or write to Hype Support.
In this particular case, the only chain I found useful was this: Solved ! - Scale document to window size and fullscreen - #5 by kerguelen
But the button was not working fine on the first interaction, so that's why I asked for a best solution.
Also I think (maybe I'm wrong) that a fullscreen button should be a very common feature that many Hype users would like to have implemented in their projects, so having a proper solution in the forum would be a good idea. Also please notice that I have asked about how to code the behaviour of one button, not an entire site. I understand that Hype, while it is a great tool, has its limitations and for complex things I should hire a developer and pay for that work. I wasn't trying to take any advantage from you, just asking for help on a very specific thing. I'm very sorry if my attitude was being seen that way.
Your (and everybody's) help here in the forum is of great value for non coders like me, so I'm very grateful. Please continue helping others. We try to do the same on our own expertise areas, in other forums.
1 Like
I agree with the sentiment - it has often been our philosophy that if we see users commonly doing something that requires code, we should add this as a built-in feature (or make easier hooks)!
1 Like