Webby Tricks And Solutions: Single-Dimensional Arrays - JavaScript

Webby Tricks And Solutions: Single-Dimensional Arrays - JavaScript: Single-Dimensional Arrays Single-dimensional arrays are the simplest form of arrays. These types of arrays are used to store number of i...

Single-Dimensional Arrays - JavaScript

Single-Dimensional Arrays

Single-dimensional arrays are the simplest form of arrays. These types of arrays are used to store number of items of a predefined type. All items in a single dimension array are stored in a row starting from 0 to the size of array - 1 (array-1 is because array starts from 0).

for eg:
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

Also can be written as :
var mycars = ["Saab","Volvo","BMW"];

 The above code declares and initializes an array of 3 string items, like this we can create 'N' number of items.

To Read the Array

We use for loop to read the array,

for (var i=0 ; i< mycars.length ; i++)
{
   document.write (mycars[i]);
}

Explanation :
In For loop there are 3 statements 

Statement 1 :    var i=0
Statement 2 : i< mycars.length
Statement 3 :  i++

Statement 1 is executed before the loop (the code block) starts.
Statement 2 defines the condition for running the loop (upto array length).
Statement 3 is executed each time after the loop (the code block) has been executed.

and print the each time the value.

Output will be :
Saab
Volvo
BMW

Try It Your Self : http://www.w3schools.com/js/tryit.asp?filename=tryjs_array

Carosual Slider in Jquery

Hello Guys,
Here is the Plugin that i have modified for carousal Slider.

You can found the files at below location:

https://github.com/raghu556/jquery-slider.git

To View the Demo click the link below
http://www.responsivejqueryslider.com/charmingResponsive.html

Arrow key Demo in Jquery

Below is the HTML Structure of the Demo.

For Arrow Key Up , keycode is 38 and Arrow Key Down , keycode is 40.

By using this on keydown, we will check the pressed key keycode is from the above code, 

if yes, then do the something.. In our case, we want to select the list values.. technically we need to add bgcolor to list value..

Check Here for the code

Check whether the file is image and less then 50kb in Jquery

File uploading is a very common feature and It is always a good thing to know that what size of file is end user is uploading at the server. As it is quite possible that you don't want to allow users to upload huge files. So it is better to check the size of file before it actually gets uploaded on server. So in this post, I will show you that how to check file size before uploading using jQuery.

Click here to see the working Demo

HTML structure
We will take an file input with flUpload as id.



Javascript code:

$(document).ready(function() {
   $("#flUpload").change(function ()
   {
    
     var iSize = 0;
     var filename = "";

     if($.browser.msie)
     { 

        /*If browser is IE*/      
        var objFSO = new ActiveXObject("Scripting.FileSystemObject");
        var sPath = $("#flUpload")[0].value;
        var objFile = objFSO.getFile(sPath);
        var iSize = objFile.size;
        filename = objFile.name;
        iSize = iSize/ 1024;
     }
     else{
        iSize = ($("#flUpload")[0].files[0].size / 1024);    
        filename = $("#flUpload")[0].files[0].name;
     }   
   
     var ext = (" " + filename + " ").match(/([^\s]+(?=\.(jpg|gif|png))\.\2)/gm);   
     var ext = 1
     if(ext)
     {
        iSize = (Math.round(iSize * 100) / 100);   
        $("#lblSize").html("");
        if (iSize > 50)
        {
            alert("Please select the file less then 50kb");
        }
        else
        {
            $("#lblSize").html( iSize  + "kb");
        }
     }
    else{
        alert("Please select the proper image File");
    }   
  });
});

HTML5 and CSS3 - Part 5

HTML video tag
Can be used to create custom start/stop buttons etc..



HTML5 embed tag
The embed tag defines a container for an external application or interactive content (a plug-in).









HTML5 source tag
The source tag is used to specify multiple media resources for media elements, such as video and audio.

The source tag allows you to specify alternative video/audio files which the browser may choose from, based on its media type or codec support.

HTML5 track tag

The track tag specifies text tracks for media elements ( audio and video).

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.