Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
This accepts only URL value in HTML5. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in https://www.qries.com format or in http://qries.com format. Enter URL :
Use Modernizr in HTML to detect a feature like audio through JavaScript:if (Modernizr.audio) { /* properties for browsers that support audio */ } else{ /* properties for browsers that does not support audio */ }
You can try to run the following code to detect a web worker feature available in a web browser: Big for loop function myFunction(){ if (Modernizr.webworkers) { alert("Congratulations!! You have web workers support." ); } else{ alert("Sorry!! You do not have web workers support." ); } } Click me The following is the result:
Here is an example of an error handling function in a Web Worker JavaScript file that logs errors to the console.ExampleWith error handling code, above example would become like the following: Big for loop var worker = new Worker('bigLoop.js'); worker.onmessage = function (event) { alert("Completed " + event.data + "iterations" ); }; worker.onerror = function (event) { console.log(event.message, event); }; function sayHello(){ alert("Hello sir...." ); }
JavaScript was designed to run in a single-threaded environment, meaning multiple scripts cannot run at the same time. Consider a situation where you need to handle UI events, query and process large amounts of API data, and manipulate the DOM.JavaScript will hang your browser in situation where CPU utilization is high. Let us take a simple example where Javascript goes through a big loop: Big for loop function bigLoop(){ for (var i = 0; i
To resize the image before submitting the form, you need to use the drawImage() method.Scale the original image and draws the scaled version on the canvas at [0,0]context.drawImage( img, 0,0,img.width,img.height, 0,0,myWidth,UseHeight );Above, we saw the following:Here,var myWidth = Math.floor( img.width * Scale ); var myHeight = Math.floor( img.height * Scale );And,var x = Math.floor( ( world.width - myWidth) / 2 ); var y = Math.floor( ( world.height - myHeight) / 2 );
The DataTransfer object holds data about the drag and drop operation. This data can be retrieved and set in terms of various attributes associated with the DataTransfer object.The following are the attributes:Sr.No.DataTransfer attributes and their description1dataTransfer.dropEffect [ = value ]Returns the kind of operation that is currently selected.This attribute can be set, to change the selected operation.The possible values are none, copy, link, and move.2dataTransfer.effectAllowed [ = value ]Returns the kinds of operations that are to be allowed.This attribute can be set, to change the allowed operations.The possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.3dataTransfer.typesReturns a DOMStringList ... Read More
To accept a drop, the drop target has to listen to at least three events. The dragenter event, which is used to determine whether the drop target is to accept the drop. If the drop is to be accepted, then this event has to be canceled. The dragover event, which is used to determine what feedback is to be shown to the user. If the event is canceled, then the feedback (typically the cursor) is updated based on the dropEffect attribute's value. Finally, the drop event, which allows the actual drop to be performed.
The event listener methods for all the drag and drop events accept Event object that has a readonly attribute called dataTransfer. The event.dataTransfer returns DataTransfer object associated with the event as follows:function EnterHandler(event) { DataTransfer dt = event.dataTransfer; … }You can try to run the following code to implement DataTransfer object: #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } #boxA { background-color: #6633FF; width:75px; height:75px; } #boxB { background-color: #FF6699; width:150px; height:150px; } ... Read More
To make an image scale on mouse over, use Vanilla JavaScript library.On mouse move, set it like the following:function move(e) { var pos = getMousePos(myCanvas, e); context.drawImage(img, -pos.x, -pos.y, img.width, img.height); }For canvas://add event listener we need myCanvas.addEventListener('mouseout', display, false); myCanvas.addEventListener('mousemove', move, false);function display() { context.drawImage(img, 0, 0, img.width>>1, img.height>>1); }