Expand div to full screen

Here we are showing how to expand a div to full screen. See the demo and do it.

Sample code and demo is here

<!DOCTYPE html><html><head><title>Online HTML Editor - webspeckle.com</title><style>#div-to-expand.fullscreen {     z-index: 9999;      width: 100%;      height: 100%;      position: fixed;      top: 0;      left: 0;  }  #div-to-expand {     background:#666666;     width:500px;     height:400px; } button {     float:right;     } </style><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head><body><h4>Expand div to full screen</h4><div id="div-to-expand"><button>Maximize</button></div><script>$('button').click(function(e) {     $('#div-to-expand').toggleClass('fullscreen');      $('#div-to-expand').hasClass("fullscreen") ? $(this).text("Minimize") : $(this).text("Maximize"); }); </script></body></html>

Demo

Expand div to full screen

No comments:

Post a Comment

Try It Editor for HTML, CSS & JS

Blog Archive

Tags

Popular Posts

Contact Form