Demo Post


Twitter Bootstrap - Digital Clock picker with AM PM example using clockface plugin

Today, I am going to share with you how to implement bootstrap digital timepicker with am pm using clockface plugin. We generally require to use timepicker when we work on large application or product base application for storing time. There are several plugin for timepicker in jquery, but if you are using bootstrap and you require digital clock time picker then you have to choose clockface.js plugin. clockface plugin through we can get digital clock picker with best layout. We can also customize timepicker like we can add am pm, without ap pm etc. So, i think it is better if we choose cloc.....

By Hardik Savani | October 25, 2016 | | 4017 Viewer | Category : Bootstrap HTML jQuery
READ MORE

Bootstrap multiselect dropdown in popup using popupMultiSelect plugin

In this example, i will share with you example of multiselect listbox in popup using popupMultiSelect.js plugin. popupMultiSelect plugin you can simply use in your php, laravel, codeigniter, angularjs projects. We may sometime require to make multiple select on select box. You can simply use select box with multiple attribute. But if you are using Bootstrap then you can make it pretty good layout. Yes in this example we will use popupMultiSelect plugin for multiselect dropdown box. popupMultiSelect plugin provide us when you click on select box it will open popup and display all options there.....

By Hardik Savani | May 21, 2017 | | 3885 Viewer | Category : Javascript Bootstrap HTML jQuery
READ MORE

AngularJS - sorting(using orderby filter) table data example with demo

Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data. In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example. <strong>Example</strong> <pre class="prettyprint lang-html"> <html lang="en-US"> <link rel="stylesheet" href="htt.....

By Hardik Savani | June 27, 2016 | | 3862 Viewer | Category : AngularJS
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 | | 3858 Viewer | Category : Javascript Bootstrap jQuery
READ MORE

Bootstrap - maxlength validation with count remaining character example

Today, i am going to give you example of How to display remaining textarea or input characters using bootstrap plugin. Bootstrap provide several types of plugin for input, label, textarea, select box etc and also for validation. So for maxlength validation, Bootstrap provide really amazing plugin "bootstrap-maxlength.min.js". maxlength.js through we can count remaining characters of input box. We can also change color of background and also change text message of remaining characters. I had added very simple example to use that plugin so you can check also demo and also run bellow file. S.....

By Hardik Savani | October 11, 2016 | | 3805 Viewer | Category : Javascript Bootstrap jQuery
READ MORE

Jquery highlight search text in div using highlight JS with example

If you want to highlight search text in your page using jquery then you have to choose highlight JS Jquery plugin. highlight JS Plugin is very simple to use and more simple. In this example i give you example using highlight JS. So, you can also check preview you can see after run bellow example. <strong>Preview:</strong> <img width="100%" style="border:1px solid black" src="/upload/Jquery-highlight-search.png"> In this example you have to just copy code and paste in your index.html file and run that file. After run this file you will found like above preview. <strong>index.html</strong> <pre.....

By Hardik Savani | June 4, 2016 | | 3381 Viewer | Category : Javascript Bootstrap HTML jQuery
READ MORE

How to disable right click on div using context menu jquery?

Today, i am going to tell you how to disable mouse right click on div. this example thought you can learn how to disable right click on page or image or any html tag. jquery provide contextmenu event that way we can prevent right click on specific html element. In this example i used contextmenu event with on(). So, let's see example code and check demo. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery - disable right click on div using context menu </title> <script src="http://demo.itsolutionstuff.com/plugin/.....

By Hardik Savani | August 8, 2016 | | 3298 Viewer | Category : Javascript jQuery
READ MORE

Jquery - How to copy text to clipboard without flash example ?

We sometimes require to give function of copy some text by clicking on button or any link. There are several library can do copy text using flash player, but in this example i will do it without using flash player. In this example we will use clipboard.js Jquery Plugin for copy to clipboard. clipboard js provide us to simply copy to clipboard, you can simply do alert or message for after success coped. You can simply use by as written following code. <strong>Code:</strong> <pre class="prettyprint lang-php"> var clipboard = new Clipboard('.btn'); <br> clipboard.on('success', function(e) { .....

By Hardik Savani | January 3, 2017 | | 3208 Viewer | Category : Javascript Bootstrap jQuery
READ MORE

How to add tooltip Bootstrap?

Nowdays bootstrap is very famouse framework. If you are macking design using bootstrap then you can easily use tooltip with better design. If you think how to set right side tooltip, or how to set left side tooltip, or how to set top side tooltip and how to set bottom side tooltip then you can set easily. In following example you can i add top side tooltip of button. Mostly we require to add tooltip on icon and button so let's see and if you require to your prject then implement. <strong>Example:</strong> <pre class="prettyprint lang-php"> <button class="btn btn-success" rel="tooltip" title.....

By Hardik Savani | April 26, 2016 | | 3181 Viewer | Category : Bootstrap
READ MORE

How to integrate google map using gmaps.js in php example?

Today, i am going to show you how to create simple google map in PHP. In this example i use gmaps.js plugin for integrate google map with marker of your location. You can simply generate google map in your any php framework like laravel framework, codeigniter framework, zend framework, cakephp framework etc. Gmaps.js plugin provide us map events, markers, Geolocation, Geolocation etc. you can use very simply and use your project. Bellow example you can see i added one marker on my location and also setted title, so you can also see demo and preview after bellow example file. <strong>Preview.....

By Hardik Savani | August 30, 2016 | | 3166 Viewer | Category : PHP Javascript HTML jQuery Google Map
READ MORE


    Laravel 5 - Ajax crop image before upload using using croppie plugin

    Laravel 5 - Ajax crop image before upload using using croppie plugin

    Open Post

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

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

    Open Post

    jQuery Ajax X-editable bootstrap plugin to update records in PHP Example

    jQuery Ajax X-editable bootstrap plugin to update records in PHP Example

    Open Post

    Jquery email autocomplete example with demo using jquery.email-autocomplete.min.js

    Jquery email autocomplete example with demo using jquery.email-autocomplete.min.js

    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

    PHP MySQL contact us form with validation using Bootstrap

    PHP MySQL contact us form with validation using Bootstrap

    Open Post