- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 601 Articles for Front End Scripts
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
69 Views
To achieve your goal for HTML5 Server-Sent Events −Try polyfillIt would work for IE10 and IE11 as well. It starts with −if ("EventSource" in global) return;It only runs in web browsers that do not support EventSource.Refer the following GitTry websockets Works for IE10 and IE 11 and it also provides bi-directional communication options.
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
163 Views
To detect HTML5 audio MP3 support, use the Modernizr library.As stated in the official specification − Source − Screenshot from the official Modernizr documentation For detecting HTML5 audio MP3 support, you can also check the User-Agent to detect which browser is used.You can also use JavaScript to test −var x = document.createElement('audio'); return !!(x.canPlayType && x.canPlayType('audio/mpeg;').replace(/no/, ''));
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
244 Views
Use the JavaScript FileReader to allow users to choose an image.Let us see an example − Here is the JS −function readURL(input) { if (input.files && input.files[0]) { var r = new FileReader(); r.onload = function (ev) { $('#myid).attr('src', ev.target.result); } reader.readAsDataURL(input.files[0]); } }
![Samual Sam](https://www.tutorialspoint.com/assets/profiles/13514/profile/60_83486-1512649303.jpg)
247 Views
To render thin fonts more smoothly, use −text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;For Google Chrome, use −-webkit-font-smoothing:antialiased !important;You can enhance the performance like this −text-rendering: auto text-rendering: optimizeSpeed text-rendering: optimizeLegibility text-rendering: geometricPrecision text-rendering: inherit
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
513 Views
For viewport usage, use the drawImage() method.ctx.clearRect(0,0,game.width,game.height); // a full background image ctx.drawImage(background,cropLeft,cropTop,cropWidth,cropHeight, 0,0,viewWidth,viewHeight);For the game −var myGame = document.getElementById("game"); var myCtx= myGame.getContext("2d"); myCtx.clearRect(0,0,game.width,game.height); // using drawImage() method myCtx.drawImage(background,left,top,350,250,0,0,250,150); myCtx.beginPath(); myCtx.arc(130,80,12,0,Math.PI*2,false); myCtx.closePath(); myCtx.fill(); myCtx.stroke();
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
113 Views
You need to track which elements dragenter and dragleave had been triggered on. Listening dragenter and dragleave on an individual element will capture not only events on that element but also events on children.$.fn.draghover = function(options) { return this.each(function() { var collection = $(), self = $(this); self.on('dragenter', function(ev) { if (collection.length === 0) { self.trigger('draghoverstart'); } collection = collection.add(ev.target); }); self.on('dragleave drop', function(ev) { collection = collection.not(ev.target); if (collection.length === 0) { self.trigger('draghoverend'); } }); }); };Listen for events −$(window).draghover().on({ 'draghoverstart': function() { alert(‘dragged into the window'); }, 'draghoverend': function() { alert('dragged out of window'); } });
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
7K+ Views
The easiest way to reload the current page without losing form data, use WebStorage where you have -persistent storage (localStorage) or session-based (sessionStorage) which remains in memory until your web browser is closed.Try this when the page is about to reload,window.onbeforeunload = function() { localStorage.setItem(name, $('#inputName').val()); localStorage.setItem(phone, $('#inputPhone').val()); localStorage.setItem(subject, $('#inputAddress').val()); }Now check it like −window.onload = function() { var name = localStorage.getItem(name); var phone = localStorage.getItem(phone); if (name !== null) $('#inputName').val(name); if (phone !== null) $('#inputPhone').val(phone); // ... }
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
2K+ Views
Use input type=”datetype”. The datetime input type is used in HTML using the . Using this, allow the users to select date and time. A date time picker popup is visible whenever input field is clicked. HTML input datetime Details: Student Name Exam Date and Time