Standards compliance and show-hide div

[John Doe]

I have a webpage which shows and hides divs as a method of
navigation. It works great in the ever evil IE. It works not so
great (read not at all) in any standards compliant browser. I
haven't ever bothered with standards compliance type stuff before,
but am slowly converting. For now I just want to get things working
on standards compliant browsers, later I'll actually go fully
standards compliant for my web pages. Could someone give me an idea
of what the problem might be?
The function that shows a particular area of the site looks like this
(note that if not fed a value, it determines the section to display
based on an anchor in the url, a requirement for the content
management system that I am using):
<code>
function showBlog(bID) {
if(arguments.length == 0 ) {
bID=0;
if(document.location.hash != "") {
BID="item"+document.location.hash.substr(1);
for(i=0;i<myBlogs.length;i++){
if(myBlogs[0] == BID) {
bID=i;
}
}
}
}
if(bID < myBlogs.length) {
myBlogs[bID][1].style.display='block';
}
if(bID != 0) {
pBID = bID - 1;
myBlogs[bID][3].innerHTML="<< "+myBlogs[pBID][2];
} else {
myBlogs[bID][3].style.display='none';
}
if(bID != myBlogs.length-1) {
nBID = bID + 1;
myBlogs[bID][4].innerHTML=myBlogs[nBID][2]+" >>";
} else {
myBlogs[bID][4].style.display='none';
}
}
</code>

Throughout the page little snippets like the following appear which
define (as divs) the various sections to be manipulated:
<code>
<script>
myBlogs.push(["item000208",item000208,"Poetry Reading", plink000208,\
nlink000208]);
</script>
<div class="blogbody" id="item000204" style="display:none;">
</code>



Anyone who can help will be greatly appreciated.

 

[Fred Oz]

I have a webpage which shows and hides divs as a method of
navigation. It works great in the ever evil IE. It works not so [...]
The function that shows a particular area of the site looks like this
(note that if not fed a value, it determines the section to display
based on an anchor in the url, a requirement for the content
management system that I am using):

It would be better if you post a minimal example of working code
(at least working in IE). Below are some hints, it gets you
part of the way but I don't have time to fully reverse engineer
your page from the snippets posted.

And please don't use tabs for blocking code, replace them with 2
(preferred) or 4 spaces before posting.

<code>

Is this just for posting here? Ditch it, the correct tag is:

function showBlog(bID) {
if(arguments.length == 0 ) {
bID=0;
if(document.location.hash != "") {
BID="item"+document.location.hash.substr(1);
for(i=0;i<myBlogs.length;i++){

You introduce myBlogs without ever declaring it. I presume your
real page does so, I've just guessed at it below.

if(myBlogs[0] == BID) {
bID=i;
}
}
}
}
if(bID < myBlogs.length) {
myBlogs[bID][1].style.display='block';

Unless you explicitly want 'block? Set it to '' and you'll get
the default (which, for divs, is block).

}
if(bID != 0) {
pBID = bID - 1;
myBlogs[bID][3].innerHTML="<< "+myBlogs[pBID][2];

innerHTML is not liked very much, it's not part of the W3C spec,
but it is supported by most browsers. It should not be causing
a problem here.

} else {
myBlogs[bID][3].style.display='none';
}
if(bID != myBlogs.length-1) {
nBID = bID + 1;
myBlogs[bID][4].innerHTML=myBlogs[nBID][2]+" >>";
} else {
myBlogs[bID][4].style.display='none';
}
}
</code>

Throughout the page little snippets like the following appear which
define (as divs) the various sections to be manipulated:
<code>
<script>

myBlogs.push(["item000208",item000208,"Poetry Reading", plink000208,\
nlink000208]);

No need for the '\' as a continuation line, just put a return
after the comma ',':

myBlogs.push(["item000208",item000208,"Poetry Reading",
plink000208,nlink000208]);

Referring to elements by their ID is an IE thing. You can't
refer to an element with id="item000208" that way, use:

<script type="text/javascript">
item000208 = document.getElementById('item000208');
plink000208 = document.getElementById('plink000208');
nlink000208 = document.getElementById('nlink000208');

myBlogs.push(["item000208",item000208,"Poetry Reading",
plink000208,nlink000208]);
</script>

I have kept the variables global here 'cos I think that's what
you need.

</script>

And here is another error (maybe...) - your script referring to
the div must be after it, otherwise you will be looking for an
element that has likely not loaded into the document yet (but
since your script and div refer to different anchors, this may
not be an error in your real page).

<div class="blogbody" id="item000204" style="display:none;">
</code>

Lastly, I can't see that this page is going to degrade
gracefully at all. Better to ensure your page works without
JavaScript, then add scripting to enhance it. All those hidden
divs can be hidden when the page loads if JS is enabled,
otherwise they should display and be functional.


Come back if you have any more issues, but please post a minimal
(perhaps partially) working example. Otherwise post an
explanation of what you are trying to do and we can help make
it work even better.

 

[John Doe]

Thanks for the pointer (on the code). All I needed was a pointer, I
didn't expect anyone to reverse engineer anything in order to hand me a
solution on a platter. I'm willing to do some of the leg work. I use
getElementById in my coding these days, but didn't when I coded that
page; I imagine that's it. As to the degrading, that's another thing on
the list to fix once it works with the JS (Don't have time to properly
reengineer it from scratch, have to do a little bugfix here, a little
bugfix there, catch as catch can). I'm sure you're right that it is
better to code w/o js first and then with js, but as I said, until
recently I didn't really give a durn about standards et al. Now that I
do, I'm slowly reworking old projects into nice compliance, but the
emphasis is on slowly.

As to the non-functional and extraneous code. I apologize. I know
better than to cut and paste from a content-management generated page.
Should have worked up a demo as I've done in solving the problems of
several other posts here recently.

The <code> tags were simply a human readable way of pointing out that my
cut from the website was beginning. It's a pretty standard convention
everywhere but (apparently) this newsgroup. As the <script> tag in my
second snippet would indicate I do have at least that much understanding
of JS. Besides without a script tag it wouldn't work in IE either. vi
tabstop=2 keeps my spacing neat for me. That's why I sometimes forget
to fix it for others. Again, my apologies.

Also thanks for the tip about display='' to get default functionality.
Doesn't really matter here, but good coding practice and may come in
handy elsewhere.

Thanks!

I have a webpage which shows and hides divs as a method of
navigation. It works great in the ever evil IE. It works not so [...]
The function that shows a particular area of the site looks like this
(note that if not fed a value, it determines the section to display
based on an anchor in the url, a requirement for the content
management system that I am using):

It would be better if you post a minimal example of working code
(at least working in IE). Below are some hints, it gets you
part of the way but I don't have time to fully reverse engineer
your page from the snippets posted.

And please don't use tabs for blocking code, replace them with 2
(preferred) or 4 spaces before posting.

<code>

Is this just for posting here? Ditch it, the correct tag is:

function showBlog(bID) {
if(arguments.length == 0 ) {
bID=0;
if(document.location.hash != "") {
BID="item"+document.location.hash.substr(1);
for(i=0;i<myBlogs.length;i++){

You introduce myBlogs without ever declaring it. I presume your
real page does so, I've just guessed at it below.

if(myBlogs[0] == BID) {
bID=i;
}
}
}
}
if(bID < myBlogs.length) {
myBlogs[bID][1].style.display='block';

Unless you explicitly want 'block? Set it to '' and you'll get
the default (which, for divs, is block).

}
if(bID != 0) {
pBID = bID - 1;
myBlogs[bID][3].innerHTML="<< "+myBlogs[pBID][2];