Active state not working

designedbyria · 03-18-2011, 01:38 PM

Please see http://bit.ly/hL0u0w to see what I am referring to.

I would like to add an active state to the tabs of each box. Select Communicate from the top navigation and you will see a codaslider with tabs used to navigate this section. These tabs have a rollover effect and it is this that I would like to stay on when the tab is selected.

I am assuming the slides need to be given id tags to allow for this to work, but what ever I try seems to fail....

Any suggestions?

If you want more info or code just ask...

Kor · 03-18-2011, 03:26 PM

You have some errors.

Code:

<script type="text/javascript">
//<![CDATA[
<!--

-->
//]]>
</script>

The old way to isolate the embedded javascript code inside HTML comments  is deprecated and, under XHTML Doctype it is even harmful. Remove them.

See also:
http://javascript.about.com/library/blxhtml.htm

And make sure that all the embedded codes you have there are isolated inside CDATA sections.

designedbyria · 03-18-2011, 03:37 PM

Sorry for amateur question but where does this code go?

Kor · 03-18-2011, 03:55 PM

Quote:

Originally Posted by designedbyria

Sorry for amateur question but where does this code go?

Outstanding question. Open your document and search for.

kansel · 03-18-2011, 04:17 PM

You will want to set that as a class instead of an id, so first set up a class with the styling you want. There is a script controlling the behavior of the tab - when you click the tab it loads other content. Have that script remove the active class from all tabs then add it back to the tab that was clicked.

Kor · 03-18-2011, 04:26 PM

Quote:

Originally Posted by kansel

You will want to set that as a class instead of an id, so first set up a class with the styling you want. There is a script controlling the behavior of the tab - when you click the tab it loads other content. Have that script remove the active class from all tabs then add it back to the tab that was clicked.

kansel: the code actually works under FF 3.6 (it looks like FF is more permissive). The problem is within IE. And the problem is related strictly with what I have stated: the HTML comments inside CDATA. It is a well known mistake new coders make.

Could be other errors, but first the OP should solve that one.

designedbyria · 03-21-2011, 01:58 PM

Quote:

Originally Posted by Kor

kansel: the code actually works under FF 3.6 (it looks like FF is more permissive). The problem is within IE. And the problem is related strictly with what I have stated: the HTML comments inside CDATA. It is a well known mistake new coders make.

Could be other errors, but first the OP should solve that one.

Yep you definitely tell I'm a newbie to all of this. I'm a designer but some how got handed this job!

I think I have fixed the errors you were referring too?! The site works fine once it is fully loaded but all sorts of weird things happen before... I have no idea what to do about this.... I guess because it is one big page using lots of javascript this is the problem =S

Gonna give those tabs ago now... wish me luck!

Kor · 03-21-2011, 02:13 PM

You have now a JavaScript error (you miss a parenthesis within a function, one of those silly MM functions generated by the Dreamweaver - by the way: you should not use them)

Look: if you don't know HTML, CSS, JavaScript, don't take this kind of jobs.

If I enter my dentist and find that he misses and his deputy is nothing more than a veterinary doctor, I get out the very next nanosecond.

designedbyria · 03-21-2011, 02:49 PM

I work for an agency and this is the first job they gave me, I thought it was getting handed to a developer when I was designing the site, this was the plan until the company realised the cost of a developer. As a result I'm left trying to work through this thing with limited knowledge. I think my css and html knowledge is adequate for this but it's the javascript that is causing me the grief... but I appreciate any help and feedback. I think it may get to the stage where I say I can't do any more but for now I'm going to try my best! I'm certainly learning a lot!

Kor · 03-21-2011, 03:28 PM

My impression is rather you have inherit a someone else's project, and you must repair it, which is a hard thing to do even for experienced coders.

OK, I've seen some errors again:

Code:

$('.slides').slides({
                    //preload: true,
                    //preloadImage: 'images/loading.gif',
                    //play: 10000,
                    //pause: 5000,
                    //hoverPause: true,
                    pagination: true,
                    generatePagination: false,
                    generateNextPrev: false,
					});

Remove always the last identifier (the last comma) at the end of the elements of an array or an object. At least till IE7 and IE8 are in use.

Code:

MM_preloadImages('images/clients/sainsburys_roll.png','images/clients/volvo_roll.png', etc"

You miss the final parenthesis: should be MM_preloadImages(...). And use the comma as delimiter between all those arguments.

It's a little bit crappy, that document...

Kor · 03-21-2011, 03:32 PM

Install and use Firebug under Firefox 3.6 (don't use FF4, at least not yet - there is no FireBug for this version so far)

Install and use the IE developer Tools (it is already installed in modern versions IE8 and IE9)

There are also similar tools in Chrome or Opera. Those tools are "a must" for a web developer.

designedbyria · 03-21-2011, 04:14 PM

I really appreciate your help! Thank you! I have fixed those 2 things (or so I think) I know it is still riddled with problems. I am using this site... http://validator.w3.org to try to sort them out. Hope that is the right thing. There are almost 500 errors coming up!

I know this should be left to those who have years and years experience behind them, I never once imagined taking on sure an advanced project! Will be relieved and very proud once this is all done.

Is the site looking any better to you? I am now going through it with firebug

quartzy · 03-22-2011, 01:27 AM

Your website does not scroll down and I cannot see the whole page. You should remove overflow hidden to resolve this, how many more people will have the new type screens of widescreen and not be able to view the site.

designedbyria · 03-22-2011, 09:45 AM

Thanks quartzy. I intended to remove the vertical scroll bar as it can mess up the look of it when scrolling down. The navigation and logo moves with the page and therefore gets in the way of the content. Probably not the best way to fix this so any better ideas would be appreciated. I have already spent time resizing the site to fit 1024 x 768 and when at this size all that is missing is the footer. I don't see this as a big problem as I the footer only has contact info which is also accessible from the 'communication' box.

The problem with a site like this is that it is so different. Finding an awful lot of issues =S