Found 598 Articles for Front End Scripts

HTML5 using src using raw binary data

Govinda Sai
Updated on 30-Jan-2020 06:52:52

1K+ Views

If an audio file is stored in database and then we want to use this file as a blob or binary in an application where audio source is according to session then binary data is returned through ${sessionScope.user.music}. To load the audio file in an audio tag, data:audio/mp3;base64 works well.As for the image, image tag is used as follows:

HTML5 getCurrentPosition almost always failing in PhoneGap on iOS

Lakshmi Srinivas
Updated on 30-Jul-2019 22:30:22

89 Views

PhoneGap has geolocation which works well for iOS, however, in IOS6, getCurrentPosition fires a failure callback. After failure, the getcurrentPosition calls success or failure callbacks. To let PhoneGap works on IOS6, we need to set PhoneGap.plist to No.If it is set to yes then ios6 have memory problems. However, Apache Cardova can be used for this purpose for iOS. There are many bugs in an older version of Cardova, so it should be updated to Cardovanew version.

HTML5 drag and drop will not drop

Vrundesha Joshi
Updated on 30-Jan-2020 06:52:23

510 Views

It is because there is no dragover event handler; however, default event handler of dragover event is used. After that, no drop event is triggered.e.preventdefault is needed for dragover event before drop event.If you want to allow a drop, then default handler is prevented for canceling the event. This can be done either by returning false from an attribute-defined event listener or by calling events event.prevent default method. False is returned when the division has dragover as property.The default is prevented.

Splitting and uploading extremely large files to Amazon S3

Sravani S
Updated on 30-Jul-2019 22:30:22

596 Views

For storing extremely large files on Amazon S3, the configured virtual machine can be used which would be 10+ GB in size.In HTML5 file API, very large files are divided into small bits on the client. The server has the responsibility to join files together and move the complete file to S3. There is no cost of sending the files between EC2 and S3, but for this, we need to maintain 2 apps to send large files. In Amazon multipart upload if chunk upload fails, it can be restarted. A 5GB data can be divided into 1024 separate parts and upload each one ... Read More

Circle Collision Detection HTML5 Canvas

karthikeya Boyini
Updated on 30-Jan-2020 06:14:28

537 Views

If we want to check whether circles are colliding with each other or not, one way is by getting the distance between two centers of circles and subtracting the radius of each circle from that distanceWe also check if the distance is greater than 1. If we want to check it for 20 circles, then we need to calculate exact differences in distances. x/y positions of centers vs the radii.bs(x2 - x1) > (r2 + r1) abs(y2 - y1) > (r2 + r1)The circles cannot collide if the distance in X or Y between circle centers is greater than the ... Read More

How to detect point on canvas after canvas rotation in HTML5

V Jyothi
Updated on 30-Jan-2020 06:15:29

283 Views

Whenever we work with canvas and want the canvas to be rotated, we need to translate point to draw point as per its rotation.A transform class can be made to detect point on the canvas after canvas rotationvar t = new Transform(); console.log(t.transformPoint(5,6)); //Transform point will be [5,6] t.rotate(1); // Same transformations can be applied that we did to the canvas console.log(t.transformPoint(5,6)); // Transformed point will be [-2.347, 7.449]

Draw part of an image inside HTML5 canvas

Rishi Rathor
Updated on 30-Jan-2020 06:14:59

507 Views

If you want to draw part of an image inside canvas, the image onload function only fires once when the image first loads into the browser. Let us see the example:$(document).ready(function () {    var cw1 = 200;    var ch1 = 300;    var ctx1 = $("#myCanvas")[0].getContext("3d");    var myImg1 = new Image();    myImg1.src = "http://oi62.tinypic.com/148yf7.jpg";    var Fpst = 60;    var Player1Tank = {       x: cw1 / 2,       w: 85,       h: 85,       Pos: 3,       draw: function () {       ... Read More

HTML5 SVG css3 transition on fill not working when there is external link

Nancy Den
Updated on 30-Jan-2020 06:13:20

132 Views

This cannot be done through the visited state. The best solution is to add a random query to url so that page go unvisited.

What are the differences between group and layer in KineticJs with HTML?

Daniol Thomas
Updated on 30-Jul-2019 22:30:22

497 Views

When making HTML5 web application using KineticJS, grouping, and layering need to be used.Groups are basically containers whereas layers are separators basically.The group is a container which is having shaped objects inside layers for ex group might contain both circle and rectangle.If a group is manipulated then elements within that group is also manipulated.ex if we drag the group then its elements get dragged as well.However, layers actually separate canvas elements that are at the top of one another. This is quite similar to the layers that work in Photoshop and Illustrator. Multiple layers are visible simultaneously.Layers are used to ... Read More

Effects and animations with Google Maps markers in HTML5

Samual Sam
Updated on 30-Jan-2020 06:11:17

239 Views

There is no way to fade markers through API.However, markers can be simulated by creating Custom Overlay.Custom overlay usually contains a div with the help of which opacity can be controlled by javascript or jquery.In order to create effects or animations over Google Maps markers, we need a custom overlay.The marker can be added to map and it surely makes optimized: false optionvar newmarkerimg= $('#map_canvas img[src*="iconmarker "][class!="imageadjust "]');

Advertisements