Difference between Brochure & Product pages

[Jonathan Hunter]

I am going around in circles trying to implement a tabbed product description menu. I have embedded the CSS & JavaScript files into the header of the main product design & brochure design.

A long story short, the tabbed menu works fine in IE but in FireFox, the menu only works in brochure pages but not in the product pages.

I cannot seem to find why this is. Can anyone please help with some ideas of what could be causing this? I have checked all the scripts for variables & function uniqueness and also done the same in the CSS files.

http://www.store.eleco.com

[pinbrook]

Firstly IMO you use brochure pages as extra pages for the website - they tend to be all the pages that are not product pages ie about us, contact us etc etc.

Thus you should be adding your tab code to product layouts and forget about brochure layouts

[Jonathan Hunter]

Yes that is what I am trying to achieve, however for some reason the code does not work in FireFox (when in the product pages). This does work when used in brochure pages, hence why I was wondering what the difference is (in relation to code/structure) between the pages that could be causing the problem.

[jont]

what the difference is

You are often better for maintenance viewpoint changing the brochure pages to use the same layout as the product pages... see http://community.actinic.com/showpos...83&postcount=4

[Jonathan Hunter]

Thanks for the suggestion. However by making my brochure page layout the same as the product page layout does not solve the problem I am having with viewing in FireFox.

I tried stripping my product page right down by removing css and scripts but still my custom menu did not work properly in FireFox. Works fine for brochure pages which just doesn't make any sense to me.

[jont]

If the brochure and product layouts are to be the same have you tried copying the outer layout of the brochure into the outer layout of the product?

Do you get any coding errors when in the design tab? It could be soemthing is malformed and the product pages which use additional <form> elements is killing the overall code.

[los_design]

Does indeed sound like a conflict along the line sof the java and/or form.

Have you altered the DOC TYPE at all?

[Jonathan Hunter]

Thanks for your advice.

I have not changed the DOCTYPE and there is no error messages(in design mode)

I tried hard coding the html in the product layout, outside the form tags. This did not make a difference.
I also tried using a fragment instead of a product in the product section. This did not work either.
Tried removing all other javascript that may be conflicting with the new scripts. This did not make a difference.

This is really bugging me as I can't seem to find any reason why the script works in one area of the site but not the other.

[NormanRouxel]

A quick look with Firefox and it's Tools / Error Console show the error to be

Error: uncaught exception: [Exception... "Component returned failure code: 0x804b000a [nsIDOMNSHTMLAnchorElement.hash]"  nsresult: "0x804b000a (<unknown>)"  location: "JS frame :: http://www.eleco.com/testshop/acatalog/tabs.js :: anonymous :: line 84"  data: no]

And line 84 in tabs.js is within the routine

    Init: function () {
        if (!document.getElementsByTagName) return;

        // Attach an onclick event to all the anchor links on the page.
        var anchors = document.getElementsByTagName("a");
        for (var i = 0; i < anchors.length; i++) {
            var a = anchors[i];
            if (a.hash) a.onclick = Tabs.OnClickHandler;
        }

so that a.hash seems to be failing.

Why it's only on some pages is a mystery to me. Adding some diagnostic code may help (display each anchor name and see which one it fails at).

[NormanRouxel]

Update. The code fails when it encounters a named anchor tag without an HREF. E.g. the product anchor which is <a name="a2">. It looks like the author didn't consider A tags that have no HREF attributes.

Changing

if (a.hash) a.onclick = Tabs.OnClickHandler;

to

if (a.href) a.onclick = Tabs.OnClickHandler;

seems to work.

[NormanRouxel]

Maybe even better

if (a.href) {if (a.hash) a.onclick = Tabs.OnClickHandler;}

[Jonathan Hunter]

Big Thanks!

Thank you very much for taking the time to look into this for me. This solved the problem.