Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Monday, February 6, 2012

How to find parent element's id using jquery

11:20 PM No comments

Here I am explaining how to find the parent element's id of a html element using jquery function.


$(this).parent().attr(''id);

this jquery function will give the "id" of the given element's parent  element.


eg:


<html>
   <script>
      $("a").click(function(){
         var parentid = $(this).parent().attr(''id");
      });
   </script>
   <body>
     <div id="parent-id" class="parent-class">
       <a href="#">test</a>
     </div>
  </body>
</html>


the variable "parentid" will return the value parent-id


Read more »

Wednesday, October 26, 2011

How to remove option from selectbox options using Jquery

6:23 PM No comments

Here I am explaining how to remove an option from selectbox or combobox  options list using Jquery. Jquery is a powerful javascript library that provides a lot of predefined functions to achieve our needs.

For removing the option, using remove function(remove()).  
Add following script in onload function.

$("#selectboxid option[value='value']").remove();


selectboxid = ID of your selectbox
value = value of the option which you want to remove.


$(document).ready(function()){
   $("#select-id option[value='0']").remove();
});


Here option value 0 is removed while  the form load.

http://api.jquery.com/remove/
Read more »

Thursday, June 30, 2011

Regular expression for validating US phone number

11:36 AM No comments

US phone number format validation using regular expression.

The common US phone number format is 3digits-3digits-4digits
eg: 222-333-3333
      111-222-1234
The regular expression for validating this format is

function usphone($string) {
   if(preg_match('/^[0-9]{3}\-[0-9]{3}\-[0-9]{4}$/', $string)) {
    return true;
  }
  else{
    return false;
  }
}

Validation using Javascript

function isUSphone(phoneno) {
   var filter = /^[0-9]{3}\-[0-9]{3}\-[0-9]{4}$/;
   if (filter.test(phoneno))
        returntrue;
    else
        return false; 
}

In Jquery

if($("#phone-num").val().match(/^[0-9]{3}\-[0-9]{3}\-[0-9]{4}$/)) {
  //valid phone number
}
else {
  //not a valid number
}

*phone-num -  id of phone number field(input field)
Read more »

Thursday, April 14, 2011

Popular jquery plugins for skinning selectbox

3:48 PM No comments

Most of the clients comes with custom design for their forms and looking fancy drop downs and custom skin for select boxes. A large number of paid plugins are available in the market. But these are not affordable for small and medium  sites. 

A lot of free jquery plugins are available in Internet for skinning select box and drop downs. Here I listed out the common jquery libraries used for skinning select box.  



Jquery Select Skin


A simple jquery code for theming select box. It is a light weight plugin  for skinning <SELECT> lists. It keeps the basic functionalities of <SELECT> list and it uses little CSS.
You can download the latest version from here or download it from jquery site.
First include this js file into your page. Then, apply the select_skin plugin to any jQuery element you want:

jQuery(document).ready(function() {
jQuery("#selectid").select_skin();
});

Add following styles into the CSS file.

div.cmf-skinned-select {
    background: url('skin.png') top right no-repeat ;
    border: 1px solid #ccc;
}
div.cmf-skinned-text {
    padding: 3px;
}


Read more »

Saturday, February 26, 2011

Skinning Select box using Jquery

5:26 PM No comments

A lot of jquery plugins are available in Internet to skin SELECT box. Some of them are very good but some times these plugins cause the performance of the site, if you are including lot of third party javascript files into your sites. I used some third party skinning javascript in my sites and it works fine but when I use lightbox and some other slide show plugin to my site this skinning js not working properly, because it took too much time to load all js.

So I planned to write a simple jquery code to skin the select box. I share the code here
<script>
$(document).ready(function(){
    $("#Selectboxid").before("<
span class='selectboxspan'>Select One</span>");

    //On Change Event
    $("#Selectboxid").change(function(){
        $(".selectboxspan").html($("#Selectboxid option:selected").html());
    });
});
</script>

Also  add these CSS in the code

 select#selectboxid{width:61px;height:20px;opacity:0;filter:alpha(opacity=0);position:relative;z-index:5;}
span.selectboxspan{background:url(skin.png) no-repeat scroll 0 0 transparent; height:17px;overflow:hidden;padding-left:4px;position:absolute;width:63px; border:1px solid #cccccc;}


The HTML code
<select id="Selectboxid"  name="skinnedSelectbox">
        <option value="0">Select One</option>
        <option value="1">Test1</option>
        <option value="2">Test2</option>
        <option value="3">Test3</option>
    </select>

Read more »

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Maintained by Web Themes