jquery functions – Sibeesh Passion

Find Browser And Browser Version Using jQuery

SibeeshVenu — Wed, 21 Oct 2015 00:17:20 +0000

In this post we will see how we can find out the browser name and browser version by using jQuery. Here we will be using $.browser property og jQuery which returns the browser information. In this demo we will test this in most used browsers like Internet Explorer, Mozilla, Chrome, Opera. I hope you will like this.

NB: Using $.browser is not recommended by jQuery itself, so that this feature has been moved to the jQuery.migrate plugin which is available to download if the user want. It is a vulnerable practice to use the same. Use it only if needed. It is always better to do not use browser specific codes.

Using the code

First thing you need to do is create a page.

[html]

Find Browser In JQuery – Sibeesh Passion

Find Browser In JQuery – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

As you have noticed I have included http://code.jquery.com/jquery-migrate-1.2.1.js. It is just because this feature is deprecated and moved to this js.

Now you need to write the scripts.

[js]

[/js]

We are appending the browser details to the DOM. So that it is always better to use some CSS to improve the readability.

[css]

[/css]

Now please run your browser, you can see the following output.

Find Browser And Browser Version Using jQuery

Complete Code

[html]

Find Browser In JQuery – Sibeesh Passion

Find Browser In JQuery – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to find out the browser details in client side? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Overwrite CSS Styles Using addClass In JQuery

SibeeshVenu — Wed, 21 Oct 2015 00:06:18 +0000

In this post we will see how we can overwrite CSS styles using addClass method in jQuery. We have so many options to change the styles of a particular element. We can do it by editing the style sheet manually. But what if you want to do the same dynamically? If you need to change a CSS property dynamically, I suggest you to read it here: CSS Important . In this post we are applying more CSS rules to the same element. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

Recently I have got a requirement of changing a CSS property of an element which is common for element. So I wanted to change the CSS property only if my condition becomes true. In this situation I used jQuery addClass to do this requirement. Here I will show you how.

Using the code

First thing you need to do is create a page.

[html]

AddClass JQuery Demo – Sibeesh Passion

AddClass JQuery Demo – Sibeesh Passion

[/html]

Then you need to include the script needed.

[js]

[/js]

Now you need to write the scripts.

[js]

[/js]

We are adding a new CSS style second to a class first . We will add this after five seconds of document ready. So now we need to create the styles right?

[css]

[/css]

Now please run your browser, you can see the following output.

Overwrite CSS Styles Using addClass

Now after five seconds, the same element will look as follows.

Overwrite CSS Styles Using addClass

If you look at your browser console, you can see both of the styles are applied to the element.

Overwrite CSS Styles Using addClass

That’s all, now we can see the complete code here.

Here I am using setTimeout as my condition, you can use any condition according to your requirement.

Complete Code

[html]

AddClass JQuery Demo – Sibeesh Passion

AddClass JQuery Demo – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Get The Current URL in jQuery

SibeeshVenu — Mon, 12 Oct 2015 13:13:40 +0000

In this post we will see how we can get the current URL in jQuery

[js]

[/js]

Here window.location will return the current location/url of your browser.

Please see my other posts related to JQuery here: JQuery Posts

Kindest Regards
Sibeesh Venu

A Drag And Drop Game

SibeeshVenu — Thu, 20 Aug 2015 10:12:02 +0000

[toc]

Introduction

In this post, we will create a drag and drop game which uses jquery drag drop functions. We will create two boxes, from one box we need to drag the content box and drop the same into another box. We will be using sortable function and its events. I hope you will like this game.

Background

For the last Independence day for India, I though to create a game related to the word “INDIA”. I created and hosted it in my website.

Using the code

First we will create an html5 page as follows.

[html]

Find INDIA Game – Sibeesh Passion

[/html]

And now we will set style to the body. To set the background image fit to the screen we will use the following styles.

[css]
#body {
background: url(“http://sibeeshpassion.com/content/images/indian%20flag%20banner.jpg”) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
[/css]

Now we can see page as follows.

Make Image Fit To The Screen

Since we are going to create a client side game, it is necessary to load the jquery and jquery ui reference.

[js]

[/js]

Next we will create the drag able contents as follows.

[html]

[/html]

Now we need to set a div where we can drag contents to it.

[html]

[/html]

As it is a game, we must set the game rules also right?

[html]

Find “INDIA” Game Rules

You can drag and drop any boxes.

We have set each letters from “INDIA” in the boxes. It is hidden

The game is, you need to find out the letters of “INDIA” by drag and drop the boxes to nearest box

Let us play the game now…

[/html]

And we will set some styles to those elements.

[css]
.dropDiv {
border: 1px solid #ccc;
width: 25%;
height: auto;
padding: 10px;
display: inline;
position: absolute;
margin-left: 5px;
min-height: 265px;
}

.dragDiv {
border: 1px solid #ccc;
width: 27%;
height: auto;
padding: 10px;
float: left;
margin-left: 5px;
min-height: 265px;
}

#parent {
/*border: 1px solid #ccc;*/
height: 307px;
width: 70%;
padding: 20px;
}

