Archive for the ‘Javascript Code Samples’ Category

Make text or image blink using CSS and Javascript (0) Comments
Filed Under (CSS, Javascript Code Samples) by Srikanta on June-21-2007

This code will make your desired HTML tag blink within your given time interval.

Just put your content between <p> tags. Also, call blinky() function on body onload event. Put blink delay variable in the function. 1000 is equal to 1 sec, 5000 = 5 secs. Click here for a demo of blink function.

Code (javascript)

<html>
<head>
<script language="javascript">
function blinky(delay){

var el = document.body.getElementsByTagName('p');

for (var i = 0; i < el.length; i++){

if (el[i].className == 'blink'){

el[i].style.visibility = el[i].style.visibility ==

'hidden' ? 'visible' : 'hidden';

}

}

setTimeout('blinky(' + delay + ')', delay);

}

</script>
<style>

#container
{
position:absolute;
top:0%;
left:0%;
background:#3366FF;
border:1px solid #FF0000;
height:100%;
width:100%;
}
#container h1
{
text-align:center;
background:#00FF00;
}
</style>

</head>
<body onload="blinky(1000)">
<div id="container">
<h1>
<p class="blink">Blinking Headline
</h1>

<center>
<p class="blink"><img class="blink" src="smiley.jpg">

</center>
</div>

</body>
</html>
 

Hopefully this function may be of some use to you ever.

del.icio.us Digg Reddit StumbleUpon Technorati    Read More


How to create a pre-loading effect using Javascript (0) Comments
Filed Under (CSS, Design, Javascript Code Samples) by Srikanta on June-12-2007

This code is to show your images or objects only after they are fully loaded in the background. Whenever a page is downloaded on user’s browser and if the user is having slow internet speed or if the image size is too large then we see that the image is shown in parts. To avoid this, you may find this code useful. With this code, if the image is not fully loaded then it will show a waiting/loading message and when the image is loaded, it shows the whole image. For a live working example, click here for demo.

Code (javascript)

<html>
<head>
<title>
Object OnLoad
</title>
<script>
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers)        //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById)          //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.display = iState ? "block" : "none";
}
else if(document.all)   // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
</script>
</head>
<body>
<table width="100%" align="center">
<tr>
<td align="center">
<div id="wait" style='display:block; color:red; font-size:30px;'>

<img src="loaded.gif">Loading  . . .
</div>
</td>
</tr>
<tr>
<td align="center">
<div id='check' style='display:none;'>
<img src="smiley.jpg" onload='toggleBox("wait",0);toggleBox("check",1);'>
</div>
</td>
</tr>
</table>

</body>
</html>
 

Please make sure you put the images in the same folder from where you are running the above code.

del.icio.us Digg Reddit StumbleUpon Technorati    Read More


Handling Screen Resolution Issues in Javascript (5) Comments
Filed Under (Design, Javascript Code Samples) by Srikanta on June-11-2007

Handling Screen Resolution Issues
Browser differences are only half the problem you’ll encounter when attempting to create a universally viewable Webpage. The conditions in which the browser is running, operating system and screen resolution to name a couple, also create problems. Luckily, there is a built-in JavaScript object, Screen, which will help you with this. The Screen object contains information on the display screen’s size and color depth.

Screen Properties
There are several properties that are built into the Screen object in order for you to more effectively use it. Here is a complete list of their names and descriptions of each:

availHeight : This property returns the height of the screen in pixels. The height of any components of the operating system’s interface—such as those of the Windows Taskbar—are subtracted automatically.

availWidth : This property returns the width of the screen in pixels. The width of any components of the operating system’s interface—such as those of the Windows Taskbar—are subtracted automatically.

colorDepth : This property represents the color depth of a color table, if one is in use. If no color table is being used, this property is the Screen.pixelDepth property.

height : This property returns the height of the screen in pixels.

pixelDepth : This property returns the color resolution of the display screen in bits per pixel.

width : This property returns the width of the screen in pixels.

Even though the Screen object is available to return information about the client’s screen, it is not a good idea to give the user a message informing him that he’s not viewing your Web page under ideal conditions. It’s your responsibility as the programmer to make your Web pages work with as many screen variations as possible.

Working with Different Screen Settings

How to get all of your content on the page and how your images will look when they are displayed are two of the most important issues you’ll encounter when dealing with different screen settings.

Getting all of your content onto a page is relatively easy because HTML has built-in features that can be used to create content that fits on any resolution. The best way to make sure that all of a page’s content fits in any screen resolution is to enclose the entire content in a table (which may or not have a border) and set its width property to 600 pixels.

