Tag Archives: JavaScript

Detect AdBlock with JavaScript

If you would like to know whether a visitor on your website is blocking Google AdSense and other online advertising networks or not, you can easily do that with the help of some JavaScript. Here are some approaches:

1. You can check for the existence of window.google_jobrunner after the page has finished loading. We are using setTimeout to take care of asynchronous Google AdSense that may not load immediately.

2. The other more popular approach is that you create a file called /ads.js in your server and inside that file, set a variable as false. AdBlockers routinely block JavaScript files that have *.ads* in the name and hence, the variable will not be set if the ad blocker is active.

Now put this somewhere inside the HTML of your main web page.

3. Here’s another option that works with the new Asynchronous Responsive Google Ads.

In the new format, the ads are inserted using the INS tag. The snippet checks for the length of the tags that are contained inside the INS tag. If it is 0, Google Ads were blocked and the user is shown a custom message.

We also need to set the CSS display property as block as AdBlock may be blocking ads with the “adsbygoogle” class by simply hiding them on the screen with CSS.

Convert HTML Content into Plain Text

Say you have an HTML snippet and you would like to extract the plain text from the snippet without any of the HTML tags. This may come handy when you are sending mail through a program that doesn’t support HTML Mail.

The easiest way would be to strip all the HTML tags using the replace() method of JavaScript. It finds all tags enclosed in angle brackets and replaces them with a space.

The problem with the above approach is that it may fail for malformed HTML or when the HTML content contains entities like dashes, ampersands and other punctuation codes. The workaround is simple though.

How to Use the Web Speech API in HTML5

The Voice Dictation app uses the Web Speech API to convert your spoken words into text. There’s a simple JavaScript API that lets you integrate Speech Recognition on any website.

The Web Speech API is currently implemented in Chrome and Firefox.

Create HTML Elements with JavaScript

You can create HTML elements directly with JavaScript /jQuery and also assign data attributes, CSS style, click handlers, classes and IDs to these elements through chaining.

Here’s an example.

Turn an Entire DIV into a Clickable Link

If you have been to a Pinterest like site that uses the grid masonry style layout, you may have noticed that one can hover over any region inside the box and its clickable.

A typical DIV is written using the following markup

There’s a outer DIV and it has elements like the title, description and a link. The requirement is that when someone hovers their mouse over the DIV, it should point to the hyperlink that’s contained inside the DIV.

This can be done in two ways – using CSS or using jQuery.

The CSS approach – Make the Whole DIV clickable

Here we assign an absolute position to the inner <a> tag such that it occupies the entire DIV and we also set the z-index property to 10 to position the link above all the other elements in the DIV. This is the easiest approach and the semantic structure is maintained.

jQuery – Make Div Clickable

Here we use jQuery to determine the hyperlink of the first a element inside the DIV and redirects the user to that link when the DIV is clicked.

The cursor properties of the DIV are sent to “pointer” on hover to indicate to the user that the DIV is clickable. Similarly, the text in the status bar is changed to the URL that the DIV is pointing to.

Image Fade on Hover Effect with jQuery

I am using the Pinterest style grid layout for Podcast Gallery and Zero Dollar Movies. When you hover your mouse over any image thumbnail, it fades with a slow transition and goes back to its original state as soon you move the mouse out.

Internally, the fade-in on mouse-over effect is achieved by changing the opacity parameter of the image which the slow speed is achieve using CSS3 transitions. Here’s the code: