Found 598 Articles for Front End Scripts

Draw Lines with easelJS using Ticker in HTML

Samual Sam
Updated on 29-Jan-2020 06:39:08

352 Views

EaseLJS is a JavaScript library to make the HTML5 Canvas element easy. Use it for creating games, graphics, etc.To draw lines using Ticker method in HTML with easeLJS:var myLine = new createjs.Shape(); myLine.graphics.setStrokeStyle(4); myLine.graphics.beginStroke(color); myLine.graphics.moveTo(startX, startY); startY++; myLine.graphics.lineTo(startX, startY); myLine.graphics.endStroke();

How can I write a form that assists my browser's auto-complete feature?

Krantik Chavan
Updated on 16-Jun-2020 13:30:18

129 Views

The official specification of HTML5 states:When the autofill field name is "on", the user agent should attempt to use heuristics to determine the most appropriate values to offer the user, e.g. based on the element's name value, the position of the element in the document's DOM,  whaUse any of the following as values for the autocomplete attribute:)Field NameMeaning"name"Full name"honoritic-prefix"Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "M||e")"given-name"Given name (in some Western cultures, also known as first name"additional-name"Additional name (in some Western cultures, also know as middle name, forenames other than the first name)"family-name"Family name (in some Western cultures, also know as ... Read More

Play video on canvas and preserve the last frame/image on HTML5 Canvas

Lakshmi Srinivas
Updated on 29-Jan-2020 06:38:07

294 Views

You can try to run the following code to play and preserve the video’s last frame:var c = $('canvas')[0]; var context = canvas.getContext('2d'); c.width = 640; c.height = 480; $("#,myPlayer").on('play', function (e) {    var $this = this;    (function loop() {       if (!$this.paused && !$this.ended) {          context.drawImage($this, 0, 0, 640, 480);          setTimeout(loop, 1000 / 30);       }    })(); });

Get maximal GPS precision on mobile browser

Vrundesha Joshi
Updated on 30-Jul-2019 22:30:22

257 Views

Built-in browser for Android will not give you accurate GPS location for security reasons. Test it with different web browsers that would need permissions to get the accurate location from GPS when installed.After switching GPS off, the data is received with < 10 meters accuracy.Do not use Android Browser for websites, if you want to get GPS location with high accuracy.50 meters precision can be seen for Safari browser if tested for iPhone with wifi switched off. Yes, the accuracy is lesser.

Retrofit existing web page with mobile CSS

karthikeya Boyini
Updated on 29-Jan-2020 06:37:40

151 Views

To retrofit, use the CSS media queries, and allow different stylesheets to different browser capabilities. A benefit is that you do not have to go for any server-side code.This would require you to add specific detection code to the script for grouping of the device.The media queries handle even devices you've never heard of.Set the following:@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {    body {       color: blue;    } }

Frame by frame animation in HTML5 with canvas

Nishtha Thakur
Updated on 29-Jan-2020 06:36:50

761 Views

To create a frame by frame animation in HTML5 with canvas, try to run the following code:var myImageNum = 1; var lastImage = 5; var context = canvas.getContext('2d'); var img = new Image; img.onload = function(){    context.clearRect( 0, 0, context.canvas.width, context.canvas.height );    context.drawImage( img, 0, 0 ); }; var timer = setInterval( function(){    if (myImageNum > lastImage){       clearInterval( timer );    }else{       img.src = "images/left_hnd_"+( myImageNum++ )+".png";    } }, 1000/15 );

HTML5 applicationCache vs Browser Cache

Nancy Den
Updated on 30-Jul-2019 22:30:22

352 Views

HTML5 applicationCacheIt can be understood by an example that a web application is cached, and accessible without a connected internet. Application cache has some advantages: users can use the application when they're offline, cached resources load faster and reduced server load. Browser cache Web browsers use caching to store HTML web pages by storing a copy of visited pages. After that, the copy is used to render when you visit that page again

Test if the HTML attribute tabindex is present and get the value

Nitya Raut
Updated on 29-Jan-2020 06:35:53

488 Views

To get the value of the HTML attribute, try the following:$("#demo").attr("tabindex")The attr() method can be used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements.You can also use the hasAttribute() method to see if there is an attribute for an element.ExampleTry to run the following code to learn how to use hasAttribute() method:                          $(document).ready(function(){             $('button').on('click', function() {                if (this.hasAttribute("style")) {                   alert('True')                } else {                   alert('False')                }             })          });                              Button                      Button 2          

Blank PNG image is shown with toBase64Image() function

Samual Sam
Updated on 29-Jan-2020 06:35:13

239 Views

If a blank image is shown with the toBase64Image() function, you need to use the following to work on it correctly:animation: {    duration: 2000,    onComplete: function (animation) {       this.toBase64Image();    } }With that, you can also use another fix. Call save64Img(myChart.toBase64Image()) over an additional callback and set it like this:myLine = {    onAnimationComplete: function () {       save64Img(myChart.toBase64Image());    } }

Not able to get the value of radio select setting dynamically in AngularJS

Krantik Chavan
Updated on 29-Jan-2020 06:34:33

205 Views

To get the value of radio select, add [$index] to each ng-model like the following: India USThe above would give you the result dynamically in AngularJS.

Advertisements