add html instead of image in this statement

[toolman]

Hi,

 

I have the following script which displays a banner image based on a cookie. It also displays a banner if there is no cookie. What I would like to do is to display the banners based on cookies, but instead of displaying the "no-cookie.gif" image, I want to insert some HTML content.

 

What would be the best way to do this?

 

 

$( document ).ready(function() {
    var acode = getVar('agent');
    if (code) SetCookie("code", code, 1);
    else
        code = ReadCookie("code");
    
    var imgsrc = "images/" + code + ".gif";
    var img = new Image();
    
    img.onerror = function (evt) {
          document.getElementById("headimg").src = "images/no-cookie.gif";
      }
    
    img.onload = function (evt) {
          document.getElementById("headimg").src = imgsrc;
        
      }
   
    
});

 

Thanks!

[requinix]

Use CSS classes.

 

Put all the HTML you want into the header thing: the image as one thing, the "some HTML content" as another (but put inside a container like a DIV or SPAN). Put a class on each indicating when you want it to show, as in

<div id="header" class="has-cookies no-has-cookies">
	<img id="headimg" class="cookies">
	<div class="no-cookies">(whatever)</div>
</div>

Create CSS rules like

div#header.has-cookies > .no-cookies { display: none; }
div#header.no-has-cookies > .cookies { display: none; }

1. header is "empty" by default because it has both of the has-cookies/no-has-cookies classes

2. Your Javascript removes the has-cookies or no-has-cookies class (whichever shouldn't be there) which causes the appropriate content to appear

3. If they have cookies you also set the headimg image (you should do that before #2)

 

Some of this code looks a bit off so I tried to fix it, including making it use jQuery for real.

$( document ).ready(function() {
	var code = getVar('agent');
	if (code) {
		SetCookie("code", code, 1);
	} else {
        	code = ReadCookie("code");
	}

	var img = new Image();
	var imgsrc = "images/" + code + ".gif";

	img.onerror = function (evt) {
		// $("#headimg").attr("src", "images/no-cookie.gif");
		$("#header").removeClass("has-cookies");
	}

	img.onload = function (evt) {
		$("#headimg").attr("src", imgsrc);
		$("#header").removeClass("no-has-cookies");
	}

	img.src = imgsrc;
});

Edited November 19, 2014 by requinix