gora

Hi, in this post let's see how to add select all options to jQuery Select2 plugin . Select2 is an excellent alternative to the standard HTML selection box that supports all its functions and provides greater flexibility. The plug-in is easy to setup and use. It supports multiple selection options where the selected elements will be added as pills to the top text box. You can also tag, search and load remote data-sets to select2 control. Below we will see how to use select2 in your web projects, and select all options at once by ticking a check box using jquery. How to Use Select2 jQuery Plug-in? To implement Select2 plug-in in your projects, create a regular drop-down box with html markup as usual. HTML: <select id="states" style="width:300px"> <option>Alaska</option> <option>Arizona</option> <option>California</option> <option>Florida</option> <option>Hawaii</option> ...

Content theft is a serious issue faced by many website / blog owners. This can be limited to a certain level by disabling right click on websites. Disabling mouse right-click will prevent the context menu from appearing, there by preventing the page contents from being copied. Although it is not recommended as the best practice, it is certainly feasible. It is very easy to disable the right click on your site using jquery. You can do it at page level or element level. You have to capture and cancel the event inside the event handler. We will see how to do it. jQuery - Disable Right Click Context Menu: You can avoid copying the contents of your website in two ways. One is to disable the right-click context menu altogether and the other is to simply disable the cut, copy and paste operations. 1) To disable the right-click event on the entire web page, use this script, <script type="text/javascript"> $(document).ready(function(){ $(this).on('contextmenu...

Hi! In this post, let's see how to add images to dropdown list using jquery . I had a form with a drop-down element for the list of countries and wanted to insert the corresponding country flag before each country name. But HTML does not support the addition of elements to select box. Then I found some CSS hack but this method is not compatible with all browsers. Finally, I decided to go with java script and found a fairly neat solution. Actually, it is a jquery plugin called 'select2'. It includes the autocomplete feature to dropdown list , but also allows you to add icons to those select options. Below, I'll show you how to use the select2 add-on to insert country flags before the country names in a drop-down list. jQuery - Adding Images to the Dropdown List: STEP-1) First load the 'jQuery' and 'Select2' libraries on the Web page. You need to add both 'css' and 'js' files of the plugin. <link href="https://cdnjs.cloudflar...

Hi! Today let's see how to print contents of a div using javascript . Have you ever tried printing a web page or part of a page programmatically? There is an interesting utility in JavaScript called print(). It is one of the methods of the 'Window' object and is used to trigger your system's printing feature. In case you want to print part of a page area, the simple solution is to place all the printable content inside a 'div' block and invoke the print action with some user event. Let's see how to do it. Print Contents of a Div in JavaScript: Let's first create a div container to hold the printable part. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Print Part of a Webpage with JavaScript</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr...

Autosuggest Textbox is a cool technique to enhance user experience in websites. It's a google like search box which pops up suggestions while you type and lets you choose the word(s) without typing it completely. Usually this feature requires third party tools like jquery plug-ins to implement but thanks to HTML5, you can do it with plain html and php alone. In this tutorial, I'm going to show you, how easy it is to integrate HTML5 auto complete textbox from database using PHP and MySQL. Autocomplete Textbox from Database using HTML5 and PHP The HTML5 DATALIST element adds up autocomplete feature to ordinary textboxes and it takes up several options similar to SELECT element. To implement auto suggest from database, we should fetch the data and populate it to the datalist options. Finally integrate this datalist to a textbox element and we are done. Let's see how to do it in php and mysql. Step-1: Connect to MySQL Database in PHP First establish the connectio...

Hi, today we’ll see how to embed pdf file in a html page directly. Some websites tend to show pdf files directly on their site’s webpages instead of giving a download link for the files. Thanks to HTML5, you can also do the same with simple html code without using any third party solutions. The method we are going to see is the quick and easy solution which gives you some control over how the pdf file is shown to the user. Also it works on all modern web browsers that support HTML5. How to Embed PDF File in HTML Page HTML5 provides <embed> element which acts as a container for external application like image, videos, mp3 files or other multimedia objects. Using this tag makes the browser to automatically include controls for the multimedia objects (in case the browser supports the particular media type). We are going to use this <embed> tag to show the pdf files in the web page without using complex third party scripts. Open the html page in which you want to e...

Hi, in today’s post we’ll see How to Read and Parse JSON String in jQuery. JSON is a human readable data exchange format used among web services and it's a necessary skill for modern day web developers (frontend/backend) to deal with JSON data received from various third-party APIs. Keeping that in mind we have discussed about parsing json data using php script sometime back. And now we have come up with this jquery tutorial which walks you through the process of parsing json string using jquery library, convert and display it into an html table. How to Read and Parse JSON String in jQuery? jQuery provides several JSON methods like “getJSON”, “parseJSON”, “stringify” and for this post we’ll pickout and use the method “parseJSON” , which parses through well formed json string and returns javascript object. JSON.parseJSON(JSON STRING) The function parseJSON() takes the string parameter and returns String, Number, Object, Array or Boolean. Using this jQuery method we can ...

Hi, this time I have come up with a jquery basics tutorial which discusses about how to convert json to html table. In simple terms we are going to use jquery to display data from a json file in neat table format with added pagination and search options to it. To make our life easier there is an excellent jquery plug-in called ‘DataTables’ which we will use for this task. DataTables is a flexible jquery tool which adds up advanced interaction controls to any HTML table. Using this we can easily add pagination, instant search or multi-column ordering to the html table. Moreover it supports all modern day data sources like DOM, JavaScript, Ajax and server-side processing. Convert JSON Data to HTML Table using jQuery As an example let’s take the below sample json file which contains an array of objects and display it in html table using datatables. Don't Miss: How to Create Responsive Carousel Image Slider Also Read: How to Create Image Lightbox Effect with jQuery empda...

Hi! Today we will see about ajax inline editing using php and mysql . Inline editing allows users to rapidly modify web page contents in place without the requirement of forms. Popular sites like Facebook, Twitter, etc. employ this technique so that users can change their profile information without having to navigate through separate forms. Using HTML5's 'contenteditable' on page elements will take care of inline editing. For example, you can convert a plain html table into an editable table by setting 'contenteditable = true'. If you are new to inline editing, take a look at html5 editable table tutorial . PHP MySQL Inline Editing using jQuery AJAX: The 'contenteditable' attribute can be used on almost all html elements, but the data edited by user is only temporary. It will be lost when the page is refreshed. Therefore, you must use ajax to send the data back to the server and store it in database for future use. Here, let's see a demo wit...

Hi, this is another one of those quick twitter bootstrap tutorials which shows you how to create inline form using bootstrap css . As said many times, using bootstrap simplifies the task of building websites, especially web forms. Web Forms or otherwise called as HTML Forms are the inherent part of web development and a simple modern day website should include a contact form at the least. But to style those forms with css is a tedious task and using twitter bootstrap framework greatly simplifies it. Twitter Bootstrap Inline Form Layout HTML Forms can be laid out in different ways but at times you may have to make it packed in little available space, like having a login form in top navigation menu. This type of layout is called as 'inline form layout' and there is a separate class named '.form-inline' is available in bootstrap css. Using this css class along with the html <form> tag will automatically align the form elements side-by-side to create a co...

Hi! Today let's see how to build html5 video player with custom controls using javascript . The only way to embed videos on webpages before the introduction of html5 is through the use of add-ons such as flash. But thanks to html5, you can insert video contents using native html markup alone. The <video> </video> element in html5 offers a standard way to include video files on web pages. It is supported by all html5 compatible browsers. Currently, HTML5 supports three types of video formats and they are MP4, WebM, and Ogg. Among the three, MP4 is compatible with all major browsers. Creating Video Player in HTML5: To embed video in an html page, use the <video> element like this, <video width="640" height="360" controls> <source src="videos/flying-seagull.mp4" type="video/mp4"> <source src="videos/flying-seagull.ogg" type="video/ogg"> Your browser does not support ...

Hi! Today we are going to see an interesting tutorial which is about creating editable table in html5, bootstrap and jquery. Usually, any form of organized data will be presented in as table or lists on web pages. But those tables cannot be edited by users. We can say HTML Tables are non-editable and you need the help of complex jquery plug-ins to make them editable. But thanks to HTML5, you can now easily create editable tables on the fly, without any complex coding or add-ons. HTML5 is just enough to create an editable table, but to make this demo interesting, I'm going to use bootstrap and jquery along with it. Come, let's see how to apply inline editable option to html table element. HTML5 Editable Table: HTML5 has an attribute called 'contenteditable' . Setting this attribute to 'true' , will make the table cell editable. You simply have to add the attribute to <td> like this, <table> <tr> <td contenteditable=...