@Pooja Bhandari banaula function TopNavbar({openSidebar}) {
// use Fullscren Api to make the app full screen const fullScreen = () => { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { if (document.exitFullscreen) { document.exitFullscreen(); } } }; return (
Hi I have struggled in One point Of Full screen, Can we call a function when click default close button of full screen mode, can You tell me, how could I catch that event? I want to Hide Expand button and show Collapse button when come to Full Screen Mode --> 1 and I want to hide Collapse button and show Expand Button When come to normal screen --> 2 Problem is 2 , I can't understand where I need to write that function Please Advise me. Thanks In Advanced.
Thanks for a great tutorial. I have a difficult question - How do I get this to work on an iPhone mobile device. It works on iPad and desktop, but does not work in my iPhone XR? Would be fab if you had a solution as I need elements of my site to fire up in full screen on all devices.
Hey mate, no problem. Sorry but I can't answer your question about the iPhone. Maybe iPhone doesn't support it or mobile devices in general don't want to support full screen mode
How can I hide this myBox id untill the user comes to full screen mode and hide if the user goes off the full screen? Thanks for the video....you are unique amongst all!!!
@@aubisoka NO they are not. Fullscreen mode and kiosk mode are not the same thing in JavaScript. Fullscreen mode is typically used to enhance the user's viewing experience by removing the browser's interface elements and displaying the webpage in a larger view. Kiosk mode typically locks down the device and limits the user's ability to access certain features or applications on the device, in order to prevent unauthorized changes or misuse.
@@kashishsharma314 yes I got something at that time. I searched on Google that "How can I keep my text hidden untill I click on a button in HTML/CSS" and I got some links....but his was really very long ago...so don't remember the actuall things which I did. Follow all the things told in this video....and secondly give your quiz/text css to his itself. You will get it online on Google.
it is not possible to automatically enable fullscreen mode on page load without user interaction due to browser security policies. Browsers block fullscreen requests that are not triggered by a direct user action, such as a button click or a key press, to prevent abusive behaviors. You'll need to prompt the user to interact with the page first, at which point you can request fullscreen mode. This approach ensures that fullscreen is enabled only with the user's consent.
The title of the page would be more appropriate if it indicated how to waste your time looking at advertising for a code that is worthless since it cannot be done automatically.
Sorry mate not possible, it's client side so end of the day the user can do what they want. If you want to prevent cheating, you need to hide it from the server side
he is gonna make the rarest videos always. XD. love him
More coming 😃
:D
i used it with reactjs it works perfectly, thank you for keeping it so simple
@Pooja Bhandari banaula
function TopNavbar({openSidebar}) {
// use Fullscren Api to make the app full screen
const fullScreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
};
return (
);
}
Easiest explanation !! keep going .
i like this method because its work with vuejs without problems at all ... thanks man
Was helpful for my react app. I did the same in the public/index.html. Thanks for always helping me out.
Thanks for this tutorial!
No problem
Very informative!! Totally using this for now on :)
Thanks dude. You are a saviour
Very good tutorial. Thanks :)
Hi I have struggled in One point Of Full screen, Can we call a function when click default close button of full screen mode, can You tell me, how could I catch that event?
I want to Hide Expand button and show Collapse button when come to Full Screen Mode --> 1
and I want to hide Collapse button and show Expand Button When come to normal screen --> 2
Problem is 2 , I can't understand where I need to write that function
Please Advise me.
Thanks In Advanced.
Thanks for a great tutorial. I have a difficult question - How do I get this to work on an iPhone mobile device. It works on iPad and desktop, but does not work in my iPhone XR? Would be fab if you had a solution as I need elements of my site to fire up in full screen on all devices.
Hey mate, no problem. Sorry but I can't answer your question about the iPhone. Maybe iPhone doesn't support it or mobile devices in general don't want to support full screen mode
@@dcode-software No worries, thanks anyway.
Same problem I am facing this solution is not working for iphone
Hi there.. is there anyway to get the webpage fullscreen on load?
did you find someway to do it?
Thanks for the tutorial. Do you know what a situation in the safari browser? Does it support the full screen api?
no, it will not work
@@krishkapadia5704 thanks
thank you very much!!!!!!! it works!!!! how could i force "landscape view" for mobile browsers?
How can I hide this myBox id untill the user comes to full screen mode and hide if the user goes off the full screen? Thanks for the video....you are unique amongst all!!!
I have question: is there some way to skip user action to working proper (I try "window.onload" but not working, something do, but not fullscreen)
I am getting the error Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
How do you get past that?
u have answer at the begining of the video ;p
Nice video. Any chance of video on how kiosk mode is different from fullscreen mode ? They are not the same.
? It is kiosk Mode when its fullscreen, isnt it?
@@aubisoka NO they are not. Fullscreen mode and kiosk mode are not the same thing in JavaScript.
Fullscreen mode is typically used to enhance the user's viewing experience by removing the browser's interface elements and displaying the webpage in a larger view. Kiosk mode typically locks down the device and limits the user's ability to access certain features or applications on the device, in order to prevent unauthorized changes or misuse.
Thanks for the tip
I use it with angular it works correctly, Thamks
how to include for specific time?.
.....like full screen mode for fix time?
It would be very helpful.
Thankyou
you got it ?
How to toggle only a particular div?
I want to go full screen automatically on page load. Please help
Can u plzz help me with
how can I disable escape button and use a "close window" button to come out off full screen
did u find solution to it?
@@tavneetsinghkhurana8432 no
@@pragyaprashantkumar5311 😔😔
How can you do this youtube api full screen video background, thanks
How did u do the first step where you went to the coding thing
Sorry, what do you mean?
@@dcode-software no thank you I did some research and I got it thank you for the tutorial
Verry helpful. ^^ thanks u
there have any way to see fullscreen automatically when site will be loaded..?????
how you make it so there doesnt have to be user interaction for it to go full screen
You can't - and for good reason, the user's shouldn't forced into going into full screen, only when they actually interact with the web page
How can i prevent user from exiting full screen once the full screen mode is enabled?
i too have same doubt. Please anyone help us
Bro, I don't think there's any humanity left :(
@@suryavamsi8889 I too have same doubt bro...I am making software similar to exam.net and need to know only that thing...than my work finishes
@@ravilpatel did you find out the answer? even i am facing the same problem, please help me if you know how to resolve it
@@kashishsharma314 yes I got something at that time. I searched on Google that "How can I keep my text hidden untill I click on a button in HTML/CSS" and I got some links....but his was really very long ago...so don't remember the actuall things which I did. Follow all the things told in this video....and secondly give your quiz/text css to his itself.
You will get it online on Google.
very helpful
does this work on mobile versions?
Thank you very much 😉😉😉
Mil gracias xd
Can you please provide the code?
now do it for iPhones
is it possible when website open full screen automatically
no not allowed need user input like touch events
Thanks!
No probs mate :)
thx a lot ;) Anybody has an https link for a PWA with a fullscreen mode example like this one? pls
It's not working on page load
it is not possible to automatically enable fullscreen mode on page load without user interaction due to browser security policies. Browsers block fullscreen requests that are not triggered by a direct user action, such as a button click or a key press, to prevent abusive behaviors.
You'll need to prompt the user to interact with the page first, at which point you can request fullscreen mode. This approach ensures that fullscreen is enabled only with the user's consent.
how trigger fullscreen automatically
By window.onload = function(){
Window.requestFullscreen();
}
The title of the page would be more appropriate if it indicated how to waste your time looking at advertising for a code that is worthless since it cannot be done automatically.
how to prevent user from exiting full screen mode, i am making a quiz and dont want user to leave full screen to prevent cheating
Sorry mate not possible, it's client side so end of the day the user can do what they want. If you want to prevent cheating, you need to hide it from the server side
@@dcode-software i was thinking if someone clicks on esc or f11 i catch that and call a function that submits the test, is that possible?
@@tavneetsinghkhurana8432 just add an event listener for the window and check e.key and do the logic
Best 🎉
thx
Interesting....
you are very advancad
How to after login on full screen mode