JavaScript
Article
By Sam Deering

jquery make element full screen

By Sam Deering

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');
  • 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.

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.