Render ASP.NET TextBox as HTML5 Input Type Number

karthikeya Boyini
Updated on 25-Jun-2020 06:07:18

1K+ Views

To render ASP.NET TextBox as HTML5 input type “Number”, set type="number" directly on the textbox.Let us see an example of ASP.NET TextBox −You can also use the following dynamically created the control −TextBox tb = new TextBox(); tb.Attributes.Add("Type", "number");

Microsoft Equivalent for HTML5 Server-Sent Events

George John
Updated on 25-Jun-2020 05:59:49

141 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.

Client-side Image Processing with HTML

Samual Sam
Updated on 25-Jun-2020 05:58:37

450 Views

For client-side processing and uploading, you can try to run the following code −

What is the pushState State Object in HTML?

Jennifer Nicholas
Updated on 25-Jun-2020 05:57:12

238 Views

Use the pushSate object to update the page when the user navigates back through history. Let us see an example to include the selected color that creates a history entry −function display(color) {    var myState = { selectedColor: color },    myTitle = "Page title",    myPath = "/" + color;    history.pushState(myState, myTitle, myPath ); };Now we will use the popstate event to update the selected color −$(window).on('popstate', function(event) {    var myState = event.originalEvent.state;    if (statemyState {       selectColor( myState.selectedColor );    } });

Reconnect to WebSocket After Close Connection with HTML

Nitya Raut
Updated on 25-Jun-2020 05:55:58

5K+ Views

Recreate the socket to reconnect it. The websockets are designed to stay open. You can also go with the method to have the server close the connection. Through this, the websocket will fire an onclose event and would amazingly continue attempting to make the connection.In addition, when the server is listening again the connection will be automatically reestablished.ExampleYou can try to run the following code to reconnect to WebSocket −// Socket Variable declaration var mySocket; const socketMessageListener = (event) => {    console.log(event.data); }; // Open const socketOpenListener = (event) => {    console.log('Connected');    mySocket.send('hello'); }; // Closed ... Read More

Work with HTML5 Canvas Camera Viewport

George John
Updated on 25-Jun-2020 05:54:06

777 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();

Detect Dragleave Event in Firefox with HTML

Krantik Chavan
Updated on 25-Jun-2020 05:44:27

186 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');    } });

Render Thin Fonts More Smoothly in CSS3 with HTML

Samual Sam
Updated on 25-Jun-2020 05:32:31

297 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

HTML5 Input Type File with Camera Capture for Images

Chandu yadav
Updated on 25-Jun-2020 05:31:47

410 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]);    } }   

HTML5 Data Attribute Type Casting: Strings and Numbers

Daniol Thomas
Updated on 25-Jun-2020 05:31:11

175 Views

For data-attribute typecasting of Numbers and String, use −[...document.querySelectorAll("a")].forEach(a =>    console.log("type: %s, value: %o", typeof a.dataset.value, a.dataset.value) );The above is for the following data-attributes −6.0 6.5

Advertisements