How to Select / Deselect All Checkboxes using AngularJS

You have seen the example in Gmail and many other web applications where they allow users to select all checkbox items by simply clicking on “Select All” checkbox. I have also created a tutorial in jQuery which you can find here. Today let’s create the same using AngularJS.

10 Awesome HTML5 Canvas Examples

Canvas is a great feature in HTML5 that allows us to draw graphics on web browsers using JavaScript. For instance, it can be used to manipulate photos, draw and animate shapes, play videos or renders hardware-accelerated 3D graphics with WebGL support! Sky’s the limit. But it has also been used to make really awesome digital arts by pros… In past few months I have encountered many great examples of HTMl5 canvas, and today I am going to list some of them here for you to enjoy.

Select All Text In Element on Click (JavaScript OR jQuery)

To select all text inside an element such as DIV or Textarea, we can simply use JavaScript document.createRange() method to create a range, and than using range.selectNodeContents() we can set node range (start and end), after which use selection.addRange() to select the range of the element. JavaScript This JavaScript code does its primary function which is to select all the text inside an element, but we don’t want it annoyingly select everything every-time element is clicked. We also want the user to be able to select portion of the text whenever needed. 12345678910111213141516171819202122function selectText(id){     var sel, range;     var el = document.getElementById(id); //get element id     if (window.getSelection && document.createRange) { //Browser compatibility       sel = window.getSelection();       if(sel.toString() == ''){ //no text selection          window.setTimeout(function(){             range = document.createRange(); //range object             range.selectNodeContents(el); //sets Range             sel.removeAllRanges(); //remove all ranges from selection             sel.addRange(range);//add Range to a Selection.         },1);       }     }else if (document.selection) { //older ie         sel = document.selection.createRange();         if(sel.text == ''){ //no text selection             range = document.body.createTextRange();//Creates TextRange object             range.moveToElementText(el);//sets Range             range.select(); //make selection.         }     } } Usage : 123<div onclick="selectText(this.id)" id="elementID"> //Text </div> jQuery If you want to use it as jQuery code, just put the code inside jQuery “mouseup” event method, something like this: 12345678910111213141516171819202122$("#elementID").on('mouseup', function() {     var sel, range;     var el = $(this)[0];     if (window.getSelection && document.createRange) { //Browser compatibility       sel = window.getSelection();       if(sel.toString() == ''){ //no text selection          window.setTimeout(function(){             range = document.createRange(); //range object             range.selectNodeContents(el); //sets Range             sel.removeAllRanges(); //remove all ranges from selection             sel.addRange(range);//add Range to a Selection.         },1);       }     }else if (document.selection) { //older ie         sel = document.selection.createRange();         if(sel.text == ''){ //no text selection             range = document.body.createTextRange();//Creates TextRange object             range.moveToElementText(el);//sets Range             range.select(); //make selection.         }     } }); Your HTML: 123<textarea id="elementID"> //Some text here </textarea> Demo Click box below the select all text inside the box.

Adding Markers onClick in Google Map v3

If you are wondering how to add markers on Google Map, here’s the simple Javascript snippet that adds dragable marker on Google Map. Just click on Drop Marker button to drop marker on the Map.