Hi ! CSS problem

[amicaldan]

I have a little CSS problem... with this photo galery :

http://www.danieldesjardins.com/gallery/1202015

The problem is that the photo don't stay visible after the clic on the corresponding Icone.

Can somebody help me. It would be appriciate.

I took the origibal CSS code here :

http://www.cssplay.co.uk/menu/gallery_click.html

[geoeremite]

The problem is that the photo don't stay visible after the clic on the corresponding Icon.


As far as I can tell, the active pseudo class is implementation defined behavior (i.e., browsers can make it behave however they like). Firefox seems to leave the last-clicked link active. Safari seems to leave a link active only as long as it's being clicked upon. I don't know of a way to fix this with CSS alone. Instead, I'll need a bit of javascript.

First, find the line in your css that starts with "a.toto:active em, a.toto:focus em" and add to the start of the line the string "a.totoactive em, " so that it will now read:

a.totoactive em, a.toto:active em, a.toto:focus em {...

Then we need some javascript that moves the totoactive class around to the currently active element. The following javascript function first strips the totoactive class from any toto element that has it and then adds the totoactive class to the element that calls the function. Add this to your javascript customization:

function totoactive(elem) {
var reactive = /^(.*toto.*) totoactive(.*)$/;
var totos=document.getElementsByTagName('A');
for (var i = 0; i < totos.length; i++) {
if (reactive.test(totos[i].className)) {
totos[i].className = RegExp.$1 + ' ' + RegExp.$2;
}
}
elem.className += ' totoactive';
}


Now we just need the links to call this function. To each of your A tags that currently look something like

<a class="toto slidea" href="#nogo"><em>...

add an onClick handler that calls the totoactive function. The snippet above would look like this when done:

<a class="toto slidea" onclick="totoactive(this);" href="#nogo"><em>...

Making those changes makes this work for me in Safari and FF1.5/Mac.
I don't have IE handy to test, although it seems like this may work there as well.

cheers,
Scott

[amicaldan]

Thank you very much... I'll try that later tonigth and i'il told you if it's ok on IE.

Bye !
Daniel.

As far as I can tell, the active pseudo class is implementation defined behavior (i.e., browsers can make it behave however they like). Firefox seems to leave the last-clicked link active. Safari seems to leave a link active only as long as it's being clicked upon. I don't know of a way to fix this with CSS alone. Instead, I'll need a bit of javascript.

First, find the line in your css that starts with "a.toto:active em, a.toto:focus em" and add to the start of the line the string "a.totoactive em, " so that it will now read:

a.totoactive em, a.toto:active em, a.toto:focus em {...

Then we need some javascript that moves the totoactive class around to the currently active element. The following javascript function first strips the totoactive class from any toto element that has it and then adds the totoactive class to the element that calls the function. Add this to your javascript customization:

function totoactive(elem) {
var reactive = /^(.*toto.*) totoactive(.*)$/;
var totos=document.getElementsByTagName('A');
for (var i = 0; i < totos.length; i++) {
if (reactive.test(totos[i].className)) {
totos[i].className = RegExp.$1 + ' ' + RegExp.$2;
}
}
elem.className += ' totoactive';
}

Now we just need the links to call this function. To each of your A tags that currently look something like

<a class="toto slidea" href="#nogo"><em>...
add an onClick handler that calls the totoactive function. The snippet above would look like this when done:

<a class="toto slidea" onclick="totoactive(this);" href="#nogo"><em>...
Making those changes makes this work for me in Safari and FF1.5/Mac.
I don't have IE handy to test, although it seems like this may work there as well.

cheers,
Scott

[amicaldan]

Hello Scott !

I've done what you have told me and it's ok even in IE. Great. Thank's a lot.

I want to make two things so this page (the sameone http://www.danieldesjardins.com/gallery/1202015) would be like a want. If you can help a would appriciate.

The first thing is how can a get ride of the selection borber around the photo a have clicked.

The second thing is : every photo is from one of ma gallerys menu at the right. This menu as a red dot visible want someone is passing over one item or clickong one item. When someboby select a picture, i would think to get the corresponding item menu hover a the same time.

Thank for any help.
Bye !
Daniel.


Thank you very much... I'll try that later tonigth and i'il told you if it's ok on IE.

Bye !
Daniel.

[geoeremite]

how can a get ride of the selection borber around the photo a have clicked.

Add outline:none like this:

a.totactive, a.toto:active, a.toto:focus {outline: none; border:1px solid #DD0000;}


every photo is from one of ma gallerys menu at the right. This menu as a red dot visible want someone is passing over one item or clickong one item. When someboby select a picture, i would think to get the corresponding item menu hover a the same time.


I don't know a trivial way to do this. I might add an 'id' to each of the menu spans (or the links around the spans) and then when an image is selected, in addition to setting the selected image active I'd turn on the menu item highlight.

Scott

[amicaldan]

Thank you !

I'll find a way.

Bye Bye !
Daniel.

Add outline:none like this:

a.totactive, a.toto:active, a.toto:focus {outline: none; border:1px solid #DD0000;}



I don't know a trivial way to do this. I might add an 'id' to each of the menu spans (or the links around the spans) and then when an image is selected, in addition to setting the selected image active I'd turn on the menu item highlight.

Scott