Question

I am set of sharing same class name with css dimensions. On clicking a particular <div> i
filling it to the screen width and height and overlaying other <div>s. It works fine. But the problem is when i click once again i am have lost its original dimensions to get back to its original size. below is my code:

 var isFullscreen = false;
  $('.item').click(function(){
    var d = {};
    var speed = 900;
    if(!isFullscreen){ // MAXIMIZATION
        d.width = $(window).width();;
        d.height = $(window).height();; 
        isFullscreen = true;
        $('.item').hide();
        $(this).show();
        $(this).animate(d,speed)    
    }
    else{ // MINIMIZATION            
        **d.width = $(this).css('width');**
        **d.height = $(this).css('height');**            
        isFullscreen = false;
        $(this).animate(d,speed);
        $('.item').show();
    }
    })

I am trying to use something similar to static variables there by saving its original dimensions and using them on second click. And i seen there are no static variables in javascript.Then how to achieve this.

Answer 1

I was able to do this by saving my height and width before i resize the and using them later on: Below is my modified code: you can make out, i added ** to those lines….

var isFullscreen = false;
  var d = {};
  **var test = {};**
  $('.item').click(function(){
    var speed = 900;
    if(!isFullscreen){ // MAXIMIZATION
        **test.width = $(this).css('width');**
        **test.height = $(this).css('height');**
        d.width = $(window).width();
        d.height = $(window).height();
        isFullscreen = true;
        $('.item').hide();
        $(this).show();
        $(this).animate(d,speed)    
    }
    else{ // MINIMIZATION            
        d.width = test.width;
        d.height = test.height;            
        isFullscreen = false;
        $(this).animate(d,speed);
        $('.item').show();
    }
})

Thank you guys for support.