Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

July 18, 2007

Check if connected to internet

Once I stuck with a problem that "How to check if connected to internet or not using JavaScript"
There could be different reasons for this kind of need.

1. Suppose one need to call an online script from JavaScript code
2. Start downloading a file etc

  1. if(there is NO internet connectivity){
  2. window.close();
  3. }
  4. else{
  5. Call a script OR download a file etc
  6. }


Solution is very simple. Simply Put an image tag in your HTML file and write code like this:

  1. <img src="online-site-url/image.gif" onError="alert('Image missing or no internet connection')">


I hope it will help you guys.

February 23, 2007

Show Hide elements

Here are some JavaScript Functions for Showing or Hiding block(s) of HTML elements on any javascript event like: onClick, onMouseOver, onBlur etc etc...

These functions can be used to make good effects on the HTML pages.
These functions are Browser compatible, To use, you just need to pass the ID(s) of the elements(s) you want to show/hide with some event on client side.


Alter Display: It checks the current display status of the element with the ID passes, and alters that. If element is displaying on screen, it will be hide and vice-versa.
//input -> ID of the HTML element (DIV, SPAN, TABLE, TR etc)
function alterDisplay(id)
{
if(document.getElementById(id))
{
e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = "";
else
e.style.display = "none";
}
}


hideIDs(): This function hides all the IDs passed in one go.
It accepts the multiple IDs in comma separated form.
Note: Input is one string only, there is no space between comma (,) & ID
//input -> comma separated IDs of the HTML element (DIV, SPAN, TABLE, TR etc)
//e.g. 1 -> hideIDs('div1,div2,tr1'); //Multiple IDs
//e.g. 2 -> hideIDs('div1'); //Single ID

function hideIDs(IDs)
{
var IDs = IDs.split(',');
for(i=0;i < IDs.length;i++)
{
e = document.getElementById(IDs[i]);
e.style.display = "none";
}
}

showHiddenIDs():
This function shows (un-hide) all the IDs passed in one go. It accepts the multiple IDs in comma separated form.

Note: Input is one string only, there is no space between comma (,) & ID
//input -> comma separated IDs of the HTML element (DIV, SPAN, TABLE, TR etc)
//e.g. 1 -> showHiddenIDs('div1,div2,tr1'); //Multiple IDs
//e.g. 2 -> showHiddenIDs('div1'); //Single ID

function showHiddenIDs(IDs)
{
var IDs = IDs.split(',');
for(i=0;i < IDs.length;i++)
{
e = document.getElementById(IDs[i]);
e.style.display = "";
}
}

February 22, 2007

Print This Page

This JavaScript function is very useful where we have "Print this page" button.
Example: Print your invoice

Conventionally, the logic for implementing the functionality is:
1. Whole of the page is displayed [with a button(Print) on top/bottom ]
2. This generated page could be a Static HTML page, or a Dynamic page(Created in scripting language like PHP, ASP, C#.net etc).
3. On clicking on "Print" button, a new window(or pop-up) is opened, where full code for generating the same HTML (for required part of page) is written again.
4. Then page is printed.

With this function, You just need to:
1. Have all the required part (needed to print) into a DIV tag.
2. OnClick of the "Print" Button call this function & pass the ID of DIV tag.
3. It's done :)

function PrintThisPage(print_div_id)
{
var popup_content = document.getElementById(print_div_id).innerHTML;
var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,";
sOption+="scrollbars=yes,width=620,height=460,left=100,top=25";

var winprint=window.open("","",sOption);
winprint.document.open();
winprint.document.write(popup_content);

winprint.print();
winprint.document.close();
winprint.focus();
}

This is tested in Mozilla FireFox, Internet Explorer.
Hopefully it will work in all other browsers too.