Changing style of filter buttons in CSS?

[hindu times]

Hi there,

I'm currently working on the following page... www.rjt-online.com/photos_titletest.php

The Filter By buttons open different "photo galleries" in the iFrame below them when they are clicked. I was wondering (being a bit of a newbie with web design) if it is possible to change the style of the Filter buttons depending on which one is clicked.

For example, as you can see currently the Filter By buttons are all the same colour and font. Is it possible in CSS to have the initial button (Latest) underlined on loadup, and when you click on the next button (say Promo), for Latest to be de-underlined and the Promo to be underlined, therefore making it easier for people to see which page they are currently viewing?

Many thanks.

[hindu times]

Also, it would have to work with the browser buttons so when you click back on the browser it jumps back to the previously clicked filter button.

[fxm]

Edit this line

<span id="fxma" class="instructiontext">FILTER

(to insert the id=) and replace this function

function resizeIframe(frameid) {
    var currentfr = document.getElementById(frameid)
    var cAs = document.getElementById('fxma').getElementsByTagName('a')
    for (j = cAs.length, i = 0; i < j; i++) {
        cAs[i].style.backgroundColor = 'white'
    }
    var a;
    switch (window.frames['fxm'].document.URL) {
        case 'http://www.rjt-online.com/photos_latest.php':
            a = 'LATEST';
            cAs[0].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_live.php':
            a = 'LIVE';
            cAs[1].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_promo.php':
            a = 'PROMO';
            cAs[2].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_other.php':
            a = 'OTHER';
            cAs[3].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_view_all.php':
            a = 'ALL';
            cAs[4].style.backgroundColor = 'silver'
            break
    }
    document.getElementById('phototitle').innerHTML = a + ' PHOTOS //';
}

in its entirety.

Adjust the colors to taste. Obviously different highlighting styles are possible.

[hindu times]

Thanks again for the reply fxm.

Just tried that.

Doesn't seem to be working. It's stopping the functionality of the iframe.

And in IE it's showing an Syntax error on line 126

[fxm]

It's stopping the functionality of the iframe.

And in IE it's showing an Syntax error on line 126

The URLs in the switch() on the page are not correct; they are missing the 'http://...'.

There also seems to be a typo - an extraneous }. I will test and get back to you.

[fxm]

The URLs in the switch() on the page are not correct; they are missing the 'http://...'.

There also seems to be a typo - an extraneous }. I will test and get back to you.

This

function resizeIframe(frameid) {
    var currentfr = document.getElementById(frameid)
    var cAs = document.getElementById('fxma').getElementsByTagName('a')
    for (j = cAs.length, i = 0; i < j; i++) {
        cAs[i].style.backgroundColor = 'white'
    }
    var a;
    switch (window.frames['fxm'].document.URL) {
        case 'http://www.rjt-online.com/photos_latest.php':
            a = 'LATEST';
            cAs[0].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_live.php':
            a = 'LIVE';
            cAs[1].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_promo.php':
            a = 'PROMO';
            cAs[2].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_other.php':
            a = 'OTHER';
            cAs[3].style.backgroundColor = 'silver'
            break
        case 'http://www.rjt-online.com/photos_view_all.php':
            a = 'ALL';
            cAs[4].style.backgroundColor = 'silver'
            break
    }
    document.getElementById('phototitle').innerHTML = a + ' PHOTOS //';

    if (currentfr && !window.opera) {
        currentfr.style.display = "block"
        if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
        currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
        else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
        currentfr.height = currentfr.Document.body.scrollHeight;
    }
    if (currentfr.addEventListener) currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent) {
        currentfr.detachEvent("onload", readjustIframe) // Bug fix line
        currentfr.attachEvent("onload", readjustIframe)
    }
}

should get the page working again.

My apologies: I used the phrase 'in its entirety' very carelessly.

[hindu times]

Great, that works!

So, to change it from a changing background colour to an underline, would it be:

cAs[i].style.textDecoration.underline= "true"

or words to that effect?

[hindu times]

Ignore me. I've sorted it in everything except Opera?

Is there something I can do to this line:

cAs[i].style.textDecoration="none"

to add a hover effect aswell, because that line currently overrides my CSS

[fxm]

cAs[i].style.textDecoration="none" currently overrides my CSS

That's because 'none' is a value.

This

cAs[i].style.textDecoration=""

should 'cancel' any override and revert to the CSS - but it should be tested in 'all' browsers; I have had problems in this area with Opera.

[fxm]

for (j = cAs.length, i = 0; i < j; i++) {

That should be

for (var j = cAs.length, i = 0; i < j; i++) {

[fxm]

There also appears to be a problem with the code you started with.

function resizeCaller() {
    var dyniframe = new Array()
    for (i = 0; i < iframeids.length; i++) {

AFAICT there is no reference anywhere else in the code to the array defined in Line 2. Since I have no idea what it does - if anything - I am going to leave it as-is.

Line 3, however, should be

for (var i = 0; i < iframeids.length; i++) {

I'm reasonably sure that this change (together with the similar change in my post immediately above) will fix two problems [Opera is not loading images and frames are not resizing] without breaking anything else.

[hindu times]

Cheers fxm. I've tested that in IE8, IE8 compatability mode, and the latest versions of Safari, Opera, Firefox and Chrome.

It works great.

If you don't mind, could you somehow see if it works ok in earlier versions of IE or any other browsers that I don't have?

Thanks again.

Marked as solved.