- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 601 Articles for Front End Scripts
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
232 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 );
![Nitya Raut](https://www.tutorialspoint.com/assets/profiles/13573/profile/60_92249-1512715559.jpg)
306 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
![Lakshmi Srinivas](https://www.tutorialspoint.com/assets/profiles/13528/profile/60_91717-1512651120.jpg)
66 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.
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
265 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
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
272 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); }
![Lakshmi Srinivas](https://www.tutorialspoint.com/assets/profiles/13528/profile/60_91717-1512651120.jpg)
163 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); });
![Rishi Rathor](https://www.tutorialspoint.com/assets/profiles/13563/profile/60_89283-1512714754.jpg)
285 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.
![karthikeya Boyini](https://www.tutorialspoint.com/assets/profiles/13518/profile/60_31598-1537784993.jpg)
375 Views
The HTML5 file Blob.slice() method is useful for creating a Blob object containing the data. This data is in the specified range of bytes of the source Blob. It uses XMLHttpRequest as in the below example.Let us see an example to send and receive binary data using slice(). This example sends a text and uses the POST method to send the "file" to the server:var val = new XMLHttpRequest(); val.open("POST", url, true); val.onload = function (event) { }; var blob = new Blob(['demo'], {type: 'text/plain'}); val.send(blob);For video:req.onload = function () { var blob_uri = URL.createObjectURL(this.response); myElement.appendChild(document.createElement("source")).src = ... Read More