Preparing your Web browser to view e-Marketing Spots

In this lesson, you prepare your Web browser by creating bookmarklets to show and hide the e-Marketing Spot information. A bookmarklet is a small snippet of JavaScript bookmarked in your Web browser. The bookmarklet typically runs within the context of the current page and performs some changes to the page.

Procedure

Create the bookmarklet to show and hide e-Marketing Spots:

Create two new bookmarks:
- In Mozilla Firefox, right-click in the bookmark toolbar or menu and select New Bookmark.
- In Safari, click Bookmark > Add Bookmark > Create Bookmark.
- In Chrome, right-click in the bookmark toolbar and select Add page.
Name one bookmark Show eSpots and the name the other bookmark Hide eSpots.

Insert the following JavaScript code into the Location/URL field of the Show eSpots bookmark:


javascript:
var show=function(n){n.setAttribute('style','display:block;');};
var addborder=function(n,c){n.setAttribute('style','border:2px dashed '+c+';');};
var espotRegex=/(^genericESpot)|(^contentAreaESpot_)/i;
var allTags=document.getElementsByTagName('*');
for (var i=0;i<allTags.length;i++){
	var node=allTags[i];
	if(node.getAttribute){
		var className=node.getAttribute('class');
		if(node.getAttribute('id') && node.getAttribute('id').search(espotRegex) > -1)
		{
			show(node.childNodes[0]);
			addborder(node,'red');
		}
		if(className==='caption')
		{
			show(node);
		}
		if(className==='genericESpot')
		{
			addborder(node,'red');
		}
		if(className==='genericCSpot')
		{
			addborder(node,'blue');
		}
		if(className==='searchResultSpot')
		{
			addborder(node,'limegreen');
		}
		if(className==='ESpotInfo')
		{
			show(node);
		}
	}
}

Click OK.

Insert the following JavaScript code into the Location/URL field of the Hide eSpots bookmark:


javascript:
var hide=function(n){n.setAttribute('style', 'display:none;');};
var noborder=function(n){n.setAttribute('style', 'border:0;')};
var espotRegex = /(^genericESpot)|(^contentAreaESpot_)/i;
var allTags=document.getElementsByTagName('*');
for (var i=0;i<allTags.length;i++){
	var node=allTags[i];
	if (node.getAttribute) {
	    var className = node.getAttribute('class');
	    if (node.getAttribute('id') && 
	        node.getAttribute('id').search(espotRegex) > -1) { 
	      hide(node.childNodes[0]);
	      noborder(node);
	    }
	    if (className == 'caption') { 
	      hide(node)
	    }
	    if (className == 'genericESpot') { 
	      noborder(node);
	    }
	    if (className == 'genericCSpot') { 
	      noborder(node);
	    }
	    if (className == 'searchResultSpot') { 
	      noborder(node);
	    }
	    if (className == 'ESpotInfo') { 
	      hide(node);
	    }
	}
}

Click OK.