Advertise on Site! You can Advertise on our site. Find out More

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

6 Flares Twitter 5 Facebook 1 Google+ 0 StumbleUpon 0 LinkedIn 0 Buffer 0 Filament.io 6 Flares ×

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.

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)

6 Flares Twitter 5 Facebook 1 Google+ 0 StumbleUpon 0 LinkedIn 0 Buffer 0 Filament.io 6 Flares ×
  • Pingback: Tweets that mention minimize, restore, maximize and hide functionality with javascript without using jquery | Developer Code book -- Topsy.com

  • http://www.freewatchmovies.info Grover Bayala

    It seems that you are a professionnal writer :)

  • http://www.freewatchtvshows.com Davis Pryzgoda

    Keep it up the good job :)

  • http://www.anildewani.com/ best programmer

    Perfect tutorial. I was looking for this…

  • http://www.kcmobile.pl/linki-sponsorowane kampanie AdWords

    Nice site and great text.

  • http://www.kcmobile.pl/linki-sponsorowane linki sponsorowane

    Great site and nice text.

  • Diana

    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 ?

    • http://wordpressapi.com Sony

      I will put the minimize function also…my bad

  • http://www.outsourceable.com/ Micro Jobs

    Hey, nice post!! Not sure words can explain the help it’s provided. :) :) :D

  • http://twitter.com/turtanimo Tawanna Maxim

    Wow, superb blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, as well as the content!

  • http://concerns.youngmath.net/user/MarionMcleodYU/ Josefine Failla

    You are a very intelligent person!

  • http://isabellewalshog.webnode.com Allyn Holzem

    You are a very bright individual!

  • http://www.secondsite.com Ngan Lindler

    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!

    • http://wordpressapi.com Wordpress API

      you can write article for site. For email and other information you can check write for us and contact us link.

  • http://www.albert194dillar.blog.com/2010/05/25/home-cleaning-cost-per-hour-in-manhattan-nyc/ Chung Alberda

    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?

  • http://www.seoki.pl katalog stron

    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.

  • http://www.secondsite.com Elinore Artiles

    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?

    • http://wordpressapi.com Wordpress API

      You need to check your CSS code for this. Or you can consult with any CSS developer.

  • http://homemadesolarpanelguide.org/ Darcel Milkovich

    I like this stuff Amazing :D What is your facebook badge ? i will follow

  • http://speakingeasy.weebly.com Ellie Bahl

    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.

  • http://countyroots.com/superblogmartin/ łęczyca

    I took a break to view your article. I found it very relaxing

  • http://www.recsports.net Flagyl

    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?

  • http://itknowledgeexchange.techtarget.com/profile/Conniedeckerbp Donnetta Woelfle

    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.

  • http://www.bennihonna.com is strattera the same as strattera one

    You got fantastic nice ideas there. I made a research on the topic and got most peoples will agree with your blog.

  • http://www.simplefanpages.com Karol Strobeck

    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!

  • http://zdjecia-slubne.weebly.com Zdjecia slubne

    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!

  • http://collegesofferingphysicaltherapy.blogspot.com/ Luis Arnst

    Great read. Thanks for the info!

  • http://payperclicksadvertising.info Enrique Sossaman

    I would like to say “wow” what a inspiring post. This is really great. Keep doing what you’re doing!!

  • http://universalremotes.ultimate-edeals.com logitech universal remote

    Glad to be one of several visitors on this awe inspiring site :D.

  • http://www.dimn.pl Rusztowania

    Gotchya point, kinda brilliant work you’ve done here ;).

  • http://businessandmanagement.info Jeff Olive

    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…

  • http://advertising-internet.info Curtis Tanaka

    Awesome post. I so good to see someone taking the time to share this information

  • http://treatment-hair-loss.info Tanisha Doescher

    I was just having a conversation over this I am glad I came across this it cleared some of the questions I had.

  • http://paid2surveys.info Isiah Calligan

    Good! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

  • http://tourfurther.com Dorinda Navar

    Intriguing post. I have been searching for some good resources for solar panels and discovered your blog. Planning to bookmark this one!

  • http://women-issues.info Anibal Mehr

    I REALLY liked your post and blog! It took me a minute bit to find your site…but I bookmarked it. Would you mind if I posted a link back to your post?

  • http://visitmeet.com Isis Biehl

    Awesome post. I so good to see someone taking the time to share this information

  • http://spendless-planning.blogspot.com/ Elizbeth Tommolino

    Interesting read, perhaps the best article iv’e browse today. We learn everyday cheers to you!

  • http://furniture-search.info Evan Precht

    This post makes a lot of sense !

  • http://payperclicksadvertising.info Michel Mayen

    Hello, this is my first time i visit here. I found so many interesting in your blog especially on how to determine the topic. keep up the good work.

  • http://www.ifoodlinks.com/ Micheal Muramoto

    Good! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

6 Flares Twitter 5 Facebook 1 Google+ 0 StumbleUpon 0 LinkedIn 0 Buffer 0 Filament.io 6 Flares ×