minimize, restore, maximize and hide functionality with javascript

Inpage Popup are most used JS for website developers. Here in this article I given full detailed code for popup using javascript. Many times we need to minimize and restore functionality for our in page pop-up. In This article I will show how to achieve the minimize and maximize and restore functionality with javascript.

minimize, restore, maximize and hide functionality with javascript

I you want the minimize functionality for your in page pop-up use following code for minimize and restore button. Following code you can use for showing the minimize button on pop-up.

Note: Here for this example My in page popup div id name is “popup-container”. For using following example you should keep the main popup continer id name is “popup-container”.

1<a id="dialog-minimize" href="#" onclick="minimize();" style="display: block;"><span>Min</span></a>
2 
3<a id="dialog-minimize-return" href="#" onclick="minimize_restore();" style="display:none;"><span>Min</span></a>

Use following javascript function in your document.

[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

01function minimize(){
02 
03 var main-containter = document.getElementById('popup-container');
04 window.divh = main-containter.style.height;
05 window.divw = main-containter.style.width;
06 window.divtop = main-containter.style.top;
07 window.divleft = main-containter.style.left;
08 
09 var hideminbutton = document.getElementById('dialog-minimize');
10 hideminbutton.style.display = "none";
11 
12 var hideminbutton = document.getElementById('dialog-minimize-return');
13 hideminbutton.style.display = "block";
14 
15 main-containter.style.position ="absolute";
16 main-containter.style.left ="10px";
17 main-containter.style.bottom ="0px";
18 main-containter.style.marginBottom ="-100px";
19 main-containter.style.top = "auto";
20 /* css({position:"absolute", left:"10px", width: 250, height: 100, bottom:"-60px"});
21 top: 389px; left: 381px; bottom: -60px;
22 */
23}
24 
25function minimize_restore(){
26 var popup_element = document.getElementById('popup-container');
27 popup_element.style.position ="absolute";
28 popup_element.style.height = window.div_height;
29 popup_element.style.width = window.div_width;
30 popup_element.style.left = window.divleft;
31 popup_element.style.top = window.divtop;
32 
33 var hideminbutton = document.getElementById('dialog-minimize');
34 hideminbutton.style.display = "block";
35 
36 var hideminbutton = document.getElementById('dialog-minimize-return');
37 hideminbutton.style.display = "none";
38}

Above function will swap the minimize and restore button through javascript.

Using following function you can achieve the maximize and maximize restore functionality using the simple javascript. following code you need to use in your html for maximize button.

1<a id="dialog-maximize" onclick="maximize();" href="#" style="display: block;"><span>Max</span></a>
2 
3<a id="dialog-maximize-return" onclick="maximize_restore();" href="#" style="display: none;"><span>Max</span></a>

following javascript code you need to use in your document.

01function maximize_restore(){
02 var popup_element = document.getElementById('popup-container');
03 popup_element.style.position ="absolute";
04 popup_element.style.left = window.divleft;
05 popup_element.style.top = window.divtop;
06 popup_element.style.height = window.div_height;
07 popup_element.style.width = window.div_width;
08 
09 var hideminbutton = document.getElementById('dialog-maximize');
10 hideminbutton.style.display = "block";
11 
12 var hideminbutton = document.getElementById('dialog-maximize-return');
13 hideminbutton.style.display = "none";
14}
15 
16function maximize(){
17 
18 var popup_element = document.getElementById('popup-container');
19 window.div_height = popup_element.style.height;
20 window.div_width = popup_element.style.width;
21 window.divtop = popup_element.style.top;
22 window.divleft = popup_element.style.left;
23 
24 var hideminbutton = document.getElementById('dialog-maximize');
25 hideminbutton.style.display = "none";
26 
27 var hideminbutton = document.getElementById('dialog-maximize-return');
28 hideminbutton.style.display = "block";
29 
30 var myWidth = 0, myHeight = 0;
31 if( typeof( window.innerWidth ) == 'number' ) {
32 //Non-IE
33 myWidth = window.innerWidth;
34 myHeight = window.innerHeight;
35 } else if( document.documentElement &&
36 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
37 //IE 6+ in 'standards compliant mode'
38 myWidth = document.documentElement.clientWidth;
39 myHeight = document.documentElement.clientHeight;
40 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
41 //IE 4 compatible
42 myWidth = document.body.clientWidth;
43 myHeight = document.body.clientHeight;
44 }
45 myWidth = myWidth -25;
46 myHeight = myHeight -20;
47 var popup_element = document.getElementById('popup-container');
48 popup_element.style.position ="absolute";
49 popup_element.style.left ="10px";
50 popup_element.style.height = myHeight +"px";
51 popup_element.style.width = myWidth +"px";
52 popup_element.style.top = "5px";
53}

[/viral-lock]
If you having any issue with this script please get back to me. Please write email to me on support@purabtech.in

If you need the more information about Javascript and Jquery then please refer the following articles.

wordpress and jquery conflicts – How to solve that
100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

5 thoughts on “minimize, restore, maximize and hide functionality with javascript”

Diana says:

August 15, 2010 at 7:49 pm

you forgot to publish the minimize function.
The maximize works fine with a simple div but I tried to use it with a jquery ui dialog and it doesn’t work. How can I do it so it looks like the picture ?

1. Sony says:
  
  August 17, 2010 at 6:08 pm
  
  I will put the minimize function also…my bad
  
2. hemal says:
  
  November 15, 2014 at 9:53 am
  
  i can’t arrange this effect in my page please help me
  
  1. Purab Kharat says:
    
    November 15, 2014 at 4:08 pm
    
    Explain, what you doing.
    
karen says:

April 17, 2015 at 2:31 pm

I’m new with this, How can I put this on wordpress?

I want a popup that minimize and maximize

minimize, restore, maximize and hide functionality with javascript