Web Development Help: Javascript

Showing posts with label Javascript. Show all posts

Monday, June 18, 2012

Jquery copy to clipboard

Hi, after long time right? yea...

anyways after long time i am decided to get back again on blogger :) and make this blogger active and helpful to others.

today i come up with some tricks on javascript or on jquery . its a Copy to clipboard.

In IE we have direct window option to make the copy to clipboard code event , but if you try to do same with Firefox or other it wont work

so i thought let add some trick to make the copy thing easy :).

Find my below code and put it in the head section

and insert this section on your body part.

<div>
        <br />
        <a href="#" id="copy-dynamic">Click here to copy the value of this input:</a>
        <input style="width: 300px; margin-left: 15px;" type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}" />
    </div>

lets download the swf from GitHubs and put it in your js directory accordingly.

now simple run the application , type the text on the textbox and click on copy button it will copy it in your system just like (Ctrl + C).

Put your comments or suggestion to make this thread active and popular.

Tuesday, May 3, 2011

Jquery Auto Hide

Hi Guys today i come up with some cool example of JQuery. its a "Auto hide button or Div after some interval time "

if you seen in Gmail, when you send a mail or move the mail to any folder or if you do any operation you will see the confirm message and after some interval time it will hide automatically.
like this:

yes here is the source on same.

<html><head>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script language="javascript">
(function($){
$(document).ready(function() {
$("[AutoHide]").each(function() {
if (!isNaN($(this).attr("AutoHide"))) {
eval("setTimeout(function() {jQuery('#" + this.id + "').hide();}, " + parseInt($(this).attr('AutoHide')) * 1000 + ");");
}
});
});
})(jQuery);
</script>
</head>
<body>
<center>
<br><br>
<div id="div1Seconds" AutoHide="10" style="background: #ccc; border: solid 1px #333">
<input type="button" value="This Button will be hidden in 10 second.">
</div>
<br><br>
<div id="div3Seconds" AutoHide="15" style="background: #ccc; border: solid 1px #333">
<input type="button" value="This Button will be hidden in 15 second.">
</div>
</center>
</body>
</html>

Demo : (refresh page to view the demo)

Hope it will likes you.

Thursday, December 17, 2009

Traversing an Html table with Javascript

This article will introduce you on how to get html table content using DOM Inteface, ones we create an Table on html and suppose we need to retive that table content on server side, on any purpose then this will helps you.you can refer this its really nice way to parse the html table and get the content on same .

mozilla developer has given a good link on ,how to create a DOm interface for table structure

sample example:
1. lets create a Table


<table>
<tbody>
<tr> <td> This is first td </td></tr>
<tr> <td> This is second td </td></tr>
<tr> <td> This is third td </td></tr>
</tbody>
</table>

2. now create a Dom inteface to read this table content , for that you can use Javascript to read this


<script >
   function start() {
       // get the reference for the body
       var body = document.getElementsByTagName("body")[0];

       // creates a <table> element and a <tbody> element
       var tbl     = document.createElement("table");
       var tblBody = document.createElement("tbody");

       // creating all cells
       for (var j = 0; j < 2; j++) {
           // creates a table row
           var row = document.createElement("tr");

           for (var i = 0; i < 2; i++) {
               // Create a <td> element and a text node, make the text
               // node the contents of the <td>, and put the <td> at
               // the end of the table row
               var cell = document.createElement("td");
               var cellText = document.createTextNode("cell is row "+j+", column "+i);
               cell.appendChild(cellText);
               row.appendChild(cell);
           }

           // add the row to the end of the table body
           tblBody.appendChild(row);
       }

       // put the <tbody> in the <table>
       tbl.appendChild(tblBody);
       // appends <table> into <body>
       body.appendChild(tbl);
       // sets the border attribute of tbl to 2;
       tbl.setAttribute("border", "2");
   }
</script >

3. This javascript will first read the table tag element and search with tbody and tr then next td and retrive the content on same .

4. Remember this technique. You will use it frequently in programming for the W3C DOM. First, you create elements from the top down; then you attach the children to the parents from the bottom up.

5. Its create just like this way .

Friday, October 2, 2009

Enhanced country selection with Css and Javascript

When we designing a Registration form , Country & state option are consider, in that time we prefer Drop down option to populate various state or country and user get select one of them , its a very old process , you can redevelop that using ajax, css ,javascript and so many other ways ,

here is very nice way to select Country using simple CSS and Javascript

as you can see , you need to move your mouse over the text box and various country with there flag drop down get populate and you can selete one of the country on same , and that country name will appear in that text box

Download source

hope you like it ,

Thursday, September 24, 2009

Data Grids with(AJAX,jvaScript, Dhtml)

DataGrids is one of the useful control to show data in tabular format with different different records & result, on gridView you can show as many as option which is very much useful for the end user, to handle with Data Grid and all ,

Here are some Data Grid Controls Devlope with ajax/dhtml/and javascript

