Category : HTML


How to create scroll to top of the page by jquery animate ?

However you want the scrolling process to have animated effect. you have to follow bellow example. in this post you can add button for scrolling top with animate effect. Most of website you can see with one button left side or right side for scrolling top of the page. so, if you want to create on your site then you have to add following jquery code: <strong class="example">Example</strong> <pre class="prettyprint lang-html lang-js"> <style type="text/css"> #toTopImg{ position: fixed; bottom: 20px; left: 20px; cursor: pointer; display: none; z-index.....

By Hardik Savani | March 26, 2016 | | 1118 Viewer | Category : HTML
READ MORE

How to add multiple markers in google map

In this post we have to learn hoe to add a multiple location marker in google map. add following code for add multiple location marker. <img width="100%" style="border:2px solid cadetblue" src="/upload/Google map.png"> <strong>Add Google map canvas HTML code</strong> <pre class="prettyprint lang-html"> <div id="map_wrapper"> <div id="map_canvas" class="mapping"></div> </div> </pre> <strong>Add Google map canvas CSS code</strong> <pre class="prettyprint lang-css"> #map_wrapper { height: 400px; } #map_canvas { width: 100%; height: 100%; } </pre> <st.....

By Hardik Savani | March 9, 2016 | | 3374 Viewer | Category : HTML
READ MORE

Multi select autocomplete jquery example with code

In this post i show you how to use autocomplete with multiple select option by jquery. I think you will did autocomplete for single option using jquery ui plugin. but in this post you can learn multi selection autocomplete using jquery ui. In bellow preview you can see how will output of your multiselect autocomplete because its like choose js or something like plugin. But for layout i just add my own css. this example i use jquery ui js file and one more multiselect js file that file through we can do multi select and one more thing you can also customization of autocomplete.multiselect.js fi.....

By Hardik Savani | March 8, 2016 | | 5934 Viewer | Category : HTML
READ MORE

How to use each loop with class element of html in Jquery?

Whenever you need to use each loop in jquery then you can follow this example code. each with html class you can get whole object of that class using $(this) jquery function. In following example you can see i get attribute data-id using $(this).data('id'), that means you can take current class data attribute value. <strong>Example:</strong> <pre class="code language-html"> <html lang="en"> <head> <title>Each Loop with Class Jquery</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> .....

By Hardik Savani | March 4, 2016 | | 616 Viewer | Category : HTML
READ MORE

How to scrolling table with fixed header in HTML?

Sometimes you require to create scroll table and header must be fixed in your website or project. You can do it easily. I show you two example of scrolling table with fixed header and you can see and implement in your website. Let's see first example : <strong>Example 1</strong> <pre class="code language-html"> <html> <head> <title>Table Scroll with fixed header</title> </head> <body> <table cellspacing="0" cellpadding="0" border="0" width="325"> <tr> <td> <table cellspacing="0" cellpadding="1" border="1" width="30.....

By Hardik Savani | March 1, 2016 | | 2731 Viewer | Category : HTML
READ MORE

How to get max attribute value in jquery?

Sometimes, you have a many tag with same class and attribute with value, but you need to find maximal value of attribute from that comman class, In bellow you have same html tag: <pre class="code language-html"> <ul> <li class="test" data-id="3">hi</li> <li class="test" data-id="5">hey</li> <li class="test" data-id="1">hello</li> </ul> </pre> Now, you require to get max value, i mean you need to 5, because that is big value from other, so you can get maximal value from this way: <pre class="language-javascript"> var max = 0; $('.test').each(fu.....

By Hardik Savani | February 23, 2016 | | 561 Viewer | Category : HTML
READ MORE

Crop, Resize, Frames etc on selected image in php using Aviary

Whenever you require to use any image plugin for select image and crop,resize,effects,frames,strickers ect, so you have to use Aviary api like as you see of facebook, twitter ect., that site plugin provide lots of efects and api guide that way you can use easily in your web app and as well as on mobile app too. So, I am going to give demo of how to use this api in our side. <strong>Preview:</strong> <img style="border:2px solid cadetblue;width:100%" src="/upload/selectimage.png"> <strong>Example</strong> <pre class="code language-html"> <html> <head> <title>Aviary Image U.....

By Hardik Savani | February 16, 2016 | | 2881 Viewer | Category : HTML
READ MORE

How to set scroll to bottom in jquery?

Sometimes, we need to set scroll bottom as default by using jquery, in bellow example you can see i use scrollHeight for get the total height of scroll class div with scroll, and at last i use animate with scrollTop attribute and set bottom, So Basically when your page will load then automatically scroll as bottom. <strong>Example:</strong> <pre class="code language-html"> <html lang="en"> <head> <title>Scroll Down bottom</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <div cl.....

By Hardik Savani | February 11, 2016 | | 1156 Viewer | Category : HTML
READ MORE

Check and Uncheck checkboxes using JQuery

Sometimes we need to Select and Deselect all checkboxes like you see on gmail if you check top checkbox then automatically select other all.So, we can do using jquery and its method prop().In Following example you can see how is that and use this example simply: <strong>Example:</strong> <pre class="code language-html"> <html lang="en"> <head> <title>Select and Deselect Checkbox</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> <body> <input name="subject_all" class="subject-all" type=.....

By Hardik Savani | February 10, 2016 | | 616 Viewer | Category : HTML
READ MORE

Select only one checkbox at a time using Jquery

If you need to select one checkbox at a time in multiple checkbox, i mean you want to allow anly one checkbox user can check then you can do easily using jquery. jquery prop() through you can give attribute value checked equel to true or false. if you have banch of checkbox like as example, and if you want to check checkbox at time one by using jquery then you can use this code. In following example use for you to do select at a time one. <strong>Example:</strong> <pre class="code language-html"> <html> <head> <title>Select only one checkbox at time</title> <scri.....

By Hardik Savani | February 5, 2016 | | 6464 Viewer | Category : HTML
READ MORE

    Bootstrap daterangepicker example code with demo using daterangepicker.js

    Bootstrap daterangepicker example code with demo using daterangepicker.js

    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

    How to get last record from MySQL table in Codeigniter?

    How to get last record from MySQL table in Codeigniter?

    Open Post

    Laravel 5 mailchimp api integration from scratch with example

    Laravel 5 mailchimp api integration from scratch with example

    Open Post

    How to get current month records in Laravel 5?

    How to get current month records in Laravel 5?

    Open Post

    How to get last inserted id in Codeigniter?

    How to get last inserted id in Codeigniter?

    Open Post