Found 10878 Articles for Web Development

Server-sent events standardize how we stream data from the server to the client. To use Server-Sent Events in a web application, you would need to add an element to the document.The src attribute of element should point to an URL which should provide a persistent HTTP connection that sends a data stream containing the events.The URL would point to a PHP, PERL or any Python script which would take care of sending event data consistently. Following is a simple example of web application which would expect server time.You can try to run the following code to learn how ... Read More

You may have run into a situation where you clicked a URL to go to a certain page but were directed to a different page internally. Page redirection is the cause of this. Redirecting occurs when an HTTP request for one page immediately navigates to another one. It differs from simply reloading a website. It is quite simple to do a web page redirection using vanilla JavaScript on the client side. So in this article, we will learn how to redirect web pages using vanilla JavaScript and when to use a particular method.There are many ways to accomplish redirection of ... Read More

Grabbing an object and moving it to a different position is made simpler with the drag and drop idea, which is very dynamic and user-friendly. This enables the user to click and drag an element to another position before letting go of the mouse button to drop it there. Drag and drop events Drag and Drop event consists of various types of events, some of them are listed below. ondrag − is a term used in HTML to describe when an element or text selection is being moved around. ondragstart − is a function that is called when a ... Read More

To use SVG images in HTML5, use element or . To add SVG files, you can use , or element in HTML. Choose any one of them according to your requirement.Here’s how you can add SVG images. If the SVG is saved as a file, it can be directly used as an SVG image:ExampleYou can try to run the following code to use SVG ImagesLive Demo                    #svgelem {             position: relative;             left: 50%;             -webkit-transform: translateX(-20%);             -ms-transform: translateX(-20%);             transform: translateX(-20%);          }             HTML5 SVG Image               HTML5 SVG Image          

Graphics for your responsive site can make it slower, but balancing it with vector graphics can help in minimizing the bandwidth. Through this, amazing graphics work great on mobile site too. Generally, canvas and SVG is used for this purpose.Use HTML5 Scalable Vector Graphics (SVG) to create a design for multiple screen sizes, since it handles it perfectly. Easily present vector based line drawings and do not worry about the pixels on your device since the graphics created with SVG are resolution independent. It scales the result and looks great in the browser.Here, we will look how to work with ... Read More

With HTML, you can easily limit input length. However, with CSS3, it will not be possible, since CSS can’t be used to limit the number of input characters. This will cause a functional restriction.CSS deals with presentation i.e. how your web page will look. This is done with HTML attribute malength, since it’s for behavior.Let’s see how to do it in HTML −ExampleYou can try to run the following code to limit input text lengthLive Demo           HTML maxlength attribute                        Student Name                    

HTML5 Geolocation API lets you share your location with your favorite websites. A JavaScript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.The geolocation APIs work with a new property of the global navigator object ie. Geolocation object.ExampleYou can try to run the following code to find the current location using the Geolocation API, with Latitude and Longitude coordinatesLive Demo                    function showLocation(position) {           ... Read More

HTML5 introduced two mechanisms, similar to HTTP session cookies, for storing structured data on the client side and to overcome the following drawbacks.Cookies are included with every HTTP request, thereby slowing down your web application by transmitting the same data.Cookies are limited to about 4 KB of data. Not enough to store required data.The two mechanisms for storage are session storage and local storage and they would be used to handle different situations.Session StorageThe Session Storage is designed for scenarios where the user is carrying out a single transaction but could be carrying out multiple transactions in different windows at ... Read More

The stroketext() method renders the provided text using the current font, linewidth, and strokestyle properties at the specified place. The path won't be affected by any subsequent fill() or stroke() calls because this method draws directly to the canvas without changing the original route. Syntax Following is the syntax for stroke text in HTML ctx.strokeText(text, x, y, maxWidth); Where, X − The point on the x-axis where the text should start to be drawn, in pixels. Y − The baseline's y-axis coordinate, in pixels, at which to start rendering the text. text − A string containing the text ... Read More

HTML5 Geolocation API lets you share your location with your favorite websites. A JavaScript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map.Geolocation is complicated, and it is very much required to catch any error and handle it gracefully.The geolocations methods getCurrentPosition() and watchPosition() make use of an error handler callback method which gives PositionError object. This object has following two properties −PropertyTypeDescriptionCodeNumberContains a numeric code for the error.messageStringContains a numeric code for the error.The following table describes the possible ... Read More