1. ExtJs Grid

2. Phatfusion Sortable

3. Table Kit

4.Unobtrusive Table Sort Script.

5.Yahoo UI Library’s DataTables.

6.Standardista Table Sorting

7.Mootable Sorting.

hope u like this collection,
if you know more then plz add it on Comments ,

Saturday, September 5, 2009

jquery Fadein Fadeout Effect

Jquery has Great features , here are some collections of Fade Efects , fade effect is very popular on most of the web application , mostly you can use that for image gallary ,animation and so many purpose. Fade in - Fade out is also one of them.

try this example hope you like it .

Example of Fade in and Fadeout

1.CrossSlide
Cross-site is a plugin which is mostly used to show animation,Slide-show effects but in very nice manner you can do that animation on left side ,zoomin-zoomout like features are there.

2.
Slide Show(Semi-Transparent Caption)
in this slide show you can add a caption about that images its look very nice, you can do that using css,html and javascript.

3.Supervised
this is fullscreen sildeshow/background plugin it has some great features like on hover it get pause,cycle preloading,Resizes images

4.JQuery with InnerFade
its a very small plugin basically used inside the container. you can add anything with this like images , list-items ,div and many more.

5.Cycle Plugin
its a very lightwaight slidshow plugin , basically implment on innerfade , it has may combinations like shuffle images,zoom , fadeturnout, turnover, and so on

6.Hover Fade

7. Pikachoose
its just like a Presentation control on which you can show slideshow, navigation buttons and pause , play stop option ,implemantation of pikachoose is very simple.

8.an image Gallery
simple image gallery ,with auto play options.

hope it likes you.

Tuesday, August 25, 2009

How to Make a Password Strength Meter

Password Strength checker is one of the popular & most useful service is there. you have seen on most of the sites they are given some thing like password checking meter in that you can see how Strong your password is ?

on Google Registration page you can see on Password textbox ones you enter the password it will show you how string your password is , and depend on that you can change it or keep it as it is .

now come to the point how we can implement this on your Application.

- you can download Dome.html file from here

- and Javascript file from here

Put your js file on your <head> Section and then call it

hope it will helps you

Thursday, July 30, 2009

jQuery Lightbox-Clones Plugin

1.jQuery FancyZoom


$(document).ready(function() {
   $('a.zoom').fancyZoom();
});

here is a Zoom Effect plugin , this will shows the Content realted with the id Refrence and

the href of the mention tag.

DEMO

DOWNLOAD Here

2.FancyBox

FancyBox is one of the Great among Lightbox clones. its also very easy and smooth in

animation. there are some cool animation Effects:
- you can easity cutomize it
- you can also group realted item

here is sample code to do so.


$(document).ready(function() { 
$("p#Ver1 a").fancybox(); 
$("p#Ver2 a").fancybox({ 'hideOnContentClick': true }); 
$("p#Ver3 a").fancybox({ 
 'overlayShow': true,
 'zoomSpeedIn': 0,
               'zoomSpeedOut': 0
               
}); 
});

DEMO

DOWNLOAD Here

3. Pirobox
this is also cool and with more features.
but before that download the below dependancies

1. css_pirobox/pirobox.css
2. pirobox_packed.js
3. js/jquery1.2.6.js

DEMO
DOWNLOAD Here

4.ThickBox

thickBox is a UI dialog widget which is written in a Javascript , with cool feature in that you can show single image, multiple image, inline image and so on other feature

Feature : -
1 - Thinkbox was build with LightWeight Jquery Library
2 - Hide form elements in IE 6
3 - You can easily resize also.

DEMO
DOWNLOAD Here

5.NyroModal

Feature : -

1 - Ajax call
2 - Form
3 - Iframe
4 - Manual call
5 - Error Handling
6 - Esc key to exit

DEMO
DOWNLOAD Here

hope u like this collection , if u found out more then plz reply here or feel free to drop an comments

Wednesday, July 29, 2009

Parsing RSS feeds with XMLHttpRequest Object

You can parse RSS feeds with thehelp of XMLHttpRequest Object means using javascript or ajax

or jquery . what you have to do in this case is ones you ot the Xml Object you can traverse it

via DOM (Document Object Model).

here is some example which shows how u can done xml Parsing


<script type="text/javascript" language="javascript">
var XMLObjString = '\
<rss version="2.0">\
<channel>\
   <title>Test</title>\
   <link>http://www.xyz.com/</link>\
   <description>RSS Feed</description>\
   <language>EN</language>\
   <image>\
      <url>http://www.xyz.com/images/test.gif</url>\
   </image>\
   <category>JavaScript</category>\
   <item>\
      <title>5:20 PM 7/28/2009</title>\
      <link>http://www.xyz.com/index.html</link>\
      <description>
            This is index page | Message at : 5:24 PM 7/28/2009
      </description>\
   </item>\
