Outline entry and dynamic change of picture and Internet Explorer

hcl-bot · December 20, 2004, 3:38pm

Hello, I have a form containing an outline. This outline consist of a table and many rows and cells.

Here’s an example of a row ( or outline entry):

When I click on the link (the one that calls the function “redirectToURL”), I want to change a picture (folderC.gif) to another one (folderO.gif).

The code below works flawlessly with anything related to Mozilla (Nescape, FireFox, …)… but with Internet Explorer, the .src seems to be changed (if I do an alert afterward), but the image is not correctly shown. Only a blank is shown (white) instead of the image.

Can someone help? I tried everything.

Thanks!

Pascal

Here’s my code:

/* Change the style of both the last selected folder, and the currently selected folder */

function setStyle(oldObj, newObj) {

if (oldObj) {

oldObj.parentNode.previousSibling.previousSibling.src = ‘folderC.gif’;

oldObj.style.backgroundColor = ‘#ffffff’;

oldObj.style.color = ‘#000000’;

}

if (newObj) {

newObj.parentNode.previousSibling.previousSibling.src = ‘folderO.gif’;

newObj.style.backgroundColor = ‘#004080’;

newObj.style.color = ‘#ffffff’;

}

return true;

}

function getElements(evt) {

/* Cross-browser way of getting the event object */

evt = (evt)? evt : ((event)? event : null);

/* Cross-browser way of getting the active element object */

elem = (evt.target)? evt.target : evt.srcElement;

/* Only care about A elements… */

if (elem.tagName == ‘A’) {

/* … that are “folders” */

if (elem.href.indexOf(‘redirectToURL’)!= -1) {

var obj = document.getElementById(idPrevious);

/* Change the style of the previous/current selected folder */

setStyle(obj, elem);

}

document.onclick = getElements;

hcl-bot · December 20, 2004, 3:42pm

Subject: Outline entry and dynamic change of picture and Internet Explorer

Does using .setAttribute(‘src’;‘folderO.gif’) work any better?

hcl-bot · December 20, 2004, 3:56pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

No, I have the same problem.It’s strange in IE. Sometimes the picture is shown correctly… but most often, only a blank is shown. I really think I tried everything, but if you have an idea, tell me.

Thanks again for your quick response!

Pascal

hcl-bot · December 20, 2004, 4:01pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

IE has known problems with manipulating table contents, particularly when DOM methods are used. I bet you’d find that if (in the code we went through previously) you named the images and went through document.images[nameIndex], the problem would go away.

hcl-bot · December 20, 2004, 4:29pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

Believe it or not, I still have the exact same problem.I assigned an id to each of my picture (with the solution you provided me a few days ago).

img_1, img_2, img_3 and so on.

Here’s the modified code:

/* Change the style of both the last selected folder, and the currently selected folder */

function setStyle(oldObj, newObj) {

var id;

if (oldObj) {

	id = oldObj.parentNode.previousSibling.previousSibling.id;

	document.images[id].src = 'folderC.gif';

	oldObj.style.backgroundColor = '#ffffff';

	oldObj.style.color = '#000000';

}

if (newObj) {

	id = newObj.parentNode.previousSibling.previousSibling.id;

	document.images[id].src = 'folderO.gif';

	newObj.style.backgroundColor = '#004080';

	newObj.style.color = '#ffffff';

}

return true;

}

I even tried to hardcore the id in the above function, without any success.

I also tried to access the picture using getElementById.

Thanks!

Pascal

hcl-bot · December 20, 2004, 4:36pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

Are you sure that the image paths are correct? I like to use absolute URLs to avoid trouble. Try this in the HTML Head Content:

“var dbURL = '” + @GetHTTPHeader(“Host”) + “/” + @WebDbName + “';”

Then you can use .src = dbURL + ‘/folderO.gif’. Just a thought.

hcl-bot · December 20, 2004, 4:43pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

I have already tried that. I tried hardcoding all my paths before and I just tried it again with the same problem (just in case).If I click, let’s say, on ten links, it could work on two of them (randomly)… quite strange. And again, no problem at all with Mozilla/Netscape/FireFox.

If I loop on all my images, and do an alert of the src attribute, it has been correctly changed. The result is just not always shown on the page. (hence the blank space).

I tried that in the past, and it has always worked fine. The only difference I can see is that I’m using this…

document.onclick = getElements;

… instead of the common onmouseover/onmouseout event to swap images.

Thanks for helping me!

Pascal

hcl-bot · December 20, 2004, 5:15pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

So the event is bubbling up, the src value is getting changed, but the picture stays the same. Looks like IE is not firing an event somewhere, or is firing things out-of-order. Maybe you can attach onclick event handlers directly to the links?

hcl-bot · December 21, 2004, 11:26am

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

I changed it just a little bit… and now it works better. It skips an image once in a while… but way better than before, even though it’s not perfect.

/* Change the style of both the last selected folder, and the currently selected folder */

function setStyle(oldObj, newObj) {

if (oldObj) {

	/* Previous folder */

	document.images[oldObj.id.replace('a_', 'img_')].src = 'folderC.gif';

	oldObj.style.backgroundColor = '#ffffff';

	oldObj.style.color = '#000000';

}

if (newObj) {

	/* Current folder */

	document.images[newObj.id.replace('a_','img_')].src = 'folderO.gif';

	newObj.style.backgroundColor = '#004080';

	newObj.style.color = '#ffffff';

}

return true;

}

/* Declare the object globaly to use it in other functions */

var elem;

function getElements(evt) {

/* Cross-browser way of getting the event object */

evt = (evt) ? evt : ((event) ? event : null);

/* Cross-browser way of getting the active element object */

elem = (evt.target) ? evt.target : evt.srcElement;



/* Only care about A elements... */

if (elem.tagName == 'a') {

	/* ... that are "folders" */

	if (elem.href.indexOf('redirectToURL') != -1) {

		/* Get the last selected folder from the cookie */

		var idPrevious = document.getElementById('entry').value;

		if (idPrevious != "") { var obj = document.getElementById(idPrevious); }

		/* Change the style of the previous/current selected folder */

		setStyle(obj, elem);

		/* Update the selected folder inside the cookie */

		var idCurrent = elem.id;

		document.cookie = 'entry=' + idCurrent + '; path=/; domain=mydomain.com';

		document.getElementById('entry').value = idCurrent;

	}

}

}

document.onclick = getElements;

/* Assign a unique ID to each outline entry */

function assignID() {

/* Get the outline container (DIV) */

var outline = document.getElementById('outline');

/* Get all table rows inside the <div> */

var trArray = outline.getElementsByTagName('tr');

for (var i=0; i < trArray.length; i++) {

	var linksArray = trArray[i].getElementsByTagName('a');

	/* Get the path argument in the href as the unique ID */

	var href = decodeURI(linksArray[linksArray.length-1].href.toLowerCase());

	var pos1 = href.indexOf('path=') + 5;

	var pos2 = href.length-3;

	var idEntry = FindReplace(href.substring(pos1, pos2),"' + string.fromcharcode(39) + '", "\'");

	/* Set the ID of the <A> tag */

	linksArray[linksArray.length-1].id =  encodeURI('a_' + idEntry);

	var imagesArray = trArray[i].getElementsByTagName('img');

	for (var y=0; y <= imagesArray.length; y++) {

		if (imagesArray[y].src.toLowerCase().indexOf('folder') != -1) { break; }

	}

	/* Set the ID of the <IMG> tag */

	imagesArray[y].id =  encodeURI('img_' + idEntry);;

}

/* Get the last selected folder from the cookie */

var idCookie = document.getElementById('entry').value;

if (idCookie != "") {

	var obj = document.getElementById(idCookie);

	/* Change the style of the current selected folder */

	setStyle(null, obj);

}

}

Setting an onclick event on each link would probably make it perfect. (like you suggested)

Do you know how to dynamicaly assign an event to an object using javascript?

I’m often using this:

document.onclick = getElements;

but this apply to all clicks on the page.

I tried obj.onclick = functionName, but it doesn’t seem to work.

Thanks a lot!

Pascal

hcl-bot · December 21, 2004, 1:39pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

Event assignment is easy. Create a funtion to handle the event, like this:

function handleClick(this) {

// do some stuff with this

}

Then assigning the function to the event is just a matter of doing this:

element.onclick = handleClick;

hcl-bot · December 21, 2004, 2:12pm

Subject: RE: Outline entry and dynamic change of picture and Internet Explorer

Oh well, I called my function like this:element.onclick = handleClick();

I forgot that we can’t include () in this situation.

Thanks a lot for all your help on this topic.

Pascal