
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 598 Articles for Front End Scripts

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

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

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

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.

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

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

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

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.