</channel>\
</rss>';


// Now convert string to XML object

var xmlobj = (new DOMParser()).parseFromString(XMLObjString, "text/xml");

// set the reference to the root-element "rss"
var root = xmlobject.getElementsByTagName('rss')[0];

// like that you can set reference to "channel" element
var channels = root.getElementsByTagName("channel");

// find all the "item" tags in the channel
var items = channels[0].getElementsByTagName("item");

// in the "item" find the Description to get the Desc also.
var descriptions = items[0].getElementsByTagName("description");


// you can also get the actual description as string
var desc = descriptions[0].firstChild.nodeValue;

// now split the string - description is element 

var Descarray = desc.split("|");
var Message = Descarray[1];

// now we have the RSS data we want as strings
alert(Message);

</script>

Now you can get the data at "alert(Message); tag you can use it whenever you want

Tuesday, July 28, 2009

Jquery form Post request

hi , i have seen this on many website without refreshing a webpage directly value get upadted
how it can be happen? yes its possble with the AJAX / Jquery because it use XMLHttpRequest Object

here is my Example on how you can achive this using Jquery

Steps

1. Add the Jquery liblary in <head> Section
you can download jquery library from here

2. now supoose if we change the price from dropdown the Event should occur .


<select name="Price" id="Price" onchange="update()">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>

3. Now create a function update()


function update()
  { 
     txtQty =  document.formname.price.value;
  
      $.ajax({
     type: "GET",
     url: "update.asp",
     data: "Price="+txtprice+"&id="+id,
     success: function(msg){
          $("#ShowPrice").html("<font color="red">Price updated as</font>"+(price)+");    
    }    
     }, 
     error: function(msg){
     alert( "Error :" + msg);
     }
   });
  }
 </script>

4. Now create "update.asp" page in that get the request and update the records and send yes or no message to main page

5.here is complete example.



 <html>
 <head>
 <title> Jquery Example </title>
 <script language="javascript" src="js/jquery-1.2.3.js" type="text/javascript" ></script>
  <script language="javascript" type="text/javascript" >
  function update()
  { 
     txtQty =  document.formname.price.value;
  
      $.ajax({
     type: "GET",
     url: "update.asp",
     data: "Price="+txtprice+"&id="+id,
     success: function(msg){
          $("#ShowPrice").html("<font color="red">Price updated as</font>"+(price)+");    
    }    
     }, 
     error: function(msg){
     alert( "Error :" + msg);
     }
   });
  }
 </script>
 </head>
 <body>

 <b>Update Price </b>
 <br> 
 <form name="formname" >
 <select name="Price" id="Price" onchange="update()">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
 <br />
 <input type="text" ID="ShowPrice" value="">
 <input type="submit" value="submit">
 </form>
 </body>
 </html>

Wednesday, July 22, 2009

Iframes and jQuery - Working with an iframe's parent

Use iframe and Jquery to open another window in it self .This actually may be more desirable as it is simpler and works in more browsers (Firefox, Internet Explorer, Opera 8.54+ tested)



$( function() {
   var p = parent;
   $("a").click( function() {
       p.$("#myinput").val("Anchor clicked: " + this.href);
       return false;
   })
})

Saturday, July 18, 2009

disable Back button of a browser?

Most of time we want to disable the " Browser Back" button due to some security reason or any

other purpose.

there are some tech. to do this .

You can use the location replace method when changing the location.



  <script language="JavaScript">
  <!--
    if (document.images)
       location.replace('http://www.xyz.com/login.html');
   else
       location.href = 'login.html';
   //-->
  </script>

You can load the new location into another window, and then close the old window:


  <script langauge="JavaScript">
   <!--
   function newWindow(Nameoffile,windowName) 
   { 
      msgWindow=window.open(fileName,windowName); 
   }
   //-->
 </script>
 <a href="javascript:newWindow('welcome.html','window1')">Open Window</a>

open in the next window:


   <a href="login.aspx" target="_blank">New User Login </a>

You can open a window without a toolbar and Disable backButton from Keyboard and

Rightclick


 <script language="JavaScript">
 <!--
   msgWindow=window.open('Login.aspx','windowName','toolbar=no');
 //-->
       </script>

You can add code to the previous page to force the browser to go forwards again:



<script language="JavaScript">
 <!--
  javascript:window.history.forward(1);
//-->
  </script>

There is no direct way to catch the back button event, so you have to play with javascipt to do so.

happy coding ........

Thursday, June 25, 2009

Google hosting Javascript Libraries

Google now offers a service for hosting popular JavaScript libraries, so now it will become very easy to do
So far it hosts jQuery, prototype, script, mootools and Dojo and other...

ou can either load it via the Google AJAX API or the script tag.
The advantage of using the Google API is that it can be used for Google's services as well
(like Maps, RSS/Atom Feeds and Search )

here are the links

Google AJAX API

Google AJAX Libraries API

Ajaxian