Javascript

Find if an element is completely visible in the viewport

Here is the JS code to find out if a given element on the DOM is completely visible in the browser window viewport or not: function isInViewport(element) { var rect = element.getBoundingClientRect(); var html = document.documentElement; if( rect.top >=0 && rect.left >=0 && rect.bottom <= (window.innerHeight || html.clientHeight) && rect.right <= (window.innerWidth || html.clientWidth) )… Continue reading Find if an element is completely visible in the viewport

Javascript

Problem with using ‘new’ for Inheritance

Imagine you have the following block of code. function Animal() { this.offspring = []; } function Dog() { } Dog.prototype = new Animal(); Dog.prototype.constructor = Dog; var d1 = new Dog(); var d2 = new Dog(); var pup = new Dog(); d1.offspring.push(pup); d2.offspring; // Does ‘d2.offspring’ have a pup in it? Well it turns out… Continue reading Problem with using ‘new’ for Inheritance

Javascript

Accessing parent prototype functions from Child

Consider the following code: function Parent() {} Parent.prototype.display = function() { console.log(‘Parent’); } function Child() {} Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; Child.prototype.display = function() { console.log(‘Child’); } var c = new Child(); c.display(); // ‘Child’ In the above code, the final line will print ‘Child’ because c is an object of ‘Child’. Now, if… Continue reading Accessing parent prototype functions from Child

Javascript

Creating abstract class in Javascript

An abstract class is a ‘class’ that is used just for inheritance. We should not be creating objects directly from abstract classes. Here is the code: function Car(name) { if(this.constructor === Car) { throw ‘Cannot instantiate abstract class’; } this.name = name; } function i12() { Car.call(this, ‘i12′); } The key here is the ‘constructor’… Continue reading Creating abstract class in Javascript

Javascript

How to create a revocable function to grant/revoke access to any other function?

The following code will show you how to create a function ‘revocable’ that will be used to grant/revoke access to other functions. The function that will be tested here is the add function to add 2 numbers. But the ‘revocable’ function is good enough to work for other functions as well. function add (x, y)… Continue reading How to create a revocable function to grant/revoke access to any other function?

Javascript

Highlight all occurrences of text in a container

Here is the JQuery code to highlight all occurrences of a given text in a container: $(“.container:contains(‘Google’)”).html(function(_, html) { return html.replace(/(Google)/g, ‘<span style=”background-color: yellow;”>$1</span>’); }); The above block will change all occurences of the text ‘Methods’ within an element of class ‘container’ and make the background color of the text yellow by inserting a new… Continue reading Highlight all occurrences of text in a container