Category : Javascript


Ckeditor required field validation example in Jquery

we can add required field validation easily using jquery if we have textbox, textarea, select box etc, but if we used ckeditor then it's not simple. In this example i give you how to add Ckeditor required field validation in javascript. we can do it using CKEDITOR.instances, so if you also require then you can use it. <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery - ckeditor required field validation</title> <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> .....

By Hardik Savani | June 11, 2016 | | 1427 Viewer | Category : Javascript
READ MORE

Jquery notification popup box example using toastr JS plugin with demo

We always need to use notification in our project, because for example if user add new record and we need to display notification with success alert, when comes error then display error notication. So if you use jquery notification popup then it's better that way it's layout looks like good. In this example i use toastr.js plugin that provide several notification type like warning, success, info, error etc and several function. toastr Jquery plugin you can use easily with bootstrap and very customize. You can run bellow example and you can see how it works and pretty good. <strong>Example:</.....

By Hardik Savani | June 10, 2016 | | 2597 Viewer | Category : Javascript
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 | | 464 Viewer | Category : Javascript
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 | | 1505 Viewer | Category : Javascript
READ MORE

Bootstrap daterangepicker example code with demo using daterangepicker.js

Sometimes, we may require to use daterangepicker in our php project or laravel project etc, then you can use date range picker easily using daterangepicker.js plugin. In this post i give you full example from scratch and also give you demo that way you can check how it's looks like. So just copy bellow code and run in your local system. <img src="/upload/daterangedemo.png" width="100%" class="img-responsive" /> <strong>Example:</strong> <pre class="prettyprint lang-html"> <html lang="en"> <head> <title>Jquery - Bootstrap Daterangepicker Example</title> <scri.....

By Hardik Savani | May 28, 2016 | | 2408 Viewer | Category : Javascript
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 | | 1326 Viewer | Category : Javascript
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 | | 673 Viewer | Category : Javascript
READ MORE

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 : Javascript
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 : Javascript
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 : Javascript
READ MORE

    How to add multiple markers in google map

    How to add multiple markers in google map

    Open Post

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

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

    Open Post

    Laravel 5 Autocomplete using Bootstrap Typeahead JS Example with Demo

    Laravel 5 Autocomplete using Bootstrap Typeahead JS Example with Demo

    Open Post

    Bootstrap - Show/Hide(toggle) Password input field using bootstrap-show-password.js Plugin

    Bootstrap - Show/Hide(toggle) Password input field using bootstrap-show-password.js Plugin

    Open Post

    How to use groupby having with DB::raw in Laravel Query Builder?

    How to use groupby having with DB::raw in Laravel Query Builder?

    Open Post

    How to add charts in Laravel 5 using Chart JS ?

    How to add charts in Laravel 5 using Chart JS ?

    Open Post