Posts Tagged JavaScript

Upload image using hidden iFrame (Simple Photo Manager)

Posted by admin in HTML, JavaScript, PHP on May 1st, 2009

Image Upload Using iFrame

Image Upload Using iFrame

You can view the working demo here.

You can download the source code here.

In this example we are using a hidden IFrame for uploading file without refreshing page.

Include IFRAME in your page.

<div id="iframe_container">
        <iframe src="pm-upload.php" frameborder="0" style="height:75px;"></iframe>
</div>

The pm-upload.php has a FROM with file input field. When user select a file for upload we have called a upload() function on onChange event of file element.

<form name="iform" action="" method="post" enctype="multipart/form-data">
    <input id="file" type="file" name="image" onChange="window.parent.upload(this);" /><br>
    <span style="font-size:11px; color:#666666;">only gif, png, jpg files.</span>
    <input type="hidden" value="" name="div_id" />
</form>

If file successfully upload and satisfy all validation conditions then we call setUploadedImage() function to setup the information of recently uploaded file on parent window. we can access the parent window javascript functions like this:

window.parent.setUploadedImage();

If there is some validation error then we call uploadError() function of parent window.

Here is complete javascript code for this tutorial:

//Call at the time of upload
function upload(fileObj){
	var par = window.document;
	var frm = fileObj.form;
	var div_id = parseInt(Math.random() * 100000);
 
	// hide old iframe
	var iframes = par.getElementsByTagName('iframe');
	var iframe = iframes[iframes.length - 1];
	iframe.className = 'hidden';
 
	// create new iframe
	var new_iframe = par.createElement('iframe');
	new_iframe.src = 'pm-upload.php';
	new_iframe.frameBorder = '0';
	new_iframe.style.height = '75px';
	par.getElementById('iframe_container').appendChild(new_iframe);
 
	// add image progress
	var images = par.getElementById('images_container');
	var new_div = par.createElement('div');
	new_div.id = div_id;
 
	var new_img = par.createElement('img');
	new_img.src = 'images/indicator2.gif';
	new_img.style.marginLeft = '33px';
	new_img.style.marginTop = '50px';
	new_div.appendChild(new_img);
	images.appendChild(new_div);
 
	var errorDiv = par.getElementById('error');
	errorDiv.innerHTML = "";
	errorDiv.style.display = 'none';
 
	// send
	frm.div_id.value = div_id;
	setTimeout(frm.submit(),5000);
}
 
//Call when upload completed
function setUploadedImage(imgSrc, fileTempName, divId) {
	var par = window.document;
 
	var images = par.getElementById('images_container');
 
	var imgdiv = par.getElementById(divId);
	var image = imgdiv.getElementsByTagName('img')[0];
	imgdiv.removeChild(image);
 
	var image_new = par.createElement('img');
	image_new.src = imgSrc;
	image_new.className = 'pic';
 
	var image_label = par.createElement('input');
	image_label.type = "text";
	image_label.maxLength = "40";
	image_label.size = "12";
	image_label.value = "Label";
	image_label.name = "title[]";
 
	var image_hidden = par.createElement('input');
	image_hidden.type = "hidden";
	image_hidden.value = "1";
	image_hidden.name = "delFlag[]";
 
	var image_name = par.createElement('input');
	image_name.type = "hidden";
	image_name.value = fileTempName + ",new";
	image_name.name = "imageName[]";
 
	var image_del_link = par.createElement('a');
	image_del_link.href = "javascript:void(0)";
	image_del_link.appendChild(par.createTextNode("Delete"));
 
	var br = par.createElement('br');
 
	imgdiv.appendChild(image_new);
	imgdiv.appendChild(image_label);
	imgdiv.appendChild(image_hidden);
	imgdiv.appendChild(image_name);
	imgdiv.appendChild(br);
	imgdiv.appendChild(image_del_link);
 
	image_label.onfocus = function() {
		eval(labelOnFocus(image_label));
	}
 
	image_label.onblur = function() {
		eval(labelOnBlur(image_label));
	}
 
	image_del_link.onclick = function() {
		eval(deleteLinkOnClick(image_del_link, ''));
	}
}
 
// call when error occurred at the time of upload
function uploadError(divId, oName) {
	var par = window.document;
	var images = par.getElementById('images_container');
	var imgdiv = par.getElementById(divId);
	images.removeChild(imgdiv);
	var errorDiv = par.getElementById('error');
	errorDiv.innerHTML = oName + " has invalid file type.";
	errorDiv.style.display = '';
}
 
