Found 10483 Articles for Web Development

Why HTML5 Web Workers are useful?

Anvi Jain
Updated on 29-Jan-2020 08:33:46

177 Views

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

Difference between dragenter and dragover event in HTML5

Samual Sam
Updated on 30-Jul-2019 22:30:22

435 Views

dragenterThe dragenter event 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.dragoverThe 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.

Resize image before submitting the form HTML5

karthikeya Boyini
Updated on 29-Jan-2020 08:22:08

322 Views

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 );

What are the DataTransfer object attributes?

Nitya Raut
Updated on 29-Jan-2020 08:21:27

523 Views

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

Drop target listens to which events in HTML5?

Lakshmi Srinivas
Updated on 29-Jan-2020 08:20:54

116 Views

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.

DataTransfer object in HTML5

Jennifer Nicholas
Updated on 29-Jan-2020 08:20:22

387 Views

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

Making an image scale mouse over on HTM5

Samual Sam
Updated on 29-Jan-2020 08:19:37

333 Views

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); }

innerHTML adds text but not HTML tags

Vrundesha Joshi
Updated on 29-Jan-2020 08:18:47

225 Views

Maybe, you are using += with innerHTML. Try the following:var myNum = [1,2,3]; var myStr; myStr = ""; for( var a in myNum) myStr += "" + a + ""; myStr += ""; id("numberList").innerHTML = myStr;

jQuery Mobile: Sending data from one page to the another

Lakshmi Srinivas
Updated on 29-Jan-2020 08:18:17

200 Views

To pass values, let us say our is the following, with page new.html,StructureThe JS will be:$( document ).on( "pageinit", "#new", function( event ) {    var myParam = $(this).data("url").split("?")[1];    myParam = parameters.replace("structure=","");    alert(myParam); });

JS Geolocation but without prompting possible?

Rishi Rathor
Updated on 29-Jan-2020 08:14:44

415 Views

No, you will not be able to prevent the prompt. It is a security feature because not every user would want to share its location.As stated by W3C:A conforming implementation of this specification must provide a mechanism that protects the user's privacy and this mechanism should ensure that no location information is made available through this API without the user's express permission.

Advertisements