Nicolas R

Hi Mark,
I'm Nick and I'm having a very strange problem with a javascript I'm
writting. This is my first attempt to create a script from scratch
(almost) and that's why I'm very puzzled about this.
The demo is on this page: [URL]

The main problem is in line 40 and I have included a small explanation there.

The script works as follows:
1) When the page loads, all the child elements in a specified parent
element are assigned as "inactive" (display:none in the CSS) except
the first one
2) While this happens, the script creates an array with all the child
elements and their ID
3) If a cookie exists, it expands the element defined in the cookie
(.className='active') and it should highlight the corresponding link
(again, .className='active')
4) If a cookie does not exist, it highlights the first link so that to
correspond with the first expanded element
5) When a user clicks on a link, the link and the element the user
whises to display are passed to the script
6) The script first hides all elements, creates a cookie on which tab
the user is currently seeing, highlights the link he clicked, and then
shows the correct element

The problem is here.. When a user clicks on a link to expand an
element, the script correctly changes the link's class to 'active'
(and the class of all other links to 'inactive')
However, when the page is loaded and a cookie exists even though the
correct element is displayed (according to the cookie), and even
though the function to highlight the corresponding link is called when
the correct element is displayed, the link's class will not change. I
have no idea why this happens. All the variables seem to be ok. It
should work ok in both instances (when the user clicks on a link and
then the page is reloaded) because the function is called with the
same variables.

So, the main problem is line 40, presumably.
I think only functions loadGallery(line 16), showImage(31) and
highlightLink(36) are relevant to this problem

Alright, thanks a lot mate, hopefuly you will get this message and be
able to give a hand here

Cheers

Mark,
thank you for your quick reply!
I have just updated the script, modified the css a bit and added a
"previous" "next" function   (but the cookie problem still exists).

I would prefer it if I could do this without adding extra markup in
the HTML, but if that's the best method I would go for it. Isnt there
a way to retrieve the object, given that I already have the link from
the cookie?

Cheers

Mark, thank you for your reply
I did what you said and it works just fine!!:) The previous next also
works now, cheers mate!
It seems however that the script takes a bit to run through, for a
second you can see the other images before the script changes their
className.

I'm sure there are a lot of ways to get the whole script running with
less code and html markup, but what's the most obvious "useless" code
you can spot and be removed so that to minimise the time needed for
the script to run?

Many thanks, cheers

> So how do you find the script?

honestly very good. The way it links to the anchors is one of my personal
favourites due to the way it degrades to produce predictable and sensible
behaviour - I use the same technique where I can.

I have only one small criticism; the cookie retrieval script could
potentially make mistakes if document.cookie was like this:

bazfoo=bar; foo=buzz;

if you look for "foo" you will get the wrong one. However, that should not
matter with the cookie names you are using, and it is a _very_ common
mistake made by almost all cookie scripts, so you are certainly not alone.

since your cookie names are ok, there is no need to change it, but for more
generic use, it is important to make sure you do not fall into that trap.
The easy way to avoid it is to use split() to get each name=value pair, then
again to break that into a separate name and value. You can then perform an
exact match on the names to find the one that matches. If you are
interested, I have more details in my tutorial:
http://www.howtocreate.co.uk/tutorials/javascript/cookies

Nicolas,

> it occurs in Opera and IE while Firefox seems to do just fine.

This caught me a little by surprise, but the reason is fairly simple. You
are using the .indexOf method on an array, not a string. indexOf is a method
of string objects, not array objects. For some reason, Mozilla/Firefox
implements it on arrays as well. That is an extension, so do not use it. If
you want to check for the existence of a value inside an array, you should
write your own function to check them:

function hasValueInside(oNeedle,oHaystack) {
  for( var i = 0; i < oHaystack.length; i++ ) {
    if( oNeedle == oHaystack[i] ) { return true; }
  }
  return false;
}
...
if(hasValueInside(getInputs[y].nodeName.toLowerCase(),
  setEasyCompleteForElements)){