Click here to Skip to main content
15,942,067 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
hi,
i have div wich apear google map and i want to set size after full screen when i exit full screen this is my methode to make div full scree

i have link (he's text full screen) and div when i click to this link the div aprear in full screen
in the first time i set the width and height for div

this is my code


C#
<script>
       function changeWidth() {
           var e1 = document.getElementById("map-canvas");
           e1.style.width = "100%";
           e1.style.height = "100%";
       }
       //foction plein ecran
       var element, fullscreenbtn;
       function intializePlayer() {
           element = document.getElementById('map-canvas');
           fullscreenbtn = document.getElementById('fullscreenbtn');
           // Add event listeners
           fullscreenbtn.addEventListener('click', toggleFullScreen, false);
       }
       window.onload = intializePlayer;

       var fullScreen = false;
       function toggleFullScreen() {
           debugger;
           if (!element.fullscreenElement &&    // alternative standard method
               !element.mozFullScreenElement && !element.webkitFullscreenElement) {  // current working methods
               if (element.requestFullscreen) {
                   element.requestFullscreen();

               } else if (element.mozRequestFullScreen) {
                   element.mozRequestFullScreen();

               } else if (element.webkitRequestFullscreen) {
                   element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
               }
           } else {
               if (element.cancelFullScreen) {
                   element.cancelFullScreen();
               } else if (element.mozCancelFullScreen) {
                   delementocument.mozCancelFullScreen();
               } else if (document.webkitCancelFullScreen) {
                   element.webkitCancelFullScreen();
               }
           }
       }
 </script>


XML
<a href="#" id="fullscreenbtn" style="z-index: 10;" onclick="changeWidth()">Full screen</a>
       <div id="map-canvas">
      </div>



plz i need help
Posted

1 solution

you can make your div fullscreen by using the javascript screen object.

try the following code

include jquery in your markup

HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

JavaScript
$(function(){
$('#map-canvas').css('width',screen.width);
$('#map-canvas').css('height',screen.height);
});


hope this may help you.
 
Share this answer
 
Comments
Member 11573837 25-May-15 9:15am    
hi Vijay G. Yadav,
thank you for answering me, can you give me example to understand you more !!!
[no name] 26-May-15 1:51am    
sure. Have a look at this link.

http://vijaygyadav.3eeweb.com/

I had implemented above code

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900