CODEWITHSUNDEEP
javascriptjqueryhtml
Dxx
Dxx

Reputation: 934

Make div 'fullscreen' onClick?

I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button. How would I go about this using Javascript/jQuery?

Upvotes: 0

Views: 7080

Answers (6)

M H
M H

Reputation: 2183

This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.

Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.

For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.

Toggle Class Demo

Something like 

$('#buttonID').click(function() {
 $("div > div").toggleClass("Class you want to add");
});

Upvotes: 0

shaunsantacruz
shaunsantacruz

Reputation: 8930

DEMO

$('div').click(function() {
  $(this).css({
      position:'absolute', //or fixed depending on needs
      top: $(window).scrollTop(), // top pos based on scoll pos
      left: 0,
      height: '100%',
      width: '100%'
  });
});

Upvotes: 2

elclanrs
elclanrs

Reputation: 94141

$('div').click(function(){
    var win = $(window),
        h = win.height(),
        w = win.width();
    $(this).css({ height: h, width: w });
});

http://jsfiddle.net/TQA4z/1/

Upvotes: 0

Koen Peters
Koen Peters

Reputation: 12916

I would do this: 

$('#idOfDiv').click(function() {
  $(this).css({position:'fixed', height: '100%', width: '100%'});
});​

jsfiffle: http://jsfiddle.net/P6tgH/

Upvotes: 0

Alex
Alex

Reputation: 6406

What have you tried? What didn't work? Take a look at that:

http://jsfiddle.net/6BP9t/1/

$('#box').on('click',function(e){
    $(this).css({
        width:"100%",
        height:"100%"
    });
});

Upvotes: 0

Juzer Ali
Juzer Ali

Reputation: 4177

$('div.yourdivclass').click(function(){
    $(this).css('height','100%').css('width','100%');
})

Upvotes: 0

Related Questions