Gliding Phenomena: JavaScript

Showing posts with label JavaScript. Show all posts

jQuery: Disable backgroud scrolling when simplemodal modal box is opened.

When using jQuery simplemodal, when the modal box is box is opened , following is one way to disable the scrolling in the background.

We change the css overflow property of the background in the onShow and onClose functions..

Example:


$("#sample").modal({  
      maxWidth:800, minHeight:800,  
       onShow: function(dialog) {  
                 $("html,body").css("overflow","hidden");  
                 //YOur remaining javascript...  
            },  
       onClose: function(dialog) {  
                 $("html,body").css("overflow","auto");  
                 $.modal.close();  
            }  
 });

Minify/compress JavaScript, CSS compressor

Quick and easy way to minify/compress JavaScript and CSS

JS Compress and Obfuscate : http://www.minifyjs.com/javascript-obfuscator/
JS Compress only: http://www.minifyjs.com/javascript-compressor/
CSS compressor : http://www.minifycss.com/css-compressor/

jQuery: Select a radio button by name and value

Using jQuery, if you want to select a specific radio button based on name and value

 $(':radio[name="radioBtnName"][value="radioValue"]');

Example:



<div id="radioGrps">  
   <div id="setOne">  
       <input type="radio" name="orange" value="5" />  
       <input type="radio" name="orange" value="10" checked />  
       <input type="radio" name="orange" value="20" />  
   </div>  
   <div id="setTwo">  
      <input type="radio" name="peach" value="10" />  
      <input type="radio" name="peach" value="15" />  
      <input type="radio" name="peach" value="20" checked />  
  </div>  
 </div>

In the above example, if you want to select radio button in div#setOne with value 10, then


$('#setOne :radio[name="orange"][value="10"]');  
 or  
 $(':radio[name="orange"][value="10"]');  
 //to make it checked  
 $(':radio[name="orange"][value="10"]').attr('checked', 'checked');

Javascript: Regex for Email Validation


function isValidEmail(email){
 var emailRegx = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
 return emailRegx.test(email);
}

style.display=‘none’ doesnt work on option tags in Chrome, IE

We cannot set a style, display:none on OPTION TAG in Chrome and IE, It can be done in Firefox !

Kinda Solutions :

1. Use disabled attribute for the OPTION

2. If you want to remove them permanently, use removeChild to delete the option.

3. If you want them to show/hide, then u might have to save the removed options into a javascript variable.

Javascript: Make indexOf function working in IE

The indexOf function is a recent addition to the ECMA-262 standard and newly introduced in JavaScript 1.6, hence it may not work in some browsers. You can work around this by inserting the following piece of code at the beginning of your scripts.

Note: This function will work in FF1.5 or above, because this algorithm is exactly the one used in Firefox and SpiderMonkey(is the code-name for the Mozilla's C implementation of JavaScript).


if(!Array.indexOf) {
  Array.prototype.indexOf = function(obj) {
    for(var i = 0; i < this.length; i++) {
      if(this[i] == obj) { return i; }
    }

    return -1;
  }
}

Javascript: Easy Javascript Debugging using Firebug Console.

Instead of using the traditional 'alert' statements for debugging, the best way to debug is using Firebug console.
What you need : Firefox browser and Firebug addon

A simple example:
INSTEAD OF :


function foo() {
 if(some condition) {
    alert("Status update");
  }
}

USE :


function foo() {
 if(some condition) {
  console.log("Status update");
 }
}

For more details : http://getfirebug.com/logging

Date formatting in JavaScript

We would be using 3 different methods to get the current system date, month and year.

getDate() : Returns the date
getMonth(): Returns the month
getFullYear(): Returns the year

#1: month/date/year (5/12/2010)


var date = new Date();
var sysDate = date.getDate();
var sysMonth = date.getMonth();
var sysYear = date.getFullYear();

document.write(sysMonth + "/" + sysDate + "/" + sysYear);

#2: date-month-year (12-May-2010)


var date = new Date();
var sysDate = date.getDate();
var sysMonth = date.getMonth();
var sysYear = date.getFullYear();

var monthNames = new Array("January", "February", "March",
               "April", "May", "June", "July", "August", 
               "September", "October", "November", 
               "December");

document.write(sysDate + "-" + monthNames[sysMonth] + "-" + sysYear);

#3: date-month-year (12^th May 2010)


var date = new Date();
var sysDate = date.getDate();
var sysMonth = date.getMonth();
var sysYear = date.getFullYear();

var monthNames = new Array("January", "February", "March",
               "April", "May", "June", "July", "August", 
               "September", "October", "November", 
               "December");

var sup = "";

if(sysDate == 1 || sysDate == 21 || sysDate == 31) sup ="st";
else if (sysDate == 2 || sysDate == 22) sup = "nd";
else if (sysDate == 3 || sysDate == 23) sup = "rd";
else sup = "th";

document.write(sysDate + "" + sup + " " + monthNames[sysMonth] + " " + sysYear);

jQuery: Using jQuery with Other Libraries

Ever faced a problem to use jQuery with other Library ?
By default, jQuery uses "$" as a shortcut for "jQuery"

jQuery provides the convenience by defining our own shortcut which eliminates the conflict.
A simple example


<script src="jquery.js"> </script>
<script src="prototype.js"> </script>

<script type="text/javascript" >
jQuery.noConflict()  //now by default, $ is jQuery.
  //But you can reassign it to your own variable.
    var $jq = jQuery;
    //start using $jq for jquery's $
    $jq(document).ready(function() {
    $jq("div").hide();    });
</script>

jQuery: $("#elementId") != document.getElementById("elementId")

The most natural assumption is that $ in jQuery is equivalent to document.getElementById. But it is NOT !! Took me a while to figure it out.

$("#elementId")!=document.getElementById("elementId")

$("#elementId") method gives a jQuery object that is always an array of Elements.

So to the get the real DOM element you have to use $("#myElementId")[0] or the more readable $("#myElementId").get(0)

Click a button using Javascript

Here is how you click a button in using javascript.


<script type="text/javascript" >

  document.getElementById("mybutton").click;

</script>

This specifically helps when ur using AJAX helpers in cakePHP and you want to submit the AJAX form using javascript. In this case u will not be able to use either .submit or .onClick

jQuery : Execute particular code after the animation effect has completed

If you want to execute particular code after the animation has completed, try the following:


$("#myDivToFade").fadeOut(function() {
 // This code will be executed
 // after the animation is complete
});

Useful AJAX Modal windows using javascript frameworks

This is an interesting link which has 30 useful AJAX Modal windows implemented using javascript frameworks.
These have neat little descriptions about the framework it uses.
It is easy to pick the solution based on the current javascript framework your using !

http://www.dottony.com/30-useful-ajax-lightbox-and-modal-dialog-solutions/

Gliding Phenomena