Category : HTML


Simple accordion example code with demo using jquery ui

Today, i am going to give you simple example code of accordion usign jquery ui. Sometimes we need to add quick without bootstrap and other jquery plugin. So, you can learn how to add simple jquery accordion in your php or other framework project. Here is a simple four section with it's content so you can understand simply. So, let's see bellow example for jquery accordion. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery accordion examples demo</title> <script src="http://demo.itsolutionstuff.com/plugin/jquery.....

By Hardik Savani | August 10, 2016 | | 2124 Viewer | Category : HTML
READ MORE

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 | | 1547 Viewer | Category : HTML
READ MORE

Bootstrap Color Picker Example using mjolnic colorpicker plugin

In this post i give you example of how to set simple Bootstrap color picker using mjolnic plugin. We don't use often color picker but maybe we require sometimes. So, if you used bootstrap then you have to choose Bootstrap color picker for select color. mjolnic Bootstrap colorpicker provide several way to use like we can get color code when select color in hex code and also it provide user friendly layout that way it's pretty good. So, let's run bellow example or you can check demo. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <br/> <head> <br/> .....

By Hardik Savani | July 13, 2016 | | 3519 Viewer | Category : HTML
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 | | 1740 Viewer | Category : HTML
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 | | 9259 Viewer | Category : HTML
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 | | 47189 Viewer | Category : HTML
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 | | 2821 Viewer | Category : HTML
READ MORE

Jquery - input tags plugin example using jquery.tagsinput.js plugin

If you require to add multiple tags from input then you can do it using XOXCO plugin. In this example you can do it quickly. jquery tagsinput will help to add multiple tags with good layout. After run bellow example you will found like preview. In this example i use cdn js path that way you don't require to download any js from internet. So you have to just copy this file and run in your sytem. it will words. <strong>Preview:</strong> <img class="img-responsive" style="border:2px solid" src="/upload/Jquery-input-tags-plugin.png"> <strong>Example:</strong> <pre class="prettyprint lang-html"> .....

By Hardik Savani | May 25, 2016 | | 3825 Viewer | Category : HTML
READ MORE

How to remove all whitespace from string in JQuery?

Sometimes we require to remove white space from given string. So at that time you can delete spaces from string using replace() of core php. replace() will help to replace your blank space or empty space or extra space or trailing space from string that way we can remove. you can do it from bellow example. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery - Remove white space from string</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> </head> <bod.....

By Hardik Savani | May 24, 2016 | | 2753 Viewer | Category : HTML
READ MORE

Select box with search option example in Jquery using Chosen Plugin

There are several plugins available in google like select2,selectbox etc, But i found Chosen Plugin for select box with search option. You can also use with bootstrap. I give you full example of select box with search option. After run this example you will find bellow preview. <strong>Preview:</strong> <img width="100%" src="/upload/select-box-with-search-option.png" style="border:2px solid red"> <strong>Example:</strong> <pre class="prettyprint lang-php"> <html lang="en"> <head> <title>Jquery Chosen - Select Box with Search Option</title> <link rel="styl.....

By Hardik Savani | May 18, 2016 | | 8940 Viewer | Category : HTML
READ MORE

    Laravel 5 - How to get difference of time in minutes?

    Laravel 5 - How to get difference of time in minutes?

    Open Post

    Laravel 5 database backup using Laravel Backup Package

    Laravel 5 database backup using Laravel Backup Package

    Open Post

    Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch

    Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch

    Open Post

    How to remove # from URL in AngularJS?

    How to remove # from URL in AngularJS?

    Open Post

    Laravel 5.3 - Form Input Validation rules example with demo

    Laravel 5.3 - Form Input Validation rules example with demo

    Open Post

    Jquery - input tags plugin example using jquery.tagsinput.js plugin

    Jquery - input tags plugin example using jquery.tagsinput.js plugin

    Open Post