Safari and className oddity?

Hello,

Any idea why with the Safari browser you have to move the mouse cursor
in order for the style to change using

document.getElementById('div1').className = 'visibleDiv2';

?!


Cheers,

Geoff

Geoff Cox a écrit :

Hello,

Any idea why with the Safari browser you have to move the mouse cursor
in order for the style to change using

document.getElementById('div1').className = 'visibleDiv2';

what is the context ?

onmouseover ?
onclick ?
onchange ?
.... ?

if(confirm('blah')) doc...; ?

--
sm

On Jun 14, 5:03*pm, Geoff Cox <g... (AT) freeuk (DOT) notcom> wrote:

Hello,

Any idea why with the Safari browser you have to move the mouse cursor
in order for the style to change using

document.getElementById('div1').className = 'visibleDiv2';

?!

Cheers,

Geoff

I've not experienced that behaviour using Safari 3 for windows. Which
version of Safari are you running and on which OS?

On Sun, 15 Jun 2008 00:10:45 +0200, SAM
<stephanemoriaux.NoAdmin (AT) wanadoo (DOT) fr.invalid> wrote:

Geoff Cox a écrit :
Hello,

Any idea why with the Safari browser you have to move the mouse cursor
in order for the style to change using

document.getElementById('div1').className = 'visibleDiv2';

what is the context ?

The html

<div id="test1" class="visibleDiv2">
<h3>Test 1:</h3>
<IMG alt="image" id="a10" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test11" class="hiddenDiv2">
<IMG alt="image" id="a11" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst();">
<IMG alt="image" id="a12" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond();">
</div>

<div id="test2" class="hiddenDiv2">
<h3><em>Test 2:</em></h3>
<IMG alt="image" id="a20" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test21" class="hiddenDiv2">
<IMG alt="image" id="a21" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst();">
<IMG alt="image" id="a22" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond();">
</div>

etc

onclick() in the first block calls musicSelect(this)

function musicSelect(what) {

if (egfinished2 != 'yes') {
alert('Click again once the last sound above has finished');
return;
}

t = what.id.substring(1,2);
what.onclick = '';
what.src = played.src;
soundManager.createSound({
id:'mySound'+t,
url:'../assets/audio-new/Track' + (+t) + '.mp3',
onfinish:function(){document.getElementById('test' +t+1).className =
'visibleDiv2'} });
soundManager.play('mySound'+t);
count++;
}

when the sound is finished

document.getElementById('test'+t+1).className = 'visibleDiv2'

and it is now that the mouse has to be moved to get the .className =
'visibleDiv2' to work. I have also tried .style.display etc and no
different.

Cheers

Geoff

On Sat, 14 Jun 2008 18:38:43 -0700 (PDT), Tom Cole <tcole6 (AT) gmail (DOT) com>
wrote:

On Jun 14, 5:03*pm, Geoff Cox <g... (AT) freeuk (DOT) notcom> wrote:
Hello,

Any idea why with the Safari browser you have to move the mouse cursor
in order for the style to change using

document.getElementById('div1').className = 'visibleDiv2';

?!

Cheers,

Geoff

I've not experienced that behaviour using Safari 3 for windows. Which
version of Safari are you running and on which OS?

Tom,

Safari is v3.1.1 (525.17) for Windows (XP Pro).

Please see my reply to SAM for more details re the context.

Cheers

Geoff

Geoff Cox a écrit :

Didn't try but following what you say : move the mouse,
it seems that Safari keeps focus on the clicked image
and avoid the changing

see bellow

div id="test1" class="visibleDiv2"
h3>Test 1:</h3
IMG alt="image" id="a10" src="../assets/images/play1.gif"
onclick="musicSelect(this);"
/div
div id="test11" class="hiddenDiv2"
IMG alt="image" id="a11" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst();"
IMG alt="image" id="a12" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond();"
/div

div id="test2" class="hiddenDiv2"
h3><em>Test 2:</em></h3
IMG alt="image" id="a20" src="../assets/images/play1.gif"
onclick="musicSelect(this);"
/div
div id="test21" class="hiddenDiv2"
IMG alt="image" id="a21" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst();"
IMG alt="image" id="a22" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond();"
/div

