JavaScript
Article
By Sam Deering

jquery make element full screen

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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:

--ADVERTISEMENT--

.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');
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?