Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Programming Scripts Articles
Page 16 of 33
Apple Touch icon for websites in HTML
For web page icon on iPhone or iPad, use the Apple Touch Icon or apple-touch-icon.png file. This icon is used when someone adds your web page as a bookmark.For multiple icons with different device resolutions like iPhone or iPad, add sizes attribute to each link element as follows −Set size The icon with the appropriate size for the device is used.
Read MoreHow to clear a chart from HTML5 canvas so that hover events cannot be triggered?
To clear a chart from canvas, delete the element and then append a new element to the parent container as in the below-given code −var resetCanvas = function(){ $('#results-graph').remove(); $('#graph-container').append(''); canvas = document.querySelector('#results-graph'); ct = canvas.getContext('2d'); ct.canvas.width = $('#graph').width(); // here we are resizing the new canvas element to parent width ct.canvas.height = $('#graph').height(); // here we are resizing the new canvas element to parent height var a = canvas.width/2; var b = canvas.height/2; ct.font = '12pt Calibri'; ct.textAlign = 'Align Left'; ct.fillText('left aligned ...
Read MoreHow can I make a browser to browser (peer to peer) connection in HTML?
For the browser to browser connection, follow the below-given steps −All the following library −Create a peer −For creating a peer, you need to get a free API key.var peer = new Peer('pick-an-id', {key: 'myapikey'});Connect −var conn = peer.connect('another-peers-id'); conn.on('open', function(){ conn.send('Welcome!'); });
Read MoreHow to draw grid using HTML5 and canvas or SVG?
In the below given example, we have first defined the width and height of the grid. Then we are defining the size of canvas and drawn gird into a canvas.//we are setting the grid width and height var grid_w = 200; var grid_h = 200; //we are setting padding around grid var gridp = 15; //we are defining size of canvas by defining its width and height var canvas_w = grid_w + (gridp*2) + 1; var canvas_h = grid_h + (gridp*2) + 1; var canvas = $('').attr({width: canvas_w, height: canvas_h}).appendTo('body'); var ctx = canvas.get(0).getContext("2d");Here is our method −function ...
Read MoreHTML 5 video or audio playlist
Use HTML with JavaScript to add playlist. The onended event fires when the audio/video has reached the end. You can add messages like “Thank you for watching”, “Stay tuned!”, etcExampleYou can try to run the following code to implement the onended attribute − Your browser does not support the video element. function display() { alert ("Thank you for watching! Stay tuned!"); } You could load the next clip in the onended event like in the below-given code var next = "path/of/next/video.mp4"; var video = document.getElementById('video'); video.onended = function(){ video.src = next; }
Read MoreConverting video to HTML5 ogg / ogv and mpg4
To convert video to ogg or mpg4, you need to use third-party software like Free HTML5 Video Player And ConverterAfter that, launch it and select input video files. Add files in any of the following formats −*.avi; *.ivf; *.div; *.divx; *.mpg; *.mpeg; *.mpe; *.mp4; *.m4v; *.webm; *.wmv; *.asf; *.mov; *.qt; *.mts; *.m2t; *.m2ts; *.mod; *.tod; *.vro; *.dat; *.3gp2; *.3gpp; *.3gp; *.3g2; *.dvr-ms; *.flv; *.f4v; *.amv; *.rm; *.rmm; *.rv; *.rmvb; *.ogv; *.mkv; *.ts.Now select the output location, click the “Browse...” button, and choose the location where the video would be saved.Select Presets, which are pre-configured. Select a player theme and click ...
Read MoreHow to find the size of localStorage in HTML?
localStorage is used to persist information across multiple sessions. It has a maximum size of 5MB.ExampleYou can try to run the following code snippet to check the size allocated −var sum = 0; // loop for size for(var i in localStorage) { var amount = (localStorage[i].length * 2) / 1024 / 1024; sum += amount; document.write( i + " = " + amount.toFixed(2) + " MB"); } document.write( "Total = " + sum.toFixed(2) + " MB");
Read MoreHow to apply antialiasing in HTML5 canvas drawImage()?
For antialiasing, you need to set resampling quality.ctx.imageSmoothingQuality = "low|medium|high"Use an off-screen canvas to reduce the image to half −var c = document.createElement('canvas'), ocx = c.getContext('2d'); c.width = img.width * 0.5; c.height = img.height * 0.5; ocxx.drawImage(img, 0, 0, c.width, c.height);// drawing images reducing to half again and repeating itocx.drawImage(c, 0, 0, c.width * 0.5, cc.height * 0.5);
Read MorePlay local (hard-drive) video file with HTML5 video tag?
The tag is used to add video, with the following video formats − MP4, WebM and OggOn selecting a file via the input element.The change event is firedThe event is fired for , , and elements when a change to the element's value is performed by the user.Getting File objectThe File interface provides information about files and allows JavaScript in a web page to access the content. Object of this type is returned by the files property of the HTML element, which eventually lets you access the list of files selected with the element.Object URL pointing ...
Read MoreHow to stream large .mp4 files in HTML5?
Video files on the web sometimes need to be encoded in a special way in order for them to be played while downloading. In order for flash-based videos to work, data should be moved from the end to the start of the stream. A program called mp4 FastStart can do this for you.Programs like HandBrake have a "web" option that also does this when encoding. You need to ensure that your web server is not applying to gzip or deflate compression on top of the compression in the mp4 file.Compression allows your webserver to provide smaller file sizes, which load ...
Read More