المشاركات

عرض الرسائل ذات التصنيف JavaScript

How to Print Contents of a Div using JavaScript

صورة
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...
إرسال تعليق
قراءة المزيد

How to Remove a Property from an Object in JavaScript

صورة
JSON alias 'JavaScript Object Notation' is the string representation of JavaScript Object and is a popular data-exchange format among web-services. Manipulating those data received from various source is an essential skill required for every developer. With that in mind we have published several json tutorials in the past which discusses about working with json data. And today in this tutorial, we'll see how to remove a property from an object in javascript. Removing a Property from JavaScript Object Let's say we have a Java Script Object that contains three properties (details) of an employee namely 'name', 'gender' & 'position'. {"name": "Garrett Winters","gender": "Male","position": "Javascript Developer"} Now we want to remove one of the properties from the above object and to do this, we have to use java script's delete method. Here's the code snippet for rem...
إرسال تعليق
قراءة المزيد

HTML5 Video Player with Custom Controls using JavaScript

صورة
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 ...
إرسال تعليق
قراءة المزيد

Create 3D Pie Charts with JavaScript and Google Charts API

صورة
Google Charts API provides you with ready-made charts which you can generate with few lines of java script code. I'll show you here how easy it is to Create 3D Pie Charts with JavaScript and Google Charts API . For this chart tutorial we are going to use Google's Visualization API which is based on pure HTML5/SVH technology, so you don't need extra plug-ins. The pie chart we generate is an interactive chart , which means the user is allowed to interact with them by triggering events like mouse over, clicking, zooming, panning and much more (depends upon the charts we use). This method is relatively simple and does not require any complex server side scripts like PHP or any Databases. Using java script we will make callback to the Google Visualization API with the data set we want to render as a pie chart. The charts will be generated at the time of presentation. So if you want to generate charts from database tables , you can simply make it by querying the data...
إرسال تعليق
قراءة المزيد

Delete Data from MySQL with Confirmation Message in PHP OOP

صورة
Delete is one of the primitive processes performed on database management system. And it’s always a good practice to confirm the delete action of users with a message to avoid accidental clicks and data deletion. In this tutorial we’ll see how to delete row(s) from mysql database with confirmation message in php. Implementing database deletion using procedural style has been discussed a lot but here I want to show you how to achieve it using OOP Method (Object Oriented Programming) in php. Implementing PHP Delete from MySQL with Confirmation For better understanding of database deleting task, I go with an example. Consider having user details stored in database. As user interface, we should fetch and display the user records in a neat grid view along with a delete button or link on each row. When the user clicks on the delete button, a message pops up to confirm the delete process. If the user clicks ok, then that particular user record will be deleted and the page refreshes...
إرسال تعليق
قراءة المزيد

How to Build a Simple Web Crawler in PHP to GET Links

صورة
Hi! I’m going to show you how to build a web crawler in php to search all the links from a particular website - and create a downloadable csv file containing those links. Web Crawlers are bots that are used to search for information from websites by scraping their HTML content. These are the same things used by giant search engines like Google, Yahoo and Bing to find and index fresh contents on the web. Usually these search engines employ their own bots running 24/7 round the clock and search for new contents to update their huge database. This is the reason you are able to Google literally for any sort of queries and get the answer. Simple PHP Web Crawler Example Building a crawler like Big G to scan the whole web will take much time and effort but the underlying concept is same. The simple php web crawler we are going to build will scan for a single webpage and returns its entire links as a csv (comma separated values) file. You Need Simple HTML DOM Parser Library In order...
إرسال تعليق
قراءة المزيد

Check If Internet Connection Exists Or Not Using JavaScript & PHP

صورة
Hi! Today let's see how to check if internet connection exists or not using javascript and php. The network connection may fail at times and many web applications require internet connection all the time. Hence, if there is no internet, these apps won't function properly. In such case, checking the status of the network through programming would be useful. There are many ways to do it, but here I'll show you the simplest method of all to detect whether user is online or offline both from client (using javascript) and server side (with PHP). Check Internet Connection using JavaScript: JavaScript has a function called navigator.onLine . This browser property can be used to determine if you are connected to the internet. It returns true or false depending on the status of the client's network and says whether the browser is online or offline easily. Below is the JS function to verify connectivity to the Internet. JS Function: <script type="text/javasc...
إرسال تعليق
قراءة المزيد

Convert URL Text to Clickable Link using JavaScript

صورة
Hi! Today let's see how to convert url text to clickable link using javascript. At times, you may want to turn the plain url text into clickable hyperlink automatically. CMS like Wordpress has this feature integrated by default. Also blog commenting systems such as Disqus use this to convert naked url text posted by users into hyperlinks. This feature is quite useful and allows others to link relevant pages across web easily. If you want to implement this feature on your own, you can do so using regular expressions and java script. Here we go! Converting Plain URL into Clickable Link First let's create a form interface with a textarea input and a button. User has to enter a bunch of text and click on 'Convert' button. Then our JS function will detect URLs from the text and replace the plain URLs with clickable links. index.html <!doctype html> <html> <head> <title>Convert URL Text into Hyperlink</title> <link href=...
إرسال تعليق
قراءة المزيد