Code (javascript)

<html>

  <head>
    <title>
      Containing Content
    </title>
  </head>

  <body>
<table width="600">
<tr>
<td>
      <center>
        <font size=6>JavaScript</font>
      </center>

      <code>
        If you place all your pages content into a table that has a
        defined width of 600 pixels, it will all fit into a browser
        that is being used under any screen resolution <b>and</b> it
        will look exactly the same under any of the many screen
        resolutions.
      </code>
</td>
</tr>
</table>

  </body>

</html>
 

Because the smallest standard screen resolution is 640×480 pixels, your Web page will fit into any browser running under any of the many screen resolutions. Not only will all your content fit on the page, but it will also look exactly the same under any condition. The only adverse side effect of using this technique occurs when the user is viewing your Web page in a browser window that is not maximized. If this is the case, some of the content of your page will be hidden, and the user will have to use the scroll bar to view it. Fortunately, with your knowledge of the window and screen objects, this side effect can easily be avoided.

Here’s how:

Code (javascript)

<html>

  <head>
    <title>
      Resizing Small Windows
    </title>

    <script language="JavaScript">
    <!--
      function onLoad()
      {
        self.moveTo( 0, 0 );
        self.resizeTo( screen.availWidth, screen.availHeight );
      }
    // -->
    </script>

  </head>

  <body onLoad="JavaScript: onLoad();">
<table width="600">
<tr>
<td>
      <center>
        <font size=6>JavaScript</font>
      </center>

      <code>
        If you place all your pages content into a table that has a
        defined width of 600 pixels, it will all fit into a browser
        that is being used under any screen resolution <b>and</b> it
        will look exactly the same under any of the many screen
        resolutions.
      </code>
</td>
</tr>
</table>

  </body>

</html>
 

This example resizes the window as soon as it loads to make sure it is big enough to hold all of the horizontal content without scroll bars. As most users will become annoyed by having their windows resized unnecessarily, it’s a good idea to put a check in the onLoad() function above, so that the window will only resize if it is necessary in order to show all of the content:

Code (javascript)

function onLoad()
{
  if( self.innerWidth < 600 )
  {
     self.moveTo( 0, 0 );
     self.resizeTo( screen.availWidth, screen.availHeight );
  }
}
 

As a last resort, you can always display a message for the user if he is using a screen resolution that you feel your content or images just cannot accommodate. Here is a modified onLoad() function again that does just that:

Code (javascript)

function onLoad()
{
  if( self.innerWidth < 600 )
  {
    self.moveTo( 0, 0 );
    self.resizeTo( screen.availWidth, screen.availHeight );
  }

  if( self.innerWidth < 600 )
  {
    alert( "This Web page was designed to be viewed using a" +
            " screen resolution of 640x480 or larger." );
  }
}
 

This function attempts to resize the window, but if it’s still not large enough, a message is displayed explaining the problem.

Another important thing to remember when writing a Web page for different screen resolutions is that images will appear larger on smaller resolutions. Fortunately, the width and height properties of the HTML tag allow you to dynamically set the size of the image. Here is a typical image tag that dynamically sizes the image to the screen:
(UPDATED: Thanks to Laurie Erickson)

Code (javascript)

<img src="image.jpg"
      onload="this.width=getWidth( 150 );this.height=getHeight( 200 );">
 

That statement, in combination with the following two functions:

Code (javascript)

function getWidth( width )
{
  return( width * screen.width / 1024 );
}
function getHeight( height )
{
 return( height * screen.height / 768 );
}
 

will dynamically resize the image so that it will look the same on any screen resolution. These two functions—getWidth() and getHeight()—assume that the image was designed for screen resolution 1024 × 768, but you can change that by changing the resolution width and height in the return statements.

del.icio.us Digg Reddit StumbleUpon Technorati    Read More


Character count and limit length in textarea using Javascript (8) Comments
Filed Under (Javascript Code Samples) by Anoop on May-31-2007
Code (javascript)

<HTML>
 <HEAD>
  <TITLE> Javascript Character Count by WebSewak.com </TITLE>
<script language="Javascript">
function counterUpdate(opt_countedTextBox, opt_countBody, opt_maxSize) {
        var countedTextBox = opt_countedTextBox ? opt_countedTextBox : "counttxt";
        var countBody = opt_countBody ? opt_countBody : "countBody";
        var maxSize = opt_maxSize ? opt_maxSize : 1024;

        var field = document.getElementById(countedTextBox);

        if (field && field.value.length >= maxSize) {
                field.value = field.value.substring(0, maxSize);
        }
        var txtField = document.getElementById(countBody);
                if (txtField) { 
                txtField.innerHTML = field.value.length;
        }
}
</script>
 </HEAD>

 <BODY>
  <textarea id="counttxt" name="counttxt" rows="10" onkeyup="counterUpdate('counttxt', 'countBody','30');"></textarea>
 
  You typed <B><span id="countBody">0</span></b> characters
  Max. Length : 30 Chars
 </BODY>