.droppable {
width: 25px;
height: 28px;
padding: 5px;
background-color: green;
margin: 3px;
float: left;
cursor: move;
}

.Notdroppable {
width: 25px;
height: 28px;
padding: 5px;
background-color: red;
margin: 3px;
float: left;
}

#countdiv {
margin-top: 10px;
float: left;
}

#gamerules {
border: 1px solid #ccc;
width: 250px;
height: 280px;
padding: 5px;
float: right;
margin-left: 5px;
}

.caption {
list-style: none;
color: green;
padding: 5px;
font-weight: bold;
}
[/css]

So our page will look like as follows.

Drag And Drop Game

The next thing what we need to do is adding sortable functionality using jquery sortable to the div which has class as dropDiv.

[js]
$(“.dropDiv”).sortable({
connectWith: ‘.dropDiv’,
forcePlaceholderSize: true,
forceHelperSize: true,
opacity: 0.60,
placeholder: ‘placeholder’,
tolerance: ‘touch’,
scroll: false,
cancel: ‘.dropDiv’,
start: function (event, ui) {
},
stop: function (event, ui) {
},
update: function (event, ui) {
},
receive: function (event, ui) {
}
});
[/js]

Please be noted that we have given connectWith property as follows to make the drag able div to be dropped only in the div which has class as dropDiv.

[js]
connectWith: ‘.dropDiv’
[/js]

We have also set the property cancel as follows to make the dropped div not drag able from dropDiv.

[js]
cancel: ‘.dropDiv’,
[/js]

Next we will set draggable for our inner divs.

[js]
$(‘.Notdroppable,.droppable’).draggable({
connectToSortable: ‘.dropDiv’,
containment: “#dropDiv”,
helper: ‘clone’,
revert: ‘invalid’
});
[/js]

Game Insights

As you can see in the html of the our dragDiv, we have set an attribute myval for some of the div. So what we are going to do is when a user drags a div we will check whether that particular div has that attribute and if it has, user got one letter. In this way user needs to collect 5 letters from the dragDiv.

So in the stop function of sortable we will write some scripts as follows.