etc

onclick() in the first block calls musicSelect(this)

function musicSelect(what) {

if (egfinished2 != 'yes') {
alert('Click again once the last sound above has finished');
return;
}

t = what.id.substring(1,2);
what.onclick = '';
what.src = played.src;
soundManager.createSound({
id:'mySound'+t,
url:'../assets/audio-new/Track' + (+t) + '.mp3',
onfinish:function(){document.getElementById('test' +t+1).className =
'visibleDiv2'} });
soundManager.play('mySound'+t);
count++;

// perhaps here :
what.blur();

}

when the sound is finished

document.getElementById('test'+t+1).className = 'visibleDiv2'

and it is now that the mouse has to be moved to get the .className =
'visibleDiv2' to work. I have also tried .style.display etc and no
different.

If the blur() up there doesn't work, try :

onfinish: function() {
document.getElementById('test'+t+1).focus();
// or probably better ... :
// location='#test'+t+1;
document.getElementById('test'+t+1).className = 'visibleDiv2';
}
});


--
sm

On Sun, 15 Jun 2008 16:18:33 +0200, SAM
<stephanemoriaux.NoAdmin (AT) wanadoo (DOT) fr.invalid> wrote:

Geoff Cox a écrit :

Didn't try but following what you say : move the mouse,
it seems that Safari keeps focus on the clicked image
and avoid the changing

see bellow

div id="test1" class="visibleDiv2"
h3>Test 1:</h3
IMG alt="image" id="a10" src="../assets/images/play1.gif"
onclick="musicSelect(this);"
/div
div id="test11" class="hiddenDiv2"
IMG alt="image" id="a11" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst();"
IMG alt="image" id="a12" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond();"
/div

div id="test2" class="hiddenDiv2"
h3><em>Test 2:</em></h3
IMG alt="image" id="a20" src="../assets/images/play1.gif"
onclick="musicSelect(this);"
/div
div id="test21" class="hiddenDiv2"
IMG alt="image" id="a21" src="../assets/images/mypitch1.gif"
onclick="checkThisFirst();"
IMG alt="image" id="a22" src="../assets/images/notmypitch1.gif"
onclick="checkThisSecond();"
/div

etc

onclick() in the first block calls musicSelect(this)

function musicSelect(what) {

if (egfinished2 != 'yes') {
alert('Click again once the last sound above has finished');
return;
}

t = what.id.substring(1,2);
what.onclick = '';
what.src = played.src;
soundManager.createSound({
id:'mySound'+t,
url:'../assets/audio-new/Track' + (+t) + '.mp3',
onfinish:function(){document.getElementById('test' +t+1).className =
'visibleDiv2'} });
soundManager.play('mySound'+t);
count++;

// perhaps here :
what.blur();

}

when the sound is finished

document.getElementById('test'+t+1).className = 'visibleDiv2'

and it is now that the mouse has to be moved to get the .className =
'visibleDiv2' to work. I have also tried .style.display etc and no
different.

If the blur() up there doesn't work, try :

onfinish: function() {
document.getElementById('test'+t+1).focus();
// or probably better ... :
// location='#test'+t+1;
document.getElementById('test'+t+1).className = 'visibleDiv2';
}
});

I have tried all 3 and still the same - I have to move the mouse
cursor to get any action!?

Cheers,

Geoff

Geoff Cox a écrit :

I have tried all 3 and still the same - I have to move the mouse
cursor to get any action!?

As I will not install soundManager and muszicks
my test in Safari can't show me your problem,
the click does click and 2nd image appears.

put your page on a server.


--
sm

On Sun, 15 Jun 2008 19:40:19 +0200, SAM
<stephanemoriaux.NoAdmin (AT) wanadoo (DOT) fr.invalid> wrote:

Geoff Cox a écrit :

I have tried all 3 and still the same - I have to move the mouse
cursor to get any action!?

As I will not install soundManager and muszicks
my test in Safari can't show me your problem,
the click does click and 2nd image appears.

put your page on a server.

will do and will email you with the link.

Cheers

Geoff