Demo Post



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 | | 8095 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 | | 7977 Viewer | Category : Javascript Bootstrap HTML jQuery
READ MORE

PHP - autocomplete websites with domain and logo using clearbit API

Today, i going to give you pretty interesting example of autocomplete websites lists with name, logo and domain using clearbit API. we simply use free clearbit API and get lists of websites. You can simply use it in your PHP and also any framework(Laravel, codeigniter, zend etc). clearbit website provide us several other API too like Reveal, Discovery, Website Logo and etc. In this example i used following library as bellow listed: <strong>1)clearbit</strong> <strong>2)bootstrap</strong> <strong>3)typeahead</strong> Above library through we can make autocomplete of current websites in your .....

By Hardik Savani | October 2, 2016 | | 7661 Viewer | Category : PHP Bootstrap jQuery Ajax
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 | | 7549 Viewer | Category : PHP HTML jQuery
READ MORE

How to get ip address in jquery?

you can get ip address in jquery using getJSON(). If you need to get ip address in your js file you can get easily. In this example you can see how to get ip address in jquery. So let's try with this... <strong>Example</strong> <pre class="prettyprint lang-php"> <html lang="en"> <head> <title>Jquery - get ip address</title> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> </head> <body> <br/> <h1>Your Ip Address : <span class="ip"></span></h1> <br/> <script type="text/java.....

By Hardik Savani | June 8, 2016 | | 7493 Viewer | Category : Javascript jQuery
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 | | 7181 Viewer | Category : Javascript Bootstrap 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 | | 7008 Viewer | Category : AngularJS
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 | | 6331 Viewer | Category : Bootstrap
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 | | 6241 Viewer | Category : Javascript HTML jQuery
READ MORE

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 | | 5901 Viewer | Category : Javascript jQuery
READ MORE


    Simple PHP Jquery Ajax CRUD(insert update delete) tutorial example with source code

    Simple PHP Jquery Ajax CRUD(insert update delete) tutorial example with source code

    Open Post

    Laravel 5 Twitter OAuth using Socialite Package

    Laravel 5 Twitter OAuth using Socialite Package

    Open Post

    How to create REST API in Laravel 5 ?

    How to create REST API in Laravel 5 ?

    Open Post

    Laravel 5 - Google reCaptcha code and Validation example using anhskohbo/no-captcha package

    Laravel 5 - Google reCaptcha code and Validation example using anhskohbo/no-captcha package

    Open Post

    Laravel 5.3 - image dimension validation rules example

    Laravel 5.3 - image dimension validation rules example

    Open Post

    How to implement lazy loading image with example for your website?

    How to implement lazy loading image with example for your website?

    Open Post