HTML5 Canvas and z-index Issue in Google Chrome

Chandu yadav
Updated on 04-Mar-2020 06:23:16

838 Views

When we apply z index to a canvas whose position is fixed, it stop causes chrome to render all other elements which have position:fixed properly. This only happens if canvas is greater than 256X256 px in size.Wrap both h1 and canvas with the fixed div and solves the issue −    Test Title     The following is the CSS −h1{    position: fixed; } body{    height: 1500px; } canvas{    position: fixed; z-index: -10; }

Make Menu Visible in IE8 with HTML

Lakshmi Srinivas
Updated on 04-Mar-2020 06:22:09

128 Views

One of the divs, when placed in another style sheet, can make menu invisible in Internet Explorer.If opacity property is used which is not a cross-border solution, it should be like the following to display −opaque {      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; // first      filter: alpha(opacity=90);  // second }

Basic Calculator II in Python

Arnab Chakraborty
Updated on 04-Mar-2020 06:20:53

957 Views

Suppose we have to implement a basic calculator to evaluate a simple expression string. The expression string will hold only non-negative integers, some operators like, +, -, *, / and empty spaces. The integer division should take the quotient part only.So if the input is like “3+2*2”, then the output will be 7.To solve this, we will follow these steps −define a stack s, i := 0, x := an empty stringfor each character j in sif j is not a blank characterappend j into xs := x, n := length of xwhile i < nif s[i] is ‘/’, thenincrease ... Read More

Get Address Latitude and Longitude using HTML5 Geolocation or Google API

karthikeya Boyini
Updated on 04-Mar-2020 06:20:17

531 Views

In order to get latitude and longitude using an HTML5 Geolocation or any Google API, we need to add JavaScript for this. The script is as follows −if (navigator.geolocation) {    /*  If current position is obtained then there is success otherwise there is failure.    On failure, separate error message is shown  */        navigator.geolocation.getCurrentPosition(successFunc, errorFunc); }  else {        alert(‘Geolocation is not enabled in your browser. Please use a latest browser to supports it.'); }

HTML5 Semantic Elements and Old Browser Support

Ankith Reddy
Updated on 04-Mar-2020 06:19:30

298 Views

Internet Explorer 8 and older versions does not support semantic elements like nav, header and article. To style semantic elements, Modernizer is used. Some CSS can be added to block CSS by default.article, header, nav, section, footer {    display:block; }We can also create our own elements through JavaScript by writing following code −    document.createElement('nav'); //nav is semantic element    document.createElement('header'); //header is semantic element    document.createElement('article'); //article is semantic element

HTML5 Canvas and Select Drag and Drop Features in a JS Library

karthikeya Boyini
Updated on 04-Mar-2020 06:14:29

760 Views

If you want to use HTML5 canvas to draw shapes, texts and curves and also want to attach traditional DOM events like onClick or drag and drop functions, a crossbar framework Raphael is used for doing drag and drop or touch events.This technology uses SVG and XML for older versions of IE.  Drag and drag using HTML is shown below.  Example                    Raphaël · Drag-n-drop                                                   ... Read More

Use Multiple Click Events on HTML5 Canvas

usharani
Updated on 04-Mar-2020 06:13:50

470 Views

When there is a circle drawn on canvas and we put red color on half and grey color on a portion of a circle, then on clicking a red color, we call function1.On clicking grey part, function 2 is called and we need to use reusable path objects to store different parts, which we want to test. Click handler can be used to share the canvas and do our desired work. Path2D objects can be used to store path information.var path1 = new Path2D(); var path2 = new Path2D(); var newpaths = [path1, path 2];   // Array is ... Read More

Choose Selected Option on Page Load of Razor Html DropDownListFor

Samual Sam
Updated on 04-Mar-2020 06:13:12

204 Views

Shorthand is used to decide which option is selected on pageload of razor Html.DropDownListFor(). You can try to run the following code snippet −// return Boolean value @Html.DropDownListFor(m => m.Valeur, new List< SelectListItem > { //new list item list item1 is generated new SelectListItem { Value = "0" , Text = "Show", Selected = Model.Valeur == 0 }, new SelectListItem { Value = "1" , Text = "Hide", Selected = Model.Valeur != 0 }, }, new { @class = “selectnew" })

Materialize CSS Checkbox with Html CheckBoxFor

Ankith Reddy
Updated on 04-Mar-2020 06:08:57

232 Views

The only way to materialize CSS checkbox to work with Html.checkbox without disappearance of the checkbox to the left is by moving the hidden element to the bottom of the parent element.$("input[type='hidden']").each(checkbox1 (0,IsActive ) {    $(this).appendTo($(IsActive).parent()); });In this hidden element, IsActive is placed in the bottom of parent element thus removing the disappearance of the checkbox to left and thus materializing CSS checkbox to work with HTML.checkbox.

Stream Video File to HTML5 Video Player with Node.js

Prabhas
Updated on 04-Mar-2020 05:25:44

317 Views

Use createReadStream to send the requested part to the client. The function call createReadStream() will give you a readable stream. ExampleThe following is the code −stream = fs.createReadStream(path); stream.on('open', function () {    res.writeHead(206,{       "Content-Range":"bytes " + begin + "-" + end + "/" +total, "Accept-Ranges":"bytes",          "Content-Length":chunksize, "Content-Type":"new/mp4"    });    stream.pipe(res); });

Advertisements