Skip to main content

Posts

Showing posts from March, 2016

AngularJS - Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily.  Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
Post a Comment
Read more

Server-Sent Events - One Way Messaging

<!DOCTYPE html> <html> <body> <h1>Getting server updates</h1> <div id="result"></div> <script> if(typeof(EventSource) !== "undefined") {     var source = new EventSource("demo_sse.php");     source.onmessage = function(event) {         document.getElementById("result").innerHTML += event.data + "<br>";     }; } else {     document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events..."; } </script> </body> </html>
Post a Comment
Read more

HTML Web Workers

<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p> <script> var w; function startWorker() {     if(typeof(Worker) !== "undefined") {         if(typeof(w) == "undefined") {             w = new Worker("demo_workers.js");         }         w.onmessage = function(event) {             document.getElementById("result").innerHTML = event.data;         };     } else {         document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";     } } function stopWorker() {     w.terminate();     w = undefined; } <
Post a Comment
Read more

Using HTML Geolocation

<!DOCTYPE html> <html> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Get Location</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() {     if (navigator.geolocation) {         navigator.geolocation.getCurrentPosition(showPosition);     } else {         x.innerHTML = "Geolocation is not supported by this browser.";     } } function showPosition(position) {     x.innerHTML = "Latitude: " + position.coords.latitude +     "<br>Longitude: " + position.coords.longitude; } </script> </body> </html>
Post a Comment
Read more

HTML Drag and Drop

<!DOCTYPE HTML> <html> <head> <style> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) {     ev.preventDefault(); } function drag(ev) {     ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) {     ev.preventDefault();     var data = ev.dataTransfer.getData("text");     ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Drag the image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
Post a Comment
Read more