JavaScript – Page 2 – purabtech.in

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


<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

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

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'); }

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

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.

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.

Best IDE for WordPress, Drupal Plugin and Theme development

Many developer who are experienced in development. But with another CMS development. we look for Best IDE for WordPress, Drupal Plugin and Theme development. But still that comes to another cms or project development. We are always search for good IDE which are free and open source that is the first requirement.

Best IDE for WordPress, Drupal Plugin and Theme development

Our basic need are as follows in any IDE, the IDE need to support following things:

CSS
XHTML/HTML
JavaScript
PHP
MySQL

I created a list of IDE which I used daily to do a development. Here I need to clarify IDE is language specific. I work in PHP, Ruby on Rails, Adobe Air, Flex, Javascript, CSS.

I recommend following IDEs which I really found useful for all the developer who are working in wordpress, joomla, drupal development.

1. eclipse (Compatible on Windows and Linux)

Best IDEs for WordPress, Joomla, Drupal Plugin and Theme development — Best IDE for WordPress, Drupal

Description: Eclipse is best IDE for all language development. Eclipse IdE is basically Java development but still that provides PHP, ROR and other language support. I like this IDE for java development but I did not recommend for PHP or Ruby on Rails.

2. NetBeans (Compatible on Windows and Linux)

Description: This IDE has also all language support. I specially like this IDE from Ruby on Rails development. I Used this IDE for Ruby on Rails development as well as some times for PHP development. Among the Ruby on Rails developer this IDE is so popular.

3. Komodo (Compatible on Windows and Linux)

Description : This IDE is also support for all languages. This IDE is really good support for PHP. I really love this IDE for PHP development. Simple and fast and still nice features about PHP. This IDE is really popular among the PHP developers.

4. Aptana (Compatible on Windows and Linux)

Description : This IDE is mainly made for Ruby on Rails development. This is also popular among Ruby developers. This IDE has features like eclipse. I like this IDE for Adobe Air and flex development. This IDE has also PHP support.

5. EditPlus (Compatible on Windows)

Description: This IDE is plain simple text editor. Shows you simple color highlight features. I specially recommend this IDE for PHP development and new PHP developer always start with this IDE so they will get filmier with PHP functions and methods because this IDE is does not provide any help. I love the use this IDE in daily use for any language development.

If you want to add any more IDEs. You can comments on this article.

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.

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

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

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

minimize, restore, maximize and hide functionality with javascript

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

Share Article:

create sticky footer using css or javascript

Share Article:

change image of on MouseOver Event using JavaScript or CSS

Share Article:

How to get website loading time in browser

Share Article:

How to find mouse position and coordinates

Share Article:

get div height using javascript when div height is auto

Share Article:

Best IDE for WordPress, Drupal Plugin and Theme development

1. eclipse (Compatible on Windows and Linux)

2. NetBeans (Compatible on Windows and Linux)

3. Komodo (Compatible on Windows and Linux)

4. Aptana (Compatible on Windows and Linux)

5. EditPlus (Compatible on Windows)

Share Article:

Share Article:

How to use document.write and innerhtml

Share Article:

call javascript function inside innerhtml

Share Article: