The default select elements looks ugly and if you want to create beautiful sites, its better to not use select element. But what if you really want to use select element ? The only way to accomplish this is to create a dynamic select box which functions just like the HTML select element. In this post I’m going to show you the way to create a fake select box that will open when clicked and when the user selects an option, the select box will automatically close.
... [READ MORE]Posts marked with "JavaScript" in categories
How To Add Back jQuery .live() & .die() Function
As you may know, jQuery removed .live() function and instead they told to use .on() function. But I didn’t like this because .on() needs up more parameters than .live() and to handle a click function you have to add an event to the document, instead of the element. A normal live click event code is like this
$("#element").live("click",function(){
dosomething();
});When using .on() to do the same task, the code will be like this :
... [READ MORE]Executing JavaScript Code In AJAX Response
This is the first post I am creating related to the Open project. This trick is used for posting posts and making that post appear at the first of the post feed. This tutorial will guide you on how to execute JavaScript code which is in the response of AJAX call. We are going to use **jQuery **for both AJAX handling.
This is the AJAX response :
<script>alert("Hello Subin");</script>With a plain AJAX response, the code won’t execute. Even If you append the HTML code in AJAX response to the DOM, it won’t execute. To make it execute, you should use eval function. Some say eval is evil, but there is no other way for this purpose.
... [READ MORE]How To Check If Internet Connection Exists In jQuery & Javascript
If you are running an app on the web that requires Internet Connection all the time, sometimes the internet connection will fail on the client side and your app won’t properly work. The best example is the New Tab Chrome Apps that will display the URL icons grayscale when offline and will make the icons back to color when online. To check whether the client’s internet connection is online, we use jQuery. You can also use Javascript to check. I will tell you how to do the checking in both jQuery and Javascript.
The checking is simple. We will send a request to one of the site’s image. If the request was successful, the Internet Connection is active and if it’s not successful, there isn’t any active Internet Connection. It’s as simple as that. The following modal will make you understand the concept easily :... [READ MORE]
The checking is simple. We will send a request to one of the site’s image. If the request was successful, the Internet Connection is active and if it’s not successful, there isn’t any active Internet Connection. It’s as simple as that. The following modal will make you understand the concept easily :... [READ MORE]
How To Add A Simple Birthday Field In A Form Using jQuery
There are certain laws on the Web. One of them is the COPPA law which clarifies the minimum age of a user to signup for a site. The minimum age is 13. If any site allows users under 13 to signup, it is considered illegal. So it’s necessary to add a birthday field in site’s Sign-Up form. So I’m going to tell you how to add a simple, stylish birthday field to your Sign-Up form.... [READ MORE]
How To Create A Simple Password Strength Checker In jQuery
A lot of new hacking methods are coming day by day. So it’s the programmers duty to make their user’s password secure. Here is a simple Password Strength Checker created using jQuery. The code contain a function got from WordPress (I modified it) which is the core component of the checker. This checker will check the following on the password :
- Have minimum value of 4 characters.
- Whether the username matches with password
- Whether the password contain small a-z characters and capital A-Z characters.
- Whether the password has numeric characters and special characters.
If all of the above criteria is matched, the checker will give a Strong Password message.
... [READ MORE]How To Create A HTML, CSS, JS Code Editor Using jQuery
There are a lot of HTML editing services in the Web. Some of the popular services are JsFiddle and JsBin. These sites offer saving function to your account too. If you want to create a site like JSFiddle, then you are at the right place. I’m going to tell you how to create a basic HTML editing software using jQuery.
The editor we’re going to create also has a live preview service which means that the user don’t have to submit the code form every time. The preview is automatically updated using jQuery‘s keyup trigger except for **JS **code update, because Javascript can’t be added every time when user types something because there will be syntax errors.
... [READ MORE]How To Change The Browser URL Without Refreshing Page – HTML5
This post was suggested by Sumit Kumar Pradhan. I recently saw many questions like this on Stack Overflow. Let me start explaining, there is already a function in JavaScript to do this special task. The function is window.history.replaceState. It’s a simple function that needs 3 values.
This is actually a HTML5 function that came out on July 2012 (I think). All the latest browsers support the new function except IE 9.
This is actually a HTML5 function that came out on July 2012 (I think). All the latest browsers support the new function except IE 9.
Here is a small example of the usage of window.history.replaceState :
... [READ MORE]Create Your Own URL Shortening Service Using PHP & jQuery
I made a URL shortening service a year back using PHP & jQuery. It was pretty simple. You should know the concept of URL Shortening. The concept is simple. When a user sends a request to short a URL, PHP will check if the URL is valid. If it’s valid then PHP will make a string of 5 or 6 characters. A folder is created with the name of this string and an index.php file with header function code is created in this folder. This will make the folder redirect to the URL the user requested. Since it’s a folder no extensions will be seen ! So You can make up some pretty good URL‘s.... [READ MORE]
Uploading An Image Using AJAX In jQuery With PHP
As you know AJAX is the method of sending data without refreshing the page. Now I’m going to tell you how to upload images using AJAX in jQuery. For This You need to Download the jquery.form plugin from here. The Minimum requirement for this plugin is jQuery version 1.5 or later.
... [READ MORE]
A Sample of uploading image using AJAX in jQuery is shown below :
<div>
Now Let’s start on the code. Here is the <b>HTML</b> page :
</div>
<div>
<pre class="prettyprint"><code><!DOCTYPE html>
<html> <head> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src=“http://malsup.github.io/jquery.form.js"></script> </head> <body> <form action=“upload.php” method=“POST” id=“uploadform”> <input type=“file” name=“file”/> <input type=“submit” value=“Upload”/><br/><br/> Message : <div id=“onsuccessmsg” style=“border:5px solid #CCC;padding:15px;"></div> </form> </body> </html>