[Javascript] - Get Object Size

Tips for today: Checking of object lenght/size in javascript.

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

// Get the size of an object
var size = Object.size(myArray)

How to check browser platform in javascript

Are you planning to set a different html page to your users depending on the platform that they were using? If yes, then, this snippet might be useful for you in order to implement that functionality.

All you need to do is to know use and invoke the browser navigator object. It contains all the information about the browser that your users using. 

You can do the following javascript code to get the navigator platform.

<script type="text/javascript">

   var browser_platform = navigator.platform; 

   if(browser_platform == "iPhone"){
     //code for your iphone users 
  }
 
</script>

The navigator.platform will return for which platform the browser is compiled. Ex: (iPhone, iPad, Android)


Other properties of Navigator object are: 

a.  appCodeName  -  return the code name of the browser.
b. appName - name of the browser
c. appVersion - return the version information of the browser.
d. cookieEnabled  - check if cookies are enable in your browser
e. userAgent   - return the user-agent header sent by the browser.

Hope you find it useful. 

Detecting IE Browser and It's version

jQuery approach $.browser.msie is the best way to detect if you are viewing in an Internet Explorer browser. In addition, you can also add another jQuery code to detect the version of the IE browser - $.browser.version. Detecting browser is important since there are some jQuery and other framework code that are not working proper in different browsers. In this manner, you can make conditional code depending on the user’s browser.

Using jQuery :

<script>
   // less than IE 8 
  if ($.browser.msie && $.browser.version.substr(0,1)<8) {
     //your code here 
   }
  // less than IE 7 
  if ($.browser.msie && $.browser.version.substr(0,1)<7) {
     //your code here 
  }
</script>

NOTE: Don't forget to Add jQuery library.

Using conditional comment:

<!--[if lte IE 6]>
<script type="text/javascript">
  var isRunningIE6OrBelow = true;
</script>
<![endif]-->

Javascript: Get Query String Function

In order to get the query string in the URL, we need to split the URL using split method. We can simply get it by using the following code:

http://www.sample.com?test=value 
<script>
var  queryString = window.location.search.substring(1); 
alert(queryString);  //output test=value 
</script>

In the above code, we split the URL using window.location.search.substring(1); code and pass the value on the queryString variable. Then, alert it. Take note that (1) is referring to the part of url after the question mark. So in other words if we put (0) on the parameter, what we got is the "http://www.sample.com".
If you want to chunk the query string by each variable and value, this function might help you.

<script type="text/javascript">
<!--

function getQueryString(sVar) {
urlStr = window.location.search.substring(1);
sv = urlStr.split("&");
for (i=0;i< sv.length;i++) {
ft = sv [i].split("=");
if (ft[0] == sVar) {
return ft[1];
}
}
}

var splitStr = getQueryString ("fieldName");

alert(splitStr);

-->
</script>

Back to previous link

All browsers that I know have the capability to take the visitors to be taken back to the previous page they went on (the back button).

But what if you want to include this functionality in your HTML content? Such as when you were dealing with multi tips, step by step procedures and instruction or an image slide show.

Add this javascript code to your anchor tag : "javascript:history.go(-1)" .
Example:

<a href="javascript: history.go(-1)"<Back</a>

The code denotes that it will go back -1 page. You can change the number to any page history like -2 and so on.

How to autosum text boxes

 In my last post I tried to make little fancy style background of my html file. Now let me give you another simple script on how to create Auto Sum functionality in textbox using a JavaScript function.

What is a JavaScript function?
Courtesy of http://www.w3schools.com

The best Javascript Framework?

 Here are some list of JavaScript Framework in the internet. What is your bet to be on TOP?

 1.Moo Tools - is an free Javascript framework that evolved from the simple function called moo.fx. The developers of moo.fx have slowly expanded this simple function into a fully functional framework.Moo Tools is known for the elegance style and effect in handling dynamic function in the web.
 
download:  Moo Tools
Sample demo: http://demos.mootools.net/

2. JQuery - is a JavaScript Library Framework, that simplifies the HTML document traversing, event handling, animating, and more . It allow web developer to  get more interaction to their sites . JQuery is used to add behavior to a web page.

download: jQuery
demo:http://jqueryui.com/





 3. Prototype - according to www.ostatic.com The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utilities. Prototype provides various functions for developing JavaScript applications. The features range from programming shortcuts to major functions for dealing with XMLHttpRequest. Prototype also provides library functions to support classes and class-based objects, something the JavaScript language does not have.
download: Prototype
API:http://www.prototypejs.org/api



4.Dojo Toolkit - according to the dojo toolkit site, Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the toolkit experienced developers turn to for building great web experiences.



download: Dojo Toolkit
demo : http://www.dojotoolkit.org/demos/


5.  script.aculo.us - according to http://script.aculo.us/  script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.


download:script.aculo.us
demo: http://ndpsoftware.com/ScriptaculousEffectsDemo.php