function labelOnFocus(image_label) {
	if (image_label.value == "Label") {
		image_label.value = "";
	}
}
 
function labelOnBlur(image_label) {
	if (image_label.value == "") {
		image_label.value = "Label";
	}
}
 
function deleteLinkOnClick(delLink, delFlag) {
	var par = window.document;
	var imgDiv = delLink.parentNode;
	var image_hidden = delFlag == '' ? imgDiv.childNodes[2] : par.getElementById(delFlag);
 
	if (image_hidden.value == '1') {
		image_hidden.value = '0';
		delLink.removeChild(delLink.childNodes[0]);
		delLink.appendChild(par.createTextNode("Restore"));
		delLink.style.color = '#FF0000';
	}
	else {
		image_hidden.value = '1';
		delLink.removeChild(delLink.childNodes[0]);
		delLink.appendChild(par.createTextNode("Delete"));
		delLink.style.color = '#64B004';
	}
}

You can check the live demo of this tutorial and you can also download the source code of the sample demo. The demo example is very simple and only for learning purpose. You can easily extent the sample code as per your requirement.

, , ,

16 Comments


Create CSS Stylesheet and JavaScript for Print

Posted by admin in CSS, HTML, JavaScript on April 13th, 2009

CSS Stylesheet for Print

CSS Stylesheet for Print

When we want to print out HTML page we need a lighter version of our HTML page. Basically, we don’t want to print the background images, background colors, advertisements and other things which are not relevant in printing. For this purpose, we need to specify a CSS stylesheet which browser use when we print our HTML page. We can also change the width and layout of our HTML page. We can specify our CSS stylesheet for print like this.

<head>
/*External style sheets*/
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>
<head>
/*Embedded style sheets*/
<style type="text/css" media="print">
	.noprint
        {
		display:none;
	}
</style>
</head>

The important thing to note here is the media descriptor media=”print” which we are giving through media attribute. The browser knows using this media descriptor that this CSS stylesheet is defined to use at the time of print. We can define CSS stylesheet for SCREEN like this.

<head>
/*External style sheets*/
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<head>
/*Embedded style sheets*/
<style type="text/css" media="screen">
	.header
        {
		width:800px;
                height:200px;
	}
</style>
</head>

In the following example, I don’t want to print the “Print this Coupon” link in coupon. So, I have just added the class “noprint” and set the display property none in this class. Now, I will apply this class to all the elements which I don’t want to print. You can easily create other classes for different purpose like to change the background color of element in print.

<!--coupon.html-->
<html>
<head>
    <title>CSS stylesheet for Print</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>
<body>
	<div class="coupon-mini">
  	<table width="500" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="146" align="left" valign="top"><div class='default-coupon'><img src='/sites/default/files/coupon_116_116.'></div></td>
      <td width="354" align="left" valign="top">
      	  <h3 style="font-family: 'palatino linotype',palatino; line-height:18px; padding:6px 0 0 0; color:#0e549c; ">
          		Divan Restaurant and Hookah Lounge, Alabama          
          </h3>
          <div class='coupons-text1'><span>McDonald 20% Off.</span><p>McDonald 20% Off.</p></div><br />
          <div style="clear:both;"></div>
          <div class="detail-basic1">
          	 3125 Piedmont Rd NE, Atlanta, Alabama<br> 
             <strong> Phone Number :</strong>  (404) 365-0410<br/>
             <strong> Pincode:</strong>  30305 <div class="openhr1"><strong> Opening Hours:</strong>  6:30 PM to 01:00 AM</div>
	         <div class="web1">
             	<div class="lft1"><a href="#" class="about-web-link">http://www.divanatlanta.com</a></div>
                <div class="rght1"><a href="#" class="about-mail-link">ajay0878@yahoo.com</a></div>
			</div>
          </div>
      </td>
    </tr>
  </table>
</div>
<div class="print noprint"><a href="javascript:window.print();" class="coupon-print-link">Print this Coupon</a></div>
</body>
</html>

We have also added the window.print() function on Print this Coupon link. This function print the current windows content. We can also print our page through File->Print… menu. But this function is useful when the toolbar and menubar are disabled.

, , , ,

2 Comments