</HTML>
 
del.icio.us Digg Reddit StumbleUpon Technorati    Read More


Capture Events in Internet Explorer and Firefox using Javascript (2) Comments
Filed Under (Javascript Code Samples) by Anoop on May-22-2007
Code (javascript)

<script>
window.captureEvents(Event.CLICK);
window.onclick=sourceCheck;

function sourceCheck(e){
var el=(typeof event!=='undefined')? event.srcElement : e.target
alert(el.tagName)
}
</script>
 

Above code works fine in FireFox but not in IE.

Here is the one that works in Both:

Code (javascript)

<script type="text/javascript">
if (window.captureEvents){
window.captureEvents(Event.CLICK);
window.onclick=sourceCheck;
}
else
document.onclick=sourceCheck;

function sourceCheck(e){
var el=(typeof event!=='undefined')? event.srcElement : e.target
alert(el.tagName)
}
</script>
 
del.icio.us Digg Reddit StumbleUpon Technorati    Read More


How to Read values of radio buttons in Javascript (0) Comments
Filed Under (Javascript Code Samples) by Anoop on May-19-2007
Code (javascript)

<html>
<head>
<script type="text/javascript">
function check(browser)
{
document.getElementById("answer").value=browser
}
function showans()
{
document.getElementById("ans").innerText = document.getElementById("answer").value;
}
</script>
</head>

<body>

What's your favorite website:
<form>
<input type="radio" name="browser" onclick="check(this.value)" value="wallpapers.yah.in">wallpapers.yah.in
<input type="radio" name="browser" onclick="check(this.value)" value="sms.yah.in">sms.yah.in
<input type="radio" name="browser" onclick="check(this.value)" value="techjunk.websewak.in">techjunk.websewak.in
<input type="radio" name="browser" onclick="check(this.value)" value="websewak.in">websewak.in
<input type="text" id="answer" size="20">

Your favorite website is: <span id='ans'></span>

<input type='button' onclick='showans();' name='Show' Value='Show Answer'>
</form>

</body>

</html>
del.icio.us Digg Reddit StumbleUpon Technorati    Read More


How to Play and Stop sounds in Firefox using Javascript (0) Comments
Filed Under (Javascript Code Samples) by Anoop on May-18-2007
Code (javascript)

<script>
function playfx(sound) {
        var loop = true;
        surl = '<embed src="'+sound+'" loop="'+loop+'" hidden="false" autostart="true" height="0" width="0" type="audio/mpeg">';

        document.getElementById("fxsound").innerHTML = surl;
}
</script>
Example Usage:

<div id='fxsound'></div>

<a href='#' onclick="playfx('ringring.wav')" id='fxsound'>Play Sound</a>

<a href='#' onclick="playfx('')" id='fxsound'>Stop Sound</a>
 

Note: For sounds to work in firefox, you need to install QUICKTIME plugin.

del.icio.us Digg Reddit StumbleUpon Technorati    Read More


Change href, target, text of an anchor tag using Javascript (1) Comment
Filed Under (Javascript Code Samples) by Anoop on May-16-2007
Code (javascript)

<html>
<head>
<script type="text/javascript">
function changeLink()
{
        document.getElementById('myLink').innerHTML="WebSewak";
        document.getElementById('myLink').href="http://www.websewak.com";
        document.getElementById('myLink').target="_blank";
}
</script>
</head>
<body>

<a id="myLink" href="http://www.yah.in">Yah.in Collection</a>
<input type="button" onclick="changeLink()" value="Change link">

</body>
</html>
 
del.icio.us Digg Reddit StumbleUpon Technorati    Read More


Change the action of a HTML form in Javascript (0) Comments
Filed Under (Javascript Code Samples) by Anoop on May-11-2007

//Function to Change the action of a form in Javascript

Code (javascript)


<script type="text/javascript">
function changeAction()
{
        document.getElementById("myForm").action = 'http://techjunk.websewak.com';
}
</script>
Example usage:
<form id="myForm" action="http://www.yah.in">
<input type="button" onclick="changeAction()" value="Change value of action attribute">
<input type='submit' value='Submit'>
</form>
 
del.icio.us Digg Reddit StumbleUpon Technorati    Read More