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
Javascript Articles
Page 512 of 534
Getting Safari to recognize <main> HTML 5
To make a element to be recognized by Safari:main { display: block; width: 800px; height: 800px; background-color: #0C0; }You need to focus on:main { display: block; }
Read MoreFull page drag and drop files website with HTML
For full page drag and drop files, try the following code:var myDrop = document.getElementById('dropZone'); function displayDropZone() { myDrop.style.visibility = "visible"; } function hideDropZone() { myDrop.style.visibility = "hidden"; } function allowDrag(ev) { if (true) { ev.dataTransfer.dropEffect = 'copy'; ev.preventDefault(); } } function handleDrop(ev) { ev.preventDefault(); hideDropZone(); alert('This is Drop!'); } window.addEventListener('dragenter', function(ev) { displayDropZone(); }); myDrop.addEventListener('dragenter', allowDrag); myDrop.addEventListener('dragover', allowDrag); myDrop.addEventListener('dragleave', function(e) { hideDropZone(); }); myDrop.addEventListener('drop', handleDrop);
Read MoreChrome and HTML5 GeoLocation denial callback
For timeout callback in Google Chrome, try the following code:_callback = false; function successCallback(position) { _callback = true; console.log('success'); } function errorCallback(error) { _callback = true; alert('error'); } setTimeout(function(){if(!_callback)console.log('ignored')}, 20000); navigator.geolocation.getCurrentPosition( successCallback, errorCallback, {timeout: 2000} );
Read MoreOverride HTML5 validation
To ignore HTML validation, you can remove the attribute on button click using JavaScript.Uer removeAttribute() to remove an attribute from each of the matched elements. First Name: function display(id) { document.getElementById(id).value = document.getElementById(id).removeAttribute('required'); }
Read MoreHow to keep audio playing while navigating through pages?
To continue loading audio to play while you are navigating through pages, try the following:Use Ajax to load content History API’s pushState() can also be used to alter URL without page reload. History.js should be used for consistent behavior across multiple browsers.The pushState() has three parameters: State object For new entry created by pushState() Title: You can pass a short title URL: New history entry's URL
Read MoreMove an HTML div in a curved path
To move an HTML div in a curved path, use any of the following: CSS Transitions JavaScript (jQuery) HTML5 CanvasTry JavaScript to make it work in every browser.Use the animate() method. The animate() method performs a custom animation of a set of CSS properties.The following is the syntax:selector.animate( params, [duration, easing, callback] );Here is the description of all the parameters used by this methodparams − A map of CSS properties that the animation will move toward.duration − This is an optional parameter representing how long the animation will run.easing − This is an optional parameter representing which easing function to use for the ...
Read MoreThe dragLeave event fires before drop for HTML5 drag and drop events
To solve this issue for drag and drop event, dragLeave fires before drop sometimes:onDragOver = function(e) { e.stopPropagation() } onDrop = function(e) { /* for drop */ }Under drop, you can set this:function drop(ev) { event.preventDefault(); var data=event.dataTransfer.getData("Text"); event.target.appendChild(document.getElementById(data)); }
Read MoreUIWebView HTML5 Canvas & Retina Display
To place the retina size image into an HTML5 canvas, try the following code with canvas:var context = myCanvas.getContext("2d"); context.attr("width", width * window.devicePixelRatio); context.attr("height", height * window.devicePixelRatio); context.scale(window.devicePixelRatio, window.devicePixelRatio); context.drawImage(img, x, y, width, height);
Read MoreAny ideas on how to prepare for the future of Flash/ Flex/ HTML5 Development?
In future, in the same like today, if any user still wants to use Flash they will have to enable Flash manually.HTML5 and Flex is the future.HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 11.0 will also support HTML5 functionality.The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, ...
Read MoreHTML5 / JS storage event handler
Storage event handlers only fire if the storage event triggered by another window. You can try to run the following code:// event handler window.addEventListener('storage', storageEventHandlerFunc, false); function storageEventHandlerFunc(evt) { alert("Storage event called key: " + event.key ); switch(event.key){ case 'one': case 'two': batteryDCMeter(); break; case 'extPowerOn': rechargeBattery(); break; } } sessionStorage.setItem("someKey", "someValue");
Read More