
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

821 Views
To handle the mousedown and mouseup event with HTML5 Canvas,var mouseDown = false; // for mousedown canvas1.onmousedown = function(event){ dragOffset.x = event.x - mainLayer.trans.x; dragOffset.y = event.y - mainLayer.trans.y; mouseDown = true; } // for mouseup canvas1.onmouseup = function(event){ if(mouseDown) mouseClick(eevent mouseDown = false; }

481 Views
iFrames are replaced elements and considered different than non-replaced elements. The element is a non-replaced element.To achieve the same result i.e. to set both the left/right or top/bottom in an iframe, use a div as a wrapper with absolute position, top, left, right, bottom.Place your iframe with −width:100% height:100%.

704 Views
Use the TimeRanges object in HTML to set a series of non-overlapping ranges of time. You can also set the start and stop time.The following are the properties −length − Length of time ranges.start(index) − start time, in secondsend(index) − end time, in secondsHere is the code snippet showing buffering −// displays 12 myAudio.buffered.start(1); // displays 20 myAudio.buffered.end(1);

237 Views
The tel: protocol is supported by almost every mobile device nowadays. This includes Safari on iOS, Android Browser, Symbian browser, Opera Mini, etc.Add it like this −if (/(HTC825)/i.test(navigator.userAgent)){ $("a[href^='tel:']").each(function(){ this.href = this.href.replace("tel:", "wtai://wp/mc;"); }); }

1K+ Views
To style input type = number, use the following CSS −input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }The above shows without a spinner.To show and style a spinner, useinput[type=number]::-webkit-inner-spin-button { opacity: 1; }OutputThe above shows the following output −

388 Views
Use the translate() method to translate canvas. HTML5 canvas provides a translate(x, y) method which is used to move the canvas and its origin to a different point in the grid.Here argument x is the amount the canvas is moved to the left or right, and y is the amount it's moved up or downExample #test { width:100px; height:100px; margin:0px auto; } ... Read More

141 Views
Internet Explorer 11 does not support the element. Add support using Modernizr of the following JS −document.createElement('main');Adding the above element, will not give you the element for the browser, therefore, you need to use the following CSS finally −main { display:block; }

3K+ Views
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.ExampleLet us see an example of SVG − #svgelem { position: relative; left: 50%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } SVG HTML5 SVG Circle To center it, add the CSS like the following −# svgelem { margin-left:auto; margin-right:auto; display:block; }