Select tags(words) from one list to another using jQuery

Posted by admin in JavaScript, jQuery on April 11th, 2009

Select tags using jQuery

Select tags using jQuery




You can view the working demo here.

Here I am showing an example in which we can select tags from given tag cloud using jQuery. The code the easy to understand and easy to customize as per requirement. I have created two DIVs. First DIV contains all the tags when page load. We can select tags from first DIV by double clicking on the tags. We can also remove selected tags from second DIV by double clicking on tag. We can also sort the tags by using filters (like:- All, Popular, and New). We can get the IDs of selected tags by clicking the submit button. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Select tags(words) from one list to another using jQuery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="page">
  <div class="form">
  <h3>Select tags(words) from one list to another using jQuery.</h3>
  <br />
  <div class="formbox">        
      <div id="tags_left" class="alltags tagsbox">
            <a href="javascript:void(0);" class="ctagleft all new" tagid="2">Design</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="3">Gadgets</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="4">Hardware</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="5">Industry News</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="6">Linux/Unix</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="7">Microsoft</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="8">Programming</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="9">Security</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="10">Software</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="11">Business/Finance</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="12">World News</a>
            <a href="javascript:void(0);" class="ctagleft all new" tagid="13">Political News</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="14">Political Opinion</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="15">Environment</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="16">General Sciences</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="17">Space</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="18">PC Games</a>
            <a href="javascript:void(0);" class="ctagleft all popular" tagid="19">Playable Web Games</a>
        </div>
   		<div id="tags_right" class="seltags tagsbox"></div>
  </div>
  <div class="float_break"></div>
  <div style="float:left; padding:0px 1px 0 4px;"><h6>Double click on tag to select</h6></div>
  <div style="float:left; padding:0px 0 0 210px;"><h6>Double click on tag to remove</h6></div>
  <div class="float_break"></div>
  <h6>
  	&nbsp;Sort by: <a href="javascript:void(0);" id="show_all">All</a>&nbsp;&nbsp;
  	<a href="javascript:void(0);" id="show_popular">Popular</a>&nbsp;&nbsp;
  	<a href="javascript:void(0);" id="show_new">New</a>
  </h6>
  <br />
  <div class="float_break"></div>
  <div class="formbox">
    <input type="button" value="Submit" id="submit"/>
    <div class="float_break"></div>
  </div>
</div>
</div>
</body>
</html>
<script language="javascript">
	$(document).ready(function () {
		$('.ctagleft').dblclick(function() {
			var tag_clone = $(this).clone(true);
 
			if ($(tag_clone).hasClass('ctagleft')) {
				$(tag_clone).removeClass('ctagleft').addClass('ctagright');
				$('#tags_right').append(tag_clone).append(' ');
			}
			else if ($(tag_clone).hasClass('ctagright')) {
				$(tag_clone).removeClass('ctagright').addClass('ctagleft');
				$('#tags_left').append(tag_clone).append(' ');
			}
			$(this).remove();
		});
 
		$('.ctagright').dblclick(function() {
			var tag_clone = $(this).clone(true);
 
			if ($(tag_clone).hasClass('ctagleft')) {
				$(tag_clone).removeClass('ctagleft').addClass('ctagright');
				$('#tags_right').append(tag_clone).append(' ');
			}
			else if ($(tag_clone).hasClass('ctagright')) {
				$(tag_clone).removeClass('ctagright').addClass('ctagleft');
				$('#tags_left').append(tag_clone).append(' ');
			}
			$(this).remove();
		});
 
		$('#submit').click(function() {
			var tags = '';
			$('#tags_right .ctagright').each(function() {
				var tag_id = $(this).attr('tagid');
				tags += tag_id + ',';
			});
 
			if (tags == '') { tags = 'No tag selected yet.'; }
			alert('Selected tags ID are: ' + tags);
		});
 
		$('#show_popular').click(function(){
			$('#tags_left .all').css("display", "none");
			$('#tags_left .popular').css("display", "");
		});
		$('#show_all').click(function(){
			$('#tags_left .all').css("display", "");
		});
		$('#show_new').click(function(){
			$('#tags_left .all').css("display", "none");
			$('#tags_left .new').css("display", "");
		});
	});
</script>

, ,

No Comments


How call JavaScript function from FLASH

Posted by admin in Flash, JavaScript on April 8th, 2009

