jquery make element full screen

Sam Deering
Tweet

This is how you might go about expanding an element to fullsize of screen using some CSS.

Using some jQuery:

$("#js_code").css(
{
 "display": "block",
  "position": "absolute",
  "top": "150px",
  "left": "0",
  "width": "100%",
  "height": "100%",
  "z-index": "9999",
  "margin": "0",
  "padding": "0",
  "background": "inherit",
"background-color":"white"
});

Or as a CSS class:

.fullscreen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  margin: 0;
  padding: 0;
  background: inherit;
}

//add class
$("#js_code").addClass('fullscreen');

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • dm

    I think it’s better to use:
    top:0;
    left:0;
    right:0;
    bottom:0;

    instead of: width:100% and height:100%

    regards,
    dm.