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

minimize, restore, maximize and hide 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”.


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

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

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";
}

[/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)

create sticky footer using css or javascript

You can create sticky footer using css perfectly. Use following css code for creating the sticky footer. Many people gave example of google sticky footer.

create sticky footer using css or javascript

create sticky footer using css or javascript
create sticky footer using css or javascript

Use bellow CSS code.


html{

height:100%

}

body{

height:100%

}

#footer{

position: relative;

bottom: 0px;

height: 100px;  //You must need to know your footer height

margin-bottom:-100px; //here I am thinking footer will be 100 px

}

You can change the footer height as per your need or footer height.

Sticky footer you will also achieve using javscript code.

<script>// <![CDATA[

// ]]></script>
document.body.onload = function () {
 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;
 }
 window.alert( 'Width = ' + myWidth );
 window.alert( 'Height = ' + myHeight );

 middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
 document.getElelmentByID("main").style.height = middle_container;
}
// ]]>

You just need to minus the header and footer height from middle_container.

change image of on MouseOver Event using JavaScript

Using only javascript and CSS you can easily achieve mouseover effect. In article we given sample code for change image of on MouseOver Event in your site.

change image of on MouseOver Event using JavaScript or CSS

change image of on MouseOver Event using JavaScript or CSS
change image of on MouseOver Event using JavaScript or CSS

If you want to change the image on rollover or mouseover event. This is very old technique. You can achieve this using CSS or javascript. I given the simple and powerful code javascript mouse event. I tested this code. It works on all the browsers.

With CSS you can use the following code:


.yourimage { background-image: url('firstImage.jpeg'); }
.yourimage:hover { background-image: url('secondImage.jpeg'); }

<div class=”yourimage” style=”height:100px;width:100px;min-height:100px;min-width:100px;”></div>

I am using the yourimage class for div element.

With javascript you can use following code

<div>
<img src="firstimage.jpeg" onmouseover="this.src='secondimage.jpeg'" onmouseout="this.src='firstimage.jpeg'"/>

If you are using the Jquery then use following code:

<style>
.imagediv{background-image:firstimage.jpg}
<div class="imagediv"/>

 $(document).ready(function () {
            $('div.imagediv').mouseover(function () {
                $(this).css(background-image", "url('secondimage.jpg')");
            });
        });

How to get website loading time in browser

Understanding the website and webpage loading time is very important. You can check the page loading time through javascript code. If you want to get the webpage loading time through javascript. This very easily achievable using javascript. If you want to get the webpage loading time through javascript. This easily achievable using javascript. We have code to get website loading time in browser

How to get website loading time in browser

You just need to use following code in your head tag


var starttime = new Date().getTime();
window.onload=function() {
 var loading_time = new Date().getTime()-starttime;

 alert('Webpage loading time in ' + loading_time + 'ms - milisecond');
}

 

How to get website loading time in browser
How to get website loading time in browser

How to find mouse position and coordinates

Many times we worked on this topic. In this tutorial we are going to show you, How to find mouse position and coordinates. we given code sample in article.

How to find mouse position and coordinates

[script]
/*
* This get_mouse_coordinates function we are using for capturing the Mouse coordinates of on browser
*/
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.load = get_mouse_coordinates;
document.onmousemove = get_mouse_coordinates;

function get_mouse_coordinates(e) { // as per Document body

var x_pos;
var y_pos;
if (!isIE) {
x_pos = e.pageX;
y_pos = e.pageY;
}
if (isIE) {
x_pos = event.clientX + document.body.scrollLeft;
y_pos = event.clientY + document.body.scrollTop;
}

alert(x_pos);
alert(y_pos);
}

[/script]

clientX and clientY will work in only Firefox, safari, chrome and opeara. That will not work in IE browsers.

So We need to write condition for IE browsers.
In IE browser use window.event.x and window.event.y methods.

Given example is cross browser tested…

 find mouse position and coordinates
find mouse position and coordinates

get div height using javascript when div height is auto

We need to get the div height and width when these properties not defined. Here in this article, get div height using javascript when div height is auto. Many times we need to get the div or any DOM elements height and width when these properties not defined.

get div height using javascript when div height is auto

Lets say I kept div height auto and width as 200px fix and data is dynamic for eash user. So how we can get the div height.

take div height from javascript
take div height from javascript

We can use two javascript functions for fetching the div height.
1. offsetHeight – this will return the value which are specified in your CSS

2. clientHeight – this function will return real inner height of element that does not matter about CSS.
I recomend to use this function.

Exmaple code as follows:

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

<style>
#wordpressapidiv{ width:200px; height:auto;border:#ccc 1px solid}
</style>
wordpressapidiv">
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.

This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content. This is dummy content.
This is dummy content. This is dummy content.
</div>

<script>
function getDivHeight(divID){
gd = document.getElementById(divID).clientHeight;
alert(gd);
}

function getDivWidth(divID){
gw = document.getElementById(divID).clientWidth;
alert(gw);
}

</script>

<input name="test" type="button" onclick="getDivHeight('wordpressapidiv')" >

[/viral-lock]

Function above code you can fetch the div height and width using the javascript.

footer stickable to end of the browser window without fixed position

Many web developer always think about why footer is not sticking to end of browser. In this tutorial we will show you to footer stickable to end of browser.

This is scenario:
If content is less than footer need to go bottom of browser and if content is more than footer will go down as per content.

Many people think this is CSS developer’s But I am not think that way. because this is totally different problem.

Some people suggest to use header, middle container and footer height in percentage. But that is wont be possible for all the time.

Here I will give you the solution. Use following JavaScript in document.

<script type="text/javascript">
 var header_height = 150;
 var footer_height = 100;
var reduce_height = header_height+footer_height;
 browserHeight = 0;
 if( typeof( window.innerHeight ) == 'number' ) {
 //Non-IE
 browserHeight = window.innerHeight;
 } else if( document.documentElement &amp;&amp; (  document.documentElement.clientHeight ) ) {
 //IE 6+ in 'standards compliant mode'
 browserHeight = document.documentElement.clientHeight;
 } else if( document.body &amp;&amp; (  document.body.clientHeight ) ) {
 //IE 4 compatible
 browserHeight = document.body.clientHeight;
 }
 // window.alert( 'Height = ' + browserHeight );
 var min_height = browserHeight-reduce_height+ +"px"
 document.write('<style>#middle_container{min-height:'+ min_height +'}</style>');
 //document.getElementById("middle_container").style.minHeight = browserHeight-146+"px";
</script>

Here in this JavaScript I am assuming middle_container is your main block of content. You can change the variables as per your need.

footer stickable to end
footer stickable to end

Web designers are saying what to do with IE6

In 2003,  Microsoft launched the Internet Explorer6 and it had dominated the market with 97 percent share that time. Over the years its market share has declined, and Now as per new.cnet.com in Jan 2010, IE6 has only holding 5 percents of internet users.

Web designers are saying what to do with IE6

Web designers are saying what to do with IE6
Web designers are saying what to do with IE6

Still Most of all web designers are fighting all the time for IE6 issues and hacks. All web designers and Web development companies are still spend so much to to solve the issue with IE6 browsers.

There is reason behind that. In all over the world, still some big corporate companies and offices are using IE6. Many big companies and brands announced to ban IE6 in 2009 itself.

The Google and March 1 references come from that company’s recent announcement that it would drop IE6 from the list of supported browsers for its Google Docs online applications and its Google Sites hosting services starting on Monday, March 1. Yesterday, Google’s popular video site YouTube named March 13 as the end-of-support date for IE6.

There is big issue with IE6 browser but still some web developer are not aware of that. IE6 is majorly lacking to provide a web security. I can say, IE6 is kind of hackers browser.

Microsoft’s browser has weathered a “kill IE6” campaign since February 2009, when Facebook prompted IE6 users to upgrade. It accelerated last summer when Digg announced it would curtail IE6 support, and an “IE6 Must Die” Twitter petition collected thousands of names. Microsoft has endorsed the anti-IE6 efforts, going so far as to say that “Friends don’t let friends use IE6,” although it has refrained from forcing users or companies to upgrade to IE7 or IE8, arguing that the old browser is still required by some enterprises.

There are new technologies are coming like HTML5, CSS3 but still IE8 is also not providing the basics of that. So web deverloper’s need to struggle for that. The biggest issue I will say here is project estimation. Due to IE6 browser estimation will go always wrong. This is really frustrating.

There are multiple issues with IE6. I will talk about some here.

  • z-index issue – most bad part in IE6
  • inline-block – display property not work
  • min-height and max-height css property
  • child selectors in CSS
  • PNG transparent images- biggest issue
  • Poor Javascript support

Microsoft is planning to launch IE9 but still they are not included the some nice features of HTML5 and advanced javascript methods and CSS3 attributes.

What I say more.. Web designers are saying what to do with IE6…..

How to use document.write and innerhtml

document.write and innerhtml both the functions are useful to adding the dynamic content in in Document.

Both function are many times used by developer in javascript functions, Ajax calls, Web services and many JS libraries.

How to use document.write and innerhtml

So We need understand the similarities and differences and limitation about document.write and innerhtml.

First whenever and where you calls document.write function that more important.

Here I am going to show you how to use the document.write first.

<script type="text/javascript">

var hello_world = function() {
document.write('Wordpressapi is good website'); // print hello world in DOM

var mytext = "Wordpressapi is best website";
document.write(mytext); // print again through variable.

}
</script>

Using above code you can print or execute the so much HTML content in DOM.

Here I am going to show you how to use the innerHTML in DOM.

<script type="text/javascript">
document.getElementById('sample_Div').innerHTML="Wordpressapi is good website"; // add simple text
//document.getElementById('sample_Div').innerHTML="<img src=sample.jpg></img>"; // add image
</script>

Note: In your document “sample_Div” id with div need to be present.
put following code in your document.

<div id=\"sample_Div\">
Sample Text
</div>

Loading iframe using innerhtml is the best techniqe and solution for web services and cross domain calls.

document.getElementById('sample_Div').innerHTML = "<iframe src='http://images.purabtech.in/'></iframe>";

Both the techniques are stand for as per situation and use

How to use document.write and innerhtml
How to use document.write and innerhtml

call javascript function inside innerhtml

There is big issue We found with innerHTML function. If you try to call javascript function inside innerhtml content then we will face this problem with various.
We need to always care about Cross browser issues with javascript method.

call javascript function inside innerhtml

For Ajax and adding the dynamically content in DOM we have actually we ways.
First is simple document.write function and second function is using innerHTML.

There is some cross browser issues with both the method. First I will talk about document.write.
If we use document.write in our DOM then there is no control over the content which we are adding through document.write

Basically when we use document.write then this function will execute or add the HTML content in DOM where we call this function.

If you want to avoid this this behavior I suggest use the innerHTML. But innerHTML method is also having some issues with nested innerHTML executing with 2 or 3 level with Major browsers.
Microsoft is now planning to launch the IE9 version. But in that version they are not supporting this kind of functionality.

So Major JS library developer need to think about new approach which will give some good alternate solution.

We can achieve the nested innerHTML but we need to do some very complex development in javascript.

With innerHTML method: The property is read/write for all objects except the following, for which it is read-only:
COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value. Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer
5.

In this article I am going to give example about executing the simple javascript function in innerHTML.

function add_cont() {
var html_cont = 'javascript:alert(\'hello world\')">click for hello world test'+
 '<script> alert(\'tests\');'+
'var wordpressapi = document.createElement("div");'+
'wordpressapi.innerHTML = "some ad";<\/script>'
;
document.getElementById('test_htm').innerHTML = html_cont;
<div id="test_htm"></div>
javascript:add_cont()">Insert test div and text with javascript on click event.

Other best solution is all the traditional but still trusted.

document.write("<iframe src='inner_cont.html'>");
// ... Javascript code will goes here... //
document.write("</iframe&gt;");

Execute JavaScript functions in innerHTML
Execute JavaScript functions in innerHTML

I am still working on this issue to for adding nested innerHTML content.