Category : Javascript



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 | | 4308 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 | | 9170 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 | | 15590 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 | | 5293 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 | | 21046 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 | | 106805 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 | | 12496 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 | | 7065 Viewer | Category : Javascript
READ MORE

Ckeditor required field validation example in Jquery

we can add required field validation easily using jquery if we have textbox, textarea, select box etc, but if we used ckeditor then it's not simple. In this example i give you how to add Ckeditor required field validation in javascript. we can do it using CKEDITOR.instances, so if you also require then you can use it. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery - ckeditor required field validation</title> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> .....

By Hardik Savani | June 11, 2016 | | 14783 Viewer | Category : Javascript
READ MORE

Jquery notification popup box example using toastr JS plugin with demo

We always need to use notification in our project, because for example if user add new record and we need to display notification with success alert, when comes error then display error notication. So if you use jquery notification popup then it's better that way it's layout looks like good. In this example i use toastr.js plugin that provide several notification type like warning, success, info, error etc and several function. toastr Jquery plugin you can use easily with bootstrap and very customize. You can run bellow example and you can see how it works and pretty good. <strong>Example:</.....

By Hardik Savani | June 10, 2016 | | 48377 Viewer | Category : Javascript
READ MORE

    How to get keys name from array using array helper in PHP Laravel ?

    How to get keys name from array using array helper in PHP Laravel ?

    Open Post

    Full Text Search in Laravel 5 Example

    Full Text Search in Laravel 5 Example

    Open Post

    How to get location information from ip address in Laravel ?

    How to get location information from ip address in Laravel ?

    Open Post

    Laravel 5 - Multiple Images Uploading using dropzone.js example with demo

    Laravel 5 - Multiple Images Uploading using dropzone.js example with demo

    Open Post

    Laravel 5 - Image Gallery CRUD example from scratch

    Laravel 5 - Image Gallery CRUD example from scratch

    Open Post

    Bootstrap progress bar animate example using bootstrap-progressbar.js

    Bootstrap progress bar animate example using bootstrap-progressbar.js

    Open Post