[js]
stop: function (event, ui) {
++count;
if (ui.item.attr(‘myval’)) {
$(‘#draggedContent’).show().append(ui.item.attr(‘myval’));
}
$(“.dragDiv div[myid=” + ui.item.attr(‘myid’) + “]”).remove();
var res = maxTrial – count;
if (res == 0) {
$(‘#countdiv’).show().html(‘Sorry, you have no more chances left!!!. Please refresh to start the game again’);
$(‘.dragDiv .droppable, .dragDiv .Notdroppable’).remove();
} else {
$(‘#countdiv’).show().html(‘You still have ‘ + res + ‘ tries’);
}
$(‘.dropDiv .droppable, .dropDiv .Notdroppable’).remove();
if ($(‘#draggedContent’).html().length == 5) {
alert(‘You have won the game!!!. Please collect the prize from somewhere ;)’);
$(‘#countdiv’).show().html(‘You have won the game!!!. Please collect the prize from somewhere ;)!. Please refresh to start the game again’);
$(‘.dragDiv .droppable, .dragDiv .Notdroppable’).remove();
}

}
[/js]

We are checking whether the inner div has a particular attribute as follows and once we find it, we are removing that from dragDiv.

[js]
if (ui.item.attr(‘myval’)) {
$(‘#draggedContent’).show().append(ui.item.attr(‘myval’));
}
$(“.dragDiv div[myid=” + ui.item.attr(‘myid’) + “]”).remove();
[/js]

If a user has already got those five letters, we must alert the user right? We will do this validation in stop function.

[js]
start: function (event, ui) {
if (count > maxTrial) {
$(‘#countdiv’).show().html(‘Sorry, you have no more chances left!!!. Please refresh to start the game again’);
} else {

}
}
[/js]

Drag And Drop Game

If there is no chances left, user will get a message as follows.

Drag And Drop Game

Now what we need to do next? Yes we need to shuffle div contents or elese user may find it easy when the tiles are in same order and in same place.

To shuffle the divs dynamically we will add some scripts as follows.

[js]
var parent = $(“#dragDivInner”);
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
[/js]

Next we will disable the right click and mouse events as follows.

[js]
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
$(document).on(“contextmenu”, function (e) {
return false;
});
[/js]

We will also disable the F12 key of keyboard.

[js]
document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
[/js]

As every game has some settings, we will also give some settings.

[html]

Select Game Level :

[/html]

And in the drop down option change we will decrease the maximum trials allowed.

[js]
$(“#selectGameLevel”).change(function (e) {
var selected = $(“#selectGameLevel option:selected”).val();
if (selected == “Easy”) {
maxTrial = 25;
} else if (selected == “Medium”) {
maxTrial = 15;
} else if (selected == “Hard”) {
maxTrial = 10;
}
});
[/js]

So our complete page will look like this.

Drag And Drop Game

Our complete code is as follows.

Complete Code

[html]

Find INDIA Game – Sibeesh Passion

Select Game Level :

Find “INDIA” Game Rules

You can drag and drop any boxes.

We have set each letters from “INDIA” in the boxes. It is hidden

The game is, you need to find out the letters of “INDIA” by drag and drop the boxes to nearest box

Let us play the game now…

[/html]

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Merge Multiple Arrays To One

SibeeshVenu — Tue, 18 Aug 2015 12:06:45 +0000

In this post we will discuss how we can merge multiple arrays to one array using JQuery. There are so many ways to achieve this. Like we can loop through each array and push it to other array one by one or we can join those arrays one by one. Or we can use JQuery function merge() . But requirement was bit different. Since I was using large data, I was not able to use any loop or any long processes. We will discuss an easy way here in this article. I hope you will like this.

Background

Recently I got a requirement of merging large collections of client side arrays to one array. The problem was the arrays were dynamic, hence I was not sure about the count of those arrays, it may be different in different times. So what to do? A loop, merge, push, join in jquery was not a perfect solution for me since the data was large. So I found the solution in other way.

Using the code

Consider we have some arrays as follows.

[js]
[21,2], [35,4], [25,6],[11,6],[44,67]
[/js]

Now we need to change these arrays to a variable.

[js]
var myArrays = [[21,2], [35,4], [25,6],[11,6],[44,67]];
[/js]

Now here comes the real part.

[js]
var myArray = [].concat.apply([], myArrays);
[/js]

We are using jquery concat and jquery apply() function.

Now we will write this array to console.

[js]
console.log(myArray);
[/js]

See the console, you can get the values as follows.

Merge Multiple Arrays To One

You can see the demo at jsfiddle here: Merge Multiple Arrays To One

Conclusion

I hope someone found it useful. Please share me your valuable suggestions and feedback. Thanks in advance.

Kindest Regards
Sibeesh Venu

Find And Exclude Element From Array

SibeeshVenu — Wed, 05 Aug 2015 00:50:47 +0000

In this post we well discuss about finding and excluding element from JQuery Array. We all worked in a JQuery. Sometimes we works in JQuery Arrays too. Right? Consider we have an array, and in that array we need to exclude a particular element and create a new array without excluded element. What we will do? We will use a for loop and just loop through the array,apply some conditions and if a criteria matches, we will do some operation right? Here I am going to share you an another way that we can achieve this by using a function called grep in JQuery. Normally grep function act as each in JQuery.

Backgroud

I am working in a client side application where there are lots of client side arrays and variables. We handle our entire client side processes by using JQuery. I usually go through the operation of finding and removing array elements using JQuery. I thought it would be better if I share some knowledge about that here. I hope someone will find it is useful.

Using the code

To start with you need to include jquery reference.

[js]

[/js]

Now we need an array right? Consider following is our array.

[js]
var myArray = [‘Monday’,’Tuesday’,’Wednesday’,’Thursday’,’Friday’,’Saturday’,’Sunday’]
[/js]

Next, we will formulate this array to a HTML table, so that the visualization will be perfect. To do this we will have a function, which will just convert the array element to HTML table. Following is our function body.

[js]
function buildTable(array,message){
var html='

’;
for(var i=0;i {
html+='’;
}
html+='

’+message+'
’+array[i]+'

’;
$("#body").html(html);
}
[/js]

As you can see, the parameters for this functions are, an array and a caption message.
Now we need to call this unction right?

[js]
var myArray = [‘Monday’,’Tuesday’,’Wednesday’,’Thursday’,’Friday’,’Saturday’,’Sunday’]
var message="My Array Elements Before Removing";
buildTable(myArray,message);
[/js]

Style out HTML table by giving the preceding styles.

[css]

[/css]

So our output will be as follows.

Now we need to fire a click event in which we will find out which element is to be excluded from the array, and finally assign new element set to our existing array.

[html]
Click To Remove
[/html]

[js]
$("#click").click(function(){
var message="My Array Elements After Removing";
var excludedElement = [‘Thursday’];
myArray = jQuery.grep(myArray, function(value) {
return value != excludedElement;
});
buildTable(myArray,message);
});
[/js]

Here we are finding the element ‘Thursday’ which we saved to a variable as follows.

[js]
var excludedElement = [‘Thursday’];
[/js]

Now our real here is jQuery.grep , which returns our new array with filtered data.

[js]
return value != excludedElement;
[/js]

And then we are calling our buildTable function to formulate our new array to a HTML table. Once we call it we will get an output as follows.

Complete Code

[html]

Remove Elements From An Array using JQuery- Sibeesh Passion

Click To Remove

[/html]

Demo

Please find out the demo in jsfiddle here: Exclude or remove elements

Conclusion

I hope you liked this article. Please share me your feedback. It is always welcomed. Thanks in advance.

Kindest Regards
Sibeesh Venu

Remove First Character From A String

SibeeshVenu — Wed, 22 Jul 2015 12:20:08 +0000

In this post, we will see how we can remove first character from a string in JQuery. I hope you will like it.

Consider I have a string like below.

[js]
var myString= "&2014";
[/js]

Now I need to remove & from my string and the output must be “2014”.

So we can do as follows.

[js]
var myString= "&2014";
myString=myString.substring(1);
[/js]

Now myString contains the value of “2014”.

Please see other code snippets here: http://sibeeshpassion.com/category/code-snippets/

Kindest Regards
Sibeesh Venu

Remove a DOM element using JQuery

SibeeshVenu — Wed, 01 Jul 2015 10:22:00 +0000

Introduction

Hi All, How are you today? In this article we will see how we can remove a DOM element using JQuery. I hope you will like it.

Background

Using the code

To start with, as you all know we need to load the JQuery reference.

[js]

[/js]

Once you load the reference you are ready to go.

Since this is a demo, we will explain with some steps. Sounds good?. So we will do the following tasks.

Add the elements to the DOM

Delete the DOM elements using .remove(), .get() functions

Shall we start then?

Add the elements to the DOM

We need to set our UI first right?

[html]

Remove a DOM element from the UI using JQuery- Sibeesh Passion

Generate 10 Elements

[/html]

Add CSS
[css]

[/css]

So we have set our UI, and now if you run your page you can see output as follows.

Now we will add the needful scripts.

[js]

[/js]

As you can see we are adding elements to the DOM with a loop. Once you run the page you can see the output as follows.

And once you click on “Delete 5 Elements” button, 5 DOM elements will be deleted.

The following code block describes how we can use .remove() function.

[js]
$(‘#body’).find(‘p’).get(i).remove();
[/js]

Complete Code

[html]

emove a DOM element from the UI usign JQuery- Sibeesh Passion

Remove a DOM element from the UI using JQuery- Sibeesh Passion

Generate 10 Elements

[/html]

Conclusion

I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!

Kindest Regards
Sibeesh Venu

Check whether an array contains a particular element

SibeeshVenu — Tue, 30 Jun 2015 06:23:21 +0000

Introduction

Hi All, How are you today? In this article we will see how we can check whether an array element is present in an array. We will be using JQuery to do this requirement. I hope you will like it.

Background

I know we all are working in the client side technologies, especially in JQuery. Sometimes we may need to write more client side codes rather than server side codes. In that case, you will be using client side arrays too. So if you use client side arrays,sometimes you may need to check the array contains a particular element or not.Then only you can do some codes according to that. Here I am going to give you a demo of how we can do this requirement.

Using the code

To start with, as you all know we need to load the JQuery reference.

[js]

[/js]

Once you load the reference you are ready to go.

Since this is a demo, we will explain with some steps. Sounds good?. So we will do the following tasks.

Add the elements to the array

Check the elements are added or not

Search an element

Shall we start then?

Add the elements to the array

We need to set our UI first right?

[html]

Check whether an array contains a particular element – Sibeesh Passion

	Add Me
Show Array Length	Array length is
	Search Me	The given text

[/html]

So we have set our UI, and now if you run your page you can see output as follows.

Now we will add the needful scripts.

[js]

[/js]

As you can see we are adding elements to the array, checking the array element in the first two click functions. But what about the third click function. Bingo! there we are using jQuery.inArray function to check our element is present in the array or not.

No we will learn little about the jQuery.inArray function.

jQuery.inArray

It is used for searching a specified value within an array

It returns -1 if it does not contain the searched value

It returns index of the searched value if it contains the value

The following code block describes how we can use jQuery.inArray

[js]
if (jQuery.inArray($("#searchText").val(), myArray) > -1)
$("#searchOutput").text("The given text " + $("#searchText").val() + " is available in the array");
else
$("#searchOutput").text("The given text " + $("#searchText").val() + " is not available in the array");

[/js]

Complete Code

[html]

Check whether an array contains a particular element – Sibeesh Passion

	Add Me
Show Array Length	Array length is
	Search Me	The given text

[/html]

Now we will run our page and see the output.

Output

That is all.

Conclusion

I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!

Kindest Regards
Sibeesh Venu