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 15 of 33
Flexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. The flex property sets the flexible length on flexible items.For example −#container article { -webkit-flex: 1 1 auto; overflow-y: auto; height: 0px; /*here the height is set to 0px*/ }If you want a min-height, the use height: 100px; that it is exactly the same as − min-height: 100px;#container article { -webkit-flex: 1 1 auto; overflow-y: auto; height: 100px; /*here the height is set to 100px*/ }
Read MoreMouse event not being triggered on HTML5 canvas? How to solve it?
To trigger mouse event we can add −-webkit-transform: translate3d(0, 0, 0)In addition to this canvas can also be styled.Another way is to add a listener in the event mousemove,canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);By adding this listener, we can easily trigger a mouse move event in HTML5.
Read MoreUpload from local drive to local filesystem in HTML with Filesystem API
To upload from local drive to the local file system, we can use −Webkitdirectory attribute on − This allows the user to select a directory by the appropriate dialog box.Filesystem API is a sandboxed filesystem, which allows us to store files on client’s machine.File API allows us to read files. Files are accessible by elementAll of the above is working fine in Google Chrome.WebKit directory is a much better option among these. Use the following for directory −webkitRequestFileSystem( window.TEMPORARY, 5 * 1024 * 1024, function(_fs) { fs = _fs; }, ErrAbove, err and fs are −var fs, err = function(err) { throw err; };
Read MoreGenerating sound on the fly with JavaScript/ HTML5
The Web Audio API is used to control audio, which allows you to choose audio sources. You can also add effects; create audio visualizations, panning, etc.ExampleYou can try to run the following code snippet to generate sound −// use one context per document. Here we are creating one context for one document. You can create for other documents also var context = new (window.AudioContext || window.webkitAudioContext)(); // oscillator var os = context.createOscillator(); os.type = 'sine'; // sine is the default. So you can also use square, saw tooth, triangle os.frequency.value = 500; // setting the frequency Hz os.connect(context.destination); ...
Read MoreDoes HTML5 allow you to interact with local client files from within a browser?
HTML5 allows us to interact with local client files (local client files are the files that are locally stored in the user’s computer). This is possible because HTML5 provides powerful APIs (Application Programming Interfaces) which are the interfaces with the help of which binary data and user’s local file system can be accessed. With the help of these file APIs, web applications can read files, file directory, can drag and drop from desktop to browser.The following are the APIs that are used to access local client files −File System APIFile APIFile Writer APIThe following are some examples −With the help ...
Read MoreHow can I add video to site background in HTML 5?
Add a button to play or pause the video. Then we have styled the video to a hundred percentage height and width so that it covers the entire background.The following is the code snippet to set video as a site background in HTML5. Your browser does not support HTML5 video. The following is to pause the video −function display() { if (video.paused) { video.play(); btn.innerHTML = "Pause the video!"; } else { video.pause(); btn.innerHTML = "Play"; } }
Read MoreHow to replace default meta tag from “layout” with customizing meta tags in “view” with HTML?
Meta tags are used to store data about HTML documents such as who wrote it and the description of the document.The best solution is to define default tags in the application and overwrite default parameters in view. We can do so in PHP.Making changes in config file first −
Read MoreHow to save DIV as Image with HTM5 canvas to image with the extension?
DIV content can be saved as an image with the help of html2canvas() function in JavaScript. DIV tag defines a section in HTML document.Example Welcome This shows the division area named cpimg.The html2canvas() function save div as an image with the following code −html2canvas(document.querySelector(“#cpimg”)).then(canvas { document.body.appendChild(canvas) });It saves the referred div section “cpimg” into the image.
Read MoreHTML5/CSS align list-items depending on other columns mutual height
Align list-item with the help of flex. Flex will make columns flexible according to content. The wrapper will layout columns in a row..wrap{ display : flex }// This will help wrapper to become flexible .wrap.col{ flex: 1 0 33%; }Flex is basically a property which helps in making element flexible.Use the following to keep the lists vertically aligned to the bottom −.col .content { margin-top: auto; }
Read MoreHow to change date time format in HTML5?
The date-time format can be changed by using custom HTML5 elements. If we wish to change or override existing Html tags then we can do so with the help of shadow DOM.We can make customizable tags like −Here is an example −However, E10 and older versions do not support customizable tags; however, all newer versions support customizable tags.
Read More