Category : jQuery


Display preview selected image in input type file using JQuery

Sometimes we need to show preview of image before image upload. I mean when user will select new image from input="file" then it will display preview of image. In this example you can see before upload it will display preview using jquery. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Change image on select new image from file input</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> </head> <body> <br/> <input type="file" name="file" id="profile-im.....

By Hardik Savani | May 16, 2016 | | 2335 Viewer | Category : jQuery
READ MORE

Dynamic Autocomplete search using Bootstrap Typeahead JS Example

In this post i am going to show you how to add dynamically Autocomplete using typeahead dynamic. In this post i give you full example that way you can run this example easily in your project. after run this example you can see output like bellow preview. <img width="100%" style="border:2px solid red" src="/upload/Bootstrap-Typeahead-with-Ajax-Example.png"> First we will create ajax.html file for html layout in this file i added jquery and Bootstrap Typeahead code. When you write on input box then you can find Dynamic Autocomplete search using ajax requiest. So, first create aja.html file an.....

By Hardik Savani | May 13, 2016 | | 8543 Viewer | Category : jQuery
READ MORE

How to add jquery modal popup in PHP?

This example is make using jquery-ui.js library. We may always need to jquery dialog box in our project because modal is very interesting and specially for GUI. Always we like to use modal for creating data or editing data and also for conformation. So if you think how to set modal in my project then it is very easy you have to just copy bellow example and run in your local you will find result. jquery ui In this example i provide jquery modal example with code so it pretty simple to use. <strong>Example:</strong> <pre class="prettyprint lang-php"> <html lang="en"> <head> <t.....

By Hardik Savani | May 7, 2016 | | 1007 Viewer | Category : jQuery
READ MORE

How to set bootstrap timepicker using datetimepicker library example code

In this example i give you how to add timepicker in your php application or html etc. this is full example if you just copy and past bellow code then you can find timepicker. you no need to install anything. I use datetimepicker library for timepicker that way you can also set datepicker too. bootstrap datetimepicker is very popular library. So if you also want to build date and timepicker both then also you can set you can see bellow example. I set format "HH:mm:ss" but you can also add your custom format like "HH:mm" etc as you want but try this.... <strong>Example:</strong> <pre class="pre.....

By Hardik Savani | May 3, 2016 | | 2487 Viewer | Category : jQuery
READ MORE

JQuery - Delete confirm modal using bootbox example

We always need ask confirmation for remove items. I mean we always ask before deleting items. So if you need to ask confirm before do something like delete, change status, change value etc as you require. If you want to do with better layout then you have to chooes bootbox.js and if you already use bootstrap then it's very better so, let's see bellow example and use it. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Delete confirm modal using bootbox example</title> <link href="https://maxcdn.bootstrapcdn.com/bo.....

By Hardik Savani | April 28, 2016 | | 2725 Viewer | Category : jQuery
READ MORE

How to use collapse example in Bootstrap?

Sometimes to require collapse for display large text with title.Always we like to use collapse for data content. So if you think how to use collapse in my project then it is very easy you have to just copy bellow example and run in your local you will find result. In this example i provide bootstrap collapse example with code so it pretty simple to use. <strong>Example:</strong> <pre class="prettyprint lang-php"> <html lang="en"> <head> <title>Bootstrap collapse example</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" .....

By Hardik Savani | April 27, 2016 | | 684 Viewer | Category : jQuery
READ MORE

How to add dialog box in bootstrap?

We always need to dialog box in our project because modal is very interesting and specially for GUI. Always we like to use modal for creating data or editing data and also for conformation. So if you think how to set modal in my project then it is very easy you have to just copy bellow example and run in your local you will find result. In this example i provide bootstrap modal example with code so it pretty simple to use. <strong>Example:</strong> <pre class="prettyprint lang-php"> <html lang="en"> <head> <title>Bootstrap modal popup example</title> <link hre.....

By Hardik Savani | April 27, 2016 | | 871 Viewer | Category : jQuery
READ MORE

Fadein Fadeout example in Jquery

fadein and fadeout is very interesting concept in jquery. fadein and fadeout method through you do hide show without add stylesheet like display none or something. In this example i didn't explain more but i add example for both fadein and fadeout in js. This example is very simple to undestand how to after this you can easily use with image too. So let's see bellow example and use that way: <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Fade In Fade Out Example</title> <script src="http://cdnjs.cloudflare.com/ajax/libs.....

By Hardik Savani | April 20, 2016 | | 662 Viewer | Category : jQuery
READ MORE

How to get first element of array in Javascript?

Whenever you require to get first element value then you can use bellow example. I give you the way to get first element value in jquery. So let's see following example: <strong>Example</strong> <pre class="prettyprint lang-js"> <script type="text/javascript"> <br/> var languages = ["PHP", ".Net", "Java", "Javascript"]; <br/> var first_element = languages[0]; console.log(first_element); <br/> </script> </pre>

By Hardik Savani | April 18, 2016 | | 554 Viewer | Category : jQuery
READ MORE

How to get last element of array in Javascript?

Whenever you require to get last element value then you can use bellow example. I give you three way to get last element value in jquery. So let's see following example: <strong>Example</strong> <pre class="prettyprint lang-js"> <script type="text/javascript"> <br/> var languages = ["PHP", ".Net", "Java", "Javascript"]; <br/> var last_element = languages[languages.length-1]; console.log(last_element); <br/> var last_element2 = languages.pop(); console.log(last_element2); <br/> var last_element3 = languages.slice(-1)[0]; console.log(last_element3);.....

By Hardik Savani | April 16, 2016 | | 827 Viewer | Category : jQuery
READ MORE

    Laravel 5 Autocomplete using Bootstrap Typeahead JS Example with Demo

    Laravel 5 Autocomplete using Bootstrap Typeahead JS Example with Demo

    Open Post

    Laravel 5 Google OAuth authentication using Socialite Package

    Laravel 5 Google OAuth authentication using Socialite Package

    Open Post

    Laravel 5.3 - whereDate(), whereMonth(), whereDay() and whereYear() examples.

    Laravel 5.3 - whereDate(), whereMonth(), whereDay() and whereYear() examples.

    Open Post

    How to send mail using mailable in laravel 5.3?

    How to send mail using mailable in laravel 5.3?

    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

    How to check current password using hash check in Laravel 5.3?

    How to check current password using hash check in Laravel 5.3?

    Open Post