JQuery

Posts marked with "JQuery" in categories

How To Change The Browser URL Without Refreshing Page – HTML5

October 8, 2013 HTML5, JavaScript, JQuery

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.

Download Demo

Here is a small example of the usage of window.history.replaceState :

... [READ MORE]

Create Your Own URL Shortening Service Using PHP & jQuery

September 27, 2013 HTML, JavaScript, JQuery, PHP, RegEx

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

September 25, 2013 AJAX, JavaScript, JQuery, 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.

Download Demo

A Sample of uploading image using AJAX in jQuery is shown below :

<div>
  Now Let&#8217;s start on the code. Here is the <b>HTML</b> page :
</div>

<div>
  <pre class="prettyprint"><code>&lt;!DOCTYPE html&gt;

<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”/> Message : <div id=“onsuccessmsg” style=“border:5px solid #CCC;padding:15px;"></div> </form> </body> </html>

... [READ MORE]

Scroll Horizontally Without Scrollbar Using jQuery

July 15, 2013 JQuery

To scroll horizontally with CSS is very annoying, because the whole page will move vertically and sometimes the Y axis will scroll. So I decided to use jQuery and it’s very simple. Only 237 characters which is only 2 lines. Here is the **jQuery **code with the div id #scrollho.

jQuery

$('#scrollho').on('mousewheel',function(e){
 e.preventDefault();
 scrollLeft=$('#scrollho').scrollLeft();
 if(e.originalEvent.wheelDeltaY.toString().slice(0,1)=='-'){
  $('#scrollho').scrollLeft(scrollLeft+100);
 }else{
  $('#scrollho').scrollLeft(scrollLeft-100);
 }
});

CSS

#scrollho{
 overflow:hidden;
}

Explanation

The #scrollho div’s scrollbars are hidden with CSS. When a mousewheel event occurs on #scrollho the default event is neutralized and the div is scrolled horizontally to the direction of the mousewheel using e.originalEvent.wheelDeltaY. **e.originalEvent.wheelDeltaY **is converted into string as to do the slice function to check whether the number is negative or not.

... [READ MORE]

How to check if the mouse is over an element in jQuery?

April 28, 2013 JavaScript, JQuery

Here is a simple plugin to check if the mouse is over an element in JQuery. Open your jQuery source file and search for window.jQuery = window.$ = jQuery;

Paste the code shown below after the code you have just found.

$.mlp ={x:0,y:0};function documentHandler(){var $current =this=== document ? $(this): $(this).contents(); $current.mousemove(function(e){jQuery.mlp ={x:e.pageX,y:e.pageY}}); $current.find("iframe").load(documentHandler);}$(documentHandler); $.fn.ismouseover =function(overThis){var result =false;this.eq(0).each(function(){var $current = $(this).is("iframe")? $(this).contents().find("body"): $(this);var offset = $current.offset(); result result = offset.left<=$.mlp.x && offset.left + $current.outerWidth()> $.mlp.x && offset.top<=$.mlp.y && offset.top + $current.outerHeight()> $.mlp.y;});return result;};
... [READ MORE]

jQuery .live function removed in V 1.9. What is the best replacement for .live function ?

April 16, 2013 JavaScript, JQuery

As of jQuery version 1.9, the .live function has been removed which means it is no longer available to use. Instead of this function you can use .on function which also has the same function as .live.

Both of them attach an event handler for all elements which match the current selector, now and in the future.
Since .live has been removed you can use .on function. Here’s how we should do it.
Replace .live function with .on. It’s that simple.
Example:

... [READ MORE]

Jquery ExtAjax Plugin V 1.2: Submit forms to external files with preview using Jquery

January 10, 2013 JavaScript, JQuery

If you don’t know what this plugin will do then visit the page of the previous version here.
The last version of Jquery ExtAjax plugin didn’t have preview feature. But in this version it have a preview feature.
The latest version is V 1.2

What’s New in this version

Faster
Preview feature.

What should I do after downloading.

<div>
  <span style="color: #333333;"><span style="line-height: 16px;">After downloading upload "<b>extajax.js</b>", "<b>asdva.php</b>" to your server.</span></span>
</div>

<div>
  <span style="color: #333333;"><span style="line-height: 16px;">Before you do this configure the place in <b>JS</b>&nbsp;file&nbsp;where <b>asdva.php</b>&nbsp;is located.</span></span>
</div>

<h4 style="text-align: left;">
  <span style="color: #333333;"><span style="line-height: 16px;">&nbsp;<b>How can I configure ?</b></span></span>
</h4>

