Javascript Class issue with IE 1

[Borvik]

Hello.

I'm building a page that will show four bulletins on it.

For browsers that support JavaScript it will hide all but one, and choosing a link will make another visible. For those that don't support JavaScript it will use the anchor tag. The function returns false to cancel the anchor link.

For some reason the JavaScript will just not work in IE. I don't receive any errors, yet nothing changes. The anchor link doesn't even work - probably due to a default return value of FALSE for functions.

Here is the JavaScript I am using:

function hideBulletin(index){
	var doc = document.getElementById('bulletin_'+index);
	if( doc != null ){
		alert('changing: ' + index);
		doc.style.display = 'none';
		doc.style.border = '0';
	}
}

function showBulletin(index){
	//alert(index);
	var i = 0;
	for( i = 0; i < 4; i++ ){
		hideBulletin(i);
	}
	var doc = document.getElementById('bulletin_'+index);
	if( doc != null ){
		doc.style.display = 'block';
	}
	return false;
}

function startBulletin(){
	showBulletin(0);
}

function addLoadEvent(func) { 
	var oldonload = window.onload; 
	if(typeof window.onload != 'function'){
		window.onload = func;
	}else{
		window.onload = function(){
			if(oldonload){
				oldonload();
			}
			func();
		}
	}
}

addLoadEvent(startBulletin);

There is CSS defined for the divs in question - each is defined with a bottom border - except for the last one (used as a separator for non-javascript browsers).

Any idea on how to get this working in IE? If you need the CSS I can post that too.

BTW - I should mention I can only test on IE7 (upgraded XP machines, and Vista).

Thanks.

 

[BabyJeffy]

Add in some alerts! Then you will know exactly what code is and is not running. You can use this to identify the exact line of code that is not behaving as you expect.

I would also suggest you take the time to validate your page first. Often these kinds of problems exist because you don't have a validating page.

I am more likely to be willing to help if you post a link to the page - or the code for a test page that shows the problem. I bet most people are, too

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Borvik]

The page isn't 100% valid, though there isn't much I can do about it - an included file causes the page to be invalid.

I removed the offending included files, and the page validates, and still doesn't work in IE.

I thought *maybe* someone could spot something from the javascript.

Here is the site for reference sake:

http://www.duttonurc.org/?page=about/bulletin

I have attempted to use alerts - it still wasn't playing nice for me. Those null checks are there to catch if a div was not found (not output by the PHP).

Thanks.

 

[tsuji]

Let all the anchor names include the "#".
[tt]> [/tt]<a name="bulletin_0"></a>
[tt] <a name="[red]#[/red]bulletin_0"></a>[/tt]
etc

 

[BabyJeffy]

I have attempted to use alerts - it still wasn't playing nice for me.

We are in a technical forum here. Nice? Come on! What happened when you placed alerts on every (second) line - allowing you trace each command. When did the alerts stop?

Help us to help you.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Borvik]

I changed the showBulletin function to the following:

function showBulletin(index){
	//alert(index);
	var ret = true;
	var i = 0;
	for( i = 0; i < 4; i++ ){
		hideBulletin(i);
	}
	var doc = document.getElementById('bulletin_'+index);
	if( doc != null ){
		alert(doc.style.display);
		doc.style.display = 'block';
		alert(doc.style.display);
	}
	alert('completed');
	ret = false
	return ret;
}

All the alerts display.

I get 'none', 'block', and 'completed'.

I changed hideBulletin to:

function hideBulletin(index){
	var doc = document.getElementById('bulletin_'+index);
	if( doc != null ){
		//alert('changing: ' + index);
		alert(index+': '+doc.style.display);
		doc.style.display = 'none';
		doc.style.border = '0';
		alert(index+': '+doc.style.display);
	}
}

And I got:
'0: '
'0: none'
'1: '
'1: none'
'2: '
'2: none'

Everything seems to run - it just doesn't change what is displayed.

 

[Borvik]

Thanks tsuji, but I'm sure that's not why the anchor links are working. I'm pretty sure it's because JavaScript is enabled and the function is returning false - cancelling the link action.

Besides

http://www.w3schools.com/html/html_links.asp

and

http://www.w3.org/TR/REC-html40/struct/links.html

shows that I am doing the anchor name correctly.

 

[tsuji]

Okay, if you insist. Change the anchor name to arbitrary other than the same string as the id.

[tt]> [/tt]<a name="bulletin_0"></a>
[tt] <a name="[red]x[/red]bulletin_0"></a>[/tt]

and then the anchor link:

[tt]> [/tt]<a href="#bulletin_0" onclick="return showBulletin('0');">Current</a>
[tt] <a href="#[red]x[/red]bulletin_0" onclick="return showBulletin('0');">Current</a>[/tt]

No name/id collision is essential to the success.

 

[Borvik]

That's right - I must have skipped over that in the articles.

I do remember now the w3 link mentioned that the name of the anchor tags were in the same namespace as the id attribute.

That worked!