minimize, restore, maximize and hide functionality with javascript without using jquery

Posted on by WPAPI

Sponsors


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.

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”.


<a id="dialog-minimize" href="#" onclick="minimize();" style="display: block;"><span>Min</span></a>

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

Use following javascript function in your document.

function minimize(){

 var main-containter = document.getElementById('popup-container');
 window.divh = main-containter.style.height;
 window.divw = main-containter.style.width;
 window.divtop = main-containter.style.top;
 window.divleft = main-containter.style.left;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "block";

 main-containter.style.position ="absolute";
 main-containter.style.left ="10px";
 main-containter.style.bottom ="0px";
 main-containter.style.marginBottom ="-100px";
 main-containter.style.top = "auto";
 /* css({position:"absolute", left:"10px", width: 250, height: 100, bottom:"-60px"});
 top: 389px; left: 381px; bottom: -60px;
 */
}

function minimize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;

 var hideminbutton = document.getElementById('dialog-minimize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-minimize-return');
 hideminbutton.style.display = "none";
}

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.


<a id="dialog-maximize" onclick="maximize();" href="#" style="display: block;"><span>Max</span></a>

<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.


function maximize_restore(){
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left = window.divleft;
 popup_element.style.top = window.divtop;
 popup_element.style.height = window.div_height;
 popup_element.style.width = window.div_width;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "block";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "none";
}

function maximize(){

 var popup_element = document.getElementById('popup-container');
 window.div_height = popup_element.style.height;
 window.div_width = popup_element.style.width;
 window.divtop = popup_element.style.top;
 window.divleft = popup_element.style.left;

 var hideminbutton = document.getElementById('dialog-maximize');
 hideminbutton.style.display = "none";

 var hideminbutton = document.getElementById('dialog-maximize-return');
 hideminbutton.style.display = "block";

 var myWidth = 0, myHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
 //Non-IE
 myWidth = window.innerWidth;
 myHeight = window.innerHeight;
 } else if( document.documentElement &&
 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 myWidth = document.documentElement.clientWidth;
 myHeight = document.documentElement.clientHeight;
 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
 //IE 4 compatible
 myWidth = document.body.clientWidth;
 myHeight = document.body.clientHeight;
 }
 myWidth = myWidth -25;
 myHeight = myHeight -20;
 var popup_element = document.getElementById('popup-container');
 popup_element.style.position ="absolute";
 popup_element.style.left ="10px";
 popup_element.style.height = myHeight +"px";
 popup_element.style.width = myWidth +"px";
 popup_element.style.top = "5px";
}

If you having any issue with this script please get back to me. Please write email to me on support@wordpressapi.com

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)

Incoming search terms:

You may like following Articles!

52 thoughts on “minimize, restore, maximize and hide functionality with javascript without using jquery”

  1. Pingback: Tweets that mention minimize, restore, maximize and hide functionality with javascript without using jquery | Developer Code book -- Topsy.com

  7. 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 ?

    Reply ↓

  9. Hi. I wanted to drop you a quick note to express my thanks. I’ve been following your blog for a month or so and have picked up a ton of good information as well as enjoyed the way you’ve structured your site. I am attempting to run my own blog but I think its too general and I want to focus more on smaller topics. Being all things to all people is not all that its cracked up to be.

    Reply ↓

  13. I do not even know how I ended up here, but I thought this post was good. I do not know who you are but certainly you are going to a famous blogger if you are not already ;) Cheers!

    Reply ↓

  14. Please let me know if you’re looking for a article author for your site. You have some really great articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d love to write some material for your blog in exchange for a link back to mine. Please blast me an e-mail if interested. Thank you!

    Reply ↓

  15. I am really enjoying the theme/design of your blog. Do you ever run into any internet browser compatibility problems? A small number of my blog audience have complained about my site not operating correctly in Explorer but looks great in Safari. Do you have any suggestions to help fix this issue?

    Reply ↓

  16. This is truly good content and enlightening weblog, I praise what you’ve carried out right here, along with sharing excellent information with great tips and concepts, I’m really pleased to submit my comment on this weblog, many thank you’s towards the author.

    Reply ↓

  18. I am really loving the theme/design of your weblog. Do you ever run into any browser compatibility problems? A few of my blog audience have complained about my website not operating correctly in Explorer but looks great in Safari. Do you have any ideas to help fix this issue?

    Reply ↓

  20. I want you to know, your writing goes to the nerve of the issue. Your pellucidity leaves me wanting to know more. I am going to immediately grab your feed to keep up to date with your site. Sounding Out thanks is simply my little way of saying what a masterpiece for a fantastic resource. Let In my dearest wishes for your future post.

    Reply ↓

  22. I was wondering if you ever considered changing the layout of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better?

    Reply ↓

  23. After study just a few of the blog posts in your web site now, and I truly like your means of blogging. I bookmarked it to my bookmark web site checklist and will probably be checking back soon. Pls try my site as effectively and let me know what you think.

    Reply ↓

  25. Wow! Your post has a ton comment posts. How did you get so many bloggers to look at your article I’m envious! I’m still studying all about article writing on the net. I’m going to view pages on your site to get a better understanding how to get more visable. Thanks!

    Reply ↓

  26. magnificent post, very informative. I’m wondering why the opposite specialists of this sector don’t realize this. You should continue your writing. I’m confident, you’ve a great readers’ base already!

    Reply ↓

  32. Nice post! You truly have a wonderful way of writing which I find captivating! I will definitely be bookmarking you and returning to your blog. In fact, your post reminded me about a strange thing that happened to me the other day. I’ll tell you about that later…

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>