<div>
  <span style="color: #333333;"><span style="line-height: 16px;"><b>&nbsp;</b>Go to <b>extajax.js</b>&nbsp;file. Search for&nbsp;<b>var asdvafile&nbsp;</b>. Enter the location of the <b>asdva.php </b>if the file is not in the same folderas <b>extajax.js</b>.</span></span>
</div>

<div>
  <span style="color: #333333;"><span style="line-height: 16px;"><a name='more'></a><br /></span></span>
</div>

<p>
  <span style="color: #333333; font-family: inherit;"><span style="line-height: 16px;">Jquery Code :</span></span>
</p>

<blockquote class="tr_bq">
  <p>
    <span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;"><script></span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;"><br /></span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">$("</span><span style="background-color: white; color: red; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">#form</span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">").submit(function(){</span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">event.preventDefault();</span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">$("</span><span style="background-color: white; color: red; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">#form</span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">").extajax({target:"</span><span style="background-color: white; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;"><span style="color: red;">#preview</span></span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;">"});</span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;"><br />});</span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;"><br /></span><span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;"></script></span>
  </p>
</blockquote>

<p>
  <span style="background-color: white; color: #333333; font-family: Courier, monospace, 'Courier New'; font-size: 13px; font-weight: bold; line-height: 16px;"><br /></span><span style="font-size: large;"><span style="border: 2px solid black;"><span style="color: white;"><span style="background-color: #6aa84f;"><a href="http://subins.tk/labs/extajax/index.html" >View Demo</a></span></span></span>&nbsp; &nbsp; &nbsp; &nbsp;<span style="background-color: #6aa84f; border: 2px solid black;"><span style="color: white;"><a href="https://drive.google.com/uc?export=download&id=0B2VjYaTkCpiQbTJtY1ZyNmFjZUk" >Download(ZIP)</a></span></span>&nbsp; &nbsp; &nbsp; &nbsp;<span style="background-color: #6aa84f; border: 2px solid black; color: white;"><a href="https://drive.google.com/uc?export=download&id=0B2VjYaTkCpiQcXRreFNxLXRCam8" >Download(Javascript file)</a></span></span></div> </div>

... [READ MORE]

How to alert user that he is the ___th visitor of blogger/blogspot blog?

November 22, 2012 Blogger, HTML, JavaScript, JQuery

If you ever visited my blog on the day it’s reaching a big view (24000 , 25000) you will get a javascript alert saying you are the 24000th visitor like this :

The above image shows that the blog alerted when the user was the 23000 visitor. It will also change the background to this. Want to have this feature on your blog ??? You are in the right place.

Requirements

One Stats Widget (Only one).

Add this code before if you haven’t yet added a script src of Jquery Library.

... [READ MORE]

Selecting a particular parent in Jquery

November 9, 2012 HTML, JavaScript, JQuery

If you want to select a particular parent div. Then you should use parents() function. If you use parent() function It won’t work. For Example:
index.html

This is the a tag!!

If you want to get the id of the main parent which is .main then you should use Jquery code like this:

$("#click").live(‘click’, function(){
alert($(this).parents(".main").attr(‘id’));
});

The code above will alert the id of the main parent. Try it out yourself.

... [READ MORE]

Adding Scroll To Top function in Blogger/Blogspot using Jquery

October 29, 2012 Blogger, HTML, JQuery

This Post will help you to add a Scroll To Top function in your Blogger Blog. Follow the steps given below.

<div style="text-align: center;">
  <span style="background-color: #93c47d; border-radius: 10px; font-family: inherit; font-size: x-large; padding: 8px 10px;"><a href="http://subin-demos.blogspot.com/#scrolltop" >DEMO</a></span>
</div>

1 – Go to Blogger -> Template -> Edit HTML
2 – Adding Codes.
Add this script before if you haven’t added a script src of Jquery Library.

... [READ MORE]

How To Change The Browser URL Without Refreshing Page – HTML5

Create Your Own URL Shortening Service Using PHP & jQuery

Uploading An Image Using AJAX In jQuery With PHP

Scroll Horizontally Without Scrollbar Using jQuery

jQuery

CSS

Explanation

How to check if the mouse is over an element in jQuery?

jQuery .live function removed in V 1.9. What is the best replacement for .live function ?

Jquery ExtAjax Plugin V 1.2: Submit forms to external files with preview using Jquery

What’s New in this version

What should I do after downloading.

How to alert user that he is the ___th visitor of blogger/blogspot blog?

Selecting a particular parent in Jquery

Adding Scroll To Top function in Blogger/Blogspot using Jquery

Follow/Subscribe

Subdomains

Past