We can call the JavaScript function from FLASH application. I am showing here how we do that.

getURL("javascript:helloWorld();");

Here “getURL()” is the Flash ActionScript function. We have give the name of our JavaScript function with “javascript:” as prefix. This will call the “helloWorld()” function which we have defined in JavaScript.

<script type="text/javascript">
     function helloWorld() {
           alert('Hello World');
     }
</script>

Also, add the following parameter to the OBJECT and EMBED tag:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="150" height="120">
  <param name="movie" value="swf/myflash.swf" />
  <param name="allowscriptaccess" value="always" />
  <param name="wmode" value="transparent" />
  <param name="menu" value="false" />
  <embed height="120" width="150" allowscriptaccess="always" wmode="transparent" menu="false" src="swf/myflash.swf" type="application/x-shockwave-flash"/>
</object>

allowscriptaccess let the Flash application to communicate with the HTML page hosting it. This is required because getURL() function can cause JavaScript to use the permissions of the HTML page, which can be different from the permissions of your Flash application. This has important implications for cross-domain security.

The valid values for allowscriptaccess are:

always permits scripting operations at all times.
never forbids all scripting operations.
samedomain permits scripting operations only if the Flash application is from the same domain as the HTML page.

The default value used by all HTML publish templates is samedomain.

,

No Comments


Create simple left tree menu using jQuery

Posted by admin in JavaScript, jQuery on March 23rd, 2009

We can easily create left tree menus for our website. Left tree menus provide easy navigation to our website and our website look more organized.

Left Tree Menu Image

Left Tree Menu Image

You can view the working demo here.

You can download the source code here.

In tree menu each item is called node. A node further can have child nodes. We used unordered list for menus “<ul></ul>“. We are just toggling the “display” property of “<ul>” from “block” to “none” and “none” to “block” when user click on it. The “block” will expand the menu and “none” collapsed it.

HTML Code:-

<div class="content">
	<ul id="root" class="menu">
		<li>
			<a href='javascript:void(0);' childid = 'c_12' class='cat_close category'>&nbsp;</a>
			<a href='javascript:void(0);'>Diabeties</a>
		</li>
		<ul id='c_13'>
			<li>
           		<a href='javascript:void(0);' class='product'>&nbsp;</a>
            	<a href='javascript:void(0);'>Skelaxin</a>
            </li>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_8' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Pain Killers</a>
        </li>
        <ul id='c_8'>
            <li>
        	    <a href='javascript:void(0);' childid = 'c_11' class='cat_close category'>&nbsp;</a>
            	<a href='javascript:void(0);'>Brufin</a>
            </li>
            <li>
	            <a href='javascript:void(0);' childid = 'c_10' class='cat_close category'>&nbsp;</a>
    	        <a href='javascript:void(0);'>D Cold Plus</a>
            </li>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_5' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Ultracet</a>
        </li>
        <ul id='c_5'>
            <li>
        	    <a href='javascript:void(0);' childid = 'c_7' class='cat_close category'>&nbsp;</a>
         	   	<a href='javascript:void(0);'>Ultracet</a>
            </li>
            <ul id='c_7'>
            	<li>
            		<a href='javascript:void(0);' class='product'>&nbsp;</a>
            		<a href='javascript:void(0);'>Generic Ultracet</a>
            	</li>
            </ul>
        </ul>
        <li>
            <a href='javascript:void(0);' childid = 'c_3' class='cat_close category'>&nbsp;</a>
            <a href='javascript:void(0);'>Watson</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'>&nbsp;</a>
            <a href='javascript:void(0);'>Carisoprodol</a>
        </li>
        <li>
            <a href='javascript:void(0);' class='product'>&nbsp;</a>
            <a href='javascript:void(0);'>Levitra</a>
        </li>
	</ul>
</div>

JavaScript Code:-

<script type="text/javascript">
$(document).ready(function() {
	$("#root ul").each(function() {$(this).css("display", "none");});
	$("#root .category").click(function() {
		var childid = "#" + $(this).attr("childid");
		if ($(childid).css("display") == "none") {$(childid).css("display", "block");}
		else {$(childid).css("display", "none");}
		if ($(this).hasClass("cat_close")) {$(this).removeClass("cat_close").addClass("cat_open");}
		else{$(this).removeClass("cat_open").addClass("cat_close");}
	});
});
</script>

, ,

10 Comments