Category : Javascript


Jquery tooltip example code with demo using Jquery UI

Jquery UI is a lots of collection of GUI widgets like datepicker, tab, timepicker, colorpicker etc. Jquery UI also provide tooltip GUI widget that way we can set text and display when hover on specific element. Jquery UI tooltip through we can set information about element like if we set delete button but when user will mouseover then display text like "You can remove from here". So in this simple html example through you understand how to set tooltip using jquery ui. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <br/> <title>Jque.....

By Hardik Savani | July 19, 2016 | | 886 Viewer | Category : Javascript
READ MORE

Jquery - Show hide password in Password textbox using checkbox.

In this post we can implement how to add hide show password when user input password at register time or login time. We sometimes require to do it because that use can determine password is right or wrong. In this example i use just jquery change event on checkbox, if check then user can see his entered password and change anything, so you can see preview and also check demo with code. <strong>Preview:</strong> <img src="/upload/jquery-show-password.png" style="width:100%;border:1px solid red" /> <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head&g.....

By Hardik Savani | July 11, 2016 | | 939 Viewer | Category : Javascript
READ MORE

Jquery - Display a loading gif image before a image loads using Eager ImageLoader plugin

Eager ImageLoader plugs give us lazy loading before image loads, in this example you can load your gif image that you want before main image load. In this example i use eager-image-loader plugin. As you can see bellow preview that before image load. so first you have to give path of gif image "./upload/loading.gif" instead of your gif image path. If you want to get this image then you can get from demo. <strong>Preview:</strong> <img src="/upload/image-upload.png" style="width:100%;border:2px solid red" /> <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en">.....

By Hardik Savani | July 8, 2016 | | 1467 Viewer | Category : Javascript
READ MORE

How to set multiple selected value in Chosen Jquery Plugin?

If you require to set selected value in Chosen Jquery Plugin then you can done using val() with trigger(). Some days ago, i had worked my php project i needed to set selected value wiht chosen and also multiple selected value both. After some try i found how to do with if set single selected value using val(). But i was confuse with dropdown multiple selected value, but at last i found how to give value, we have to just pass array in val(). As bellow i mention both way how could done. <strong>Set Single Value:</strong> <pre class="prettyprint lang-php"> var my_val = 3; <br/> $("#set-corsi")......

By Hardik Savani | July 1, 2016 | | 1626 Viewer | Category : Javascript
READ MORE

Jquery - Timepicker with AM PM Example code with demo using jQuery Timepicker Plugin

If you need to use am pm timepicker then you can choose jQuery Timepicker Plugin for getting timepicker. It's pretty simple to use as you can see bellow example. you can also you can set several options for timepicker, you can read more from here : <a href="http://timepicker.co/" target="_blank">timepicker.co</a>. So you have to just copy bellow code and run in your local system and check..... <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <br/> <title>Jquery - Timepicker Example using jQuery Timepicker Plugin</title> <.....

By Hardik Savani | June 24, 2016 | | 1630 Viewer | Category : Javascript
READ MORE

How to change view mode in bootstrap datepicker like yyyy-mm?

When i was working on my laravel application and i need use datepicker picker but i require only select year and month because i have to filter with onlt selected month and year. I did search lot and also check options of datepicker js but i can't do it that because i was wrong maybe. But at last found minViewMode option of datepicker library and i did that if you also want to make format like mm-yyyy or yyyy-mm then you can set minviewmode this way : <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Bootstrap - datepicker chang.....

By Hardik Savani | June 20, 2016 | | 1178 Viewer | Category : Javascript
READ MORE

Jquery Datepicker example code with demo using Jquery UI

Many times, we may require to use Datepicker in our project. Jquery ui provide Datepicker library that way we can use easily in our any project like php, .net , or any other php framework. In this example i use jquery datepicker in html file with full source code that way you could run own. So just copy bellow code and run in your local system. <strong>Example:</strong> <pre class="prettyprint lang-php"> <html lang="en"> <head> <title>Jquery - Datepicker Example using jquery ui</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js".....

By Hardik Savani | June 19, 2016 | | 1776 Viewer | Category : Javascript
READ MORE

Jquery - draggable sortable table rows example demo with bootstrap

If you need to drag and drop table rows in your project then you can do it easily using jquery ui. jquery ui provide sortable(), it helps to make sortable table each row and also we can perform ajax code etc in sortable function. We can generally use when we require to change order for our product table or etc. In this example you can learn how to drag and drop of your ravle tr using sortable() of jquery ui. I also use bootstrap that way layout become pretty. So you can see bellow example: <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> &l.....

By Hardik Savani | June 17, 2016 | | 8158 Viewer | Category : Javascript
READ MORE

How to check file size when select multiple file validation using Jquery?

Sometimes we require to add validation of max file size using jquery, If we have only single file for validation then we can do it easily that, but if we have multiple file then you have to calculate size of all selected files and then check max required file size. So, in this example you can see how to check validation for max size in multiple file select using jquery. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery - multiple image upload with size validation</title> <script src="http://ajax.googleapis.co.....

By Hardik Savani | June 15, 2016 | | 1239 Viewer | Category : Javascript
READ MORE

HTML tags are not allowed in textbox validation using Jquery

I have two example that prevent HTML tags are not allowed in textbox using focusout event of jquery. You can chose any if you think it is best for me. In the first example i use regular expression for prevent html tags in my textarea and in second example i user directly check with html tags. So you can check both and use <strong>Example 1:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery - HTML Tag are not allowed in textarea</title> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></scrip.....

By Hardik Savani | June 12, 2016 | | 1098 Viewer | Category : Javascript
READ MORE

    PHP - How to Convert file(image, audio, video) extension using CloudConvert API?

    PHP - How to Convert file(image, audio, video) extension using CloudConvert API?

    Open Post

    Laravel 5 - Dynamic Dependant Select Box using JQuery Ajax Example - Part 1

    Laravel 5 - Dynamic Dependant Select Box using JQuery Ajax Example - Part 1

    Open Post

    How to implement Email Verification with Activation Code example from Scratch in Laravel 5.2 ?

    How to implement Email Verification with Activation Code example from Scratch in Laravel 5.2 ?

    Open Post

    Laravel 5 - How to prevent browser back button after user logout?

    Laravel 5 - How to prevent browser back button after user logout?

    Open Post

    PHP Image upload without refreshing page using jquery example

    PHP Image upload without refreshing page using jquery example

    Open Post

    AngularJS - Display Default image if original image does not exists with example

    AngularJS - Display Default image if original image does not exists with example

    Open Post