Found 598 Articles for Front End Scripts

DataTransfer object in HTML5

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

384 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

331 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

223 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

198 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

413 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.

XMLHttpRequest for Video Tag?

karthikeya Boyini
Updated on 29-Jan-2020 08:14:09

517 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

How to load an HTML file into the canvas?

Samual Sam
Updated on 29-Jan-2020 08:12:55

768 Views

For this, you can use the SVG elements. Let us see an example:           DEMO          

JavaScript File Drop with HTML5

Nancy Den
Updated on 29-Jan-2020 08:12:03

277 Views

Drag and Drop (DnD) is powerful User Interface concept that makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.For drag and drop:                    #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

Does HTML5 only replace the video aspects of Flash/Silverlight?

Lakshmi Srinivas
Updated on 29-Jan-2020 08:12:31

111 Views

Flash provides amazing GUI and many visual features for animations. It allows the user build everything inside a particular platform without a full integration into the browser wrapped inside the browser with the main scopes that are multimedia and other kinds of animation.The HTML5 element gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.Here is a simple element that has only two specific attributes width and height plus all the core HTML5 attributes like id, name, and ... Read More

How to keep the image at the back of the HTML5 canvas when moving elements with fabric.js?

karthikeya Boyini
Updated on 29-Jan-2020 08:11:26

350 Views

To keep the image at the back of the canvas, when move elements, you need to pass:preserveObjectStackingAnd the following would work and the image is not visible in the background:window.canvas = new fabric.Canvas('c', { preserveObjectStacking:true });Now, on moving the shape will appear over the image.

Advertisements