If checkbox checked then use SPAN

Showing an html element on checked

[Simon_Lloyd]

Hi all, i am trying to show this

<span id="mgc_cb_evo_sound_span"></span>

if a checkbox is checked on another sheet. I'm trying to use something i picked up on the web

<script>
<!--
function c(){}


function test(){
if(document["f1"]["chkbx"].checked){
<span id="mgc_cb_evo_sound_span"></span>
}
else{
}
}
//-->
</script>

<FORM NAME="f1">
<tr>
<td>
<input type="checkbox" name="chkbx" value="ON" onclick = "c() ; test()"></td>
</tr>
</FORM>

What i need is if the checkbox is checked then allow the span if not then do not.

Can anyone help?

[Zipper]

There are many ways to do this. The most common way would be to hide the <span> element (using CSS) and then show it when the checkbox is clicked.

so, your <span> element would look like,

<span id="mgc_cb_evo_sound_span" style="display:none">
contents goes here
</span>

make sure to place it where you want it to be displayed in the page. Then in the test() function you can do something like,

if(document.getElementById("chkbx").checked){ 
document.getElementById("mgc_cb_evo_sound_span").style.visibility='visible';
}

make sure you add the id="chkbx" attribute to the checkbox element.

I should mention that this is just a simple example. You might also have to use a similar method (just the reverse) in order to hide the element when the checkbox is unchecked.

[rocknbil]

But the display will still be none . . . change the display property instead.

document.getElementById("mgc_cb_evo_sound_span").style.display='inline';

Inline for spans, block for block level elements.

[Simon_Lloyd]

Thanks guys, the SPAN is empty on purpose, its a dummy span for another js file (not mine i didn't create it or know how to manipulate it as i'm a newbie), if the span is present in my template then when the template is called a sound is created (part of the js file i suppose), i found if i remove the span the sound doesn't happen, so to give my users control over whether they hear it or not i thought it would be easy to control whether the span was there or not via a checkbox, is this what will happen with your kindly adjusted codes?

Regards,
Simon

[Simon_Lloyd]

Hi Guys i used this:

<script> 
<!-- 
function c(){} 


function test(){ 
if(document.getElementById("chkbx").checked){ 
document.getElementById("mgc_cb_evo_sound_span").style.display='inline'; 
} 

//--> 
</script> 

and in my template i used:

<span id="mgc_cb_evo_sound_span" style="display:none"> 
</span> 

<FORM NAME="f1"> 
<tr> 
<td> 
<input type="checkbox" name="chkbx" id="chkbx" value="ON" onclick = "c() ; test()"></td> 
</tr> 
</FORM>

But the sound still played regardless of whether the checkbox was checked or not?

Regards,
Simon

[Simon_Lloyd]

Is there anyway of changing the id of the span upon the check box being checked? say unchecked its id="none" and checked it's id="mgc_cb_evo_sound_span" ?

[Readie]

If you wrap it in another span,like so:

<span id="something><span id="mgc_cb_evo_sound_span"></span></span>

Then you could do something along the lines of this:

if(document.getElementById("chkbx").checked){
document.getElementById('something').innerHTML = '<span id="mgc_cb_evo_sound_span"><\/span>';
}else{
document.getElementById('something').innerHTML = '<span id="none"><\/span>';
}

[Simon_Lloyd]

I tried that and i get an error:
'document.getElementById(...)' is null or not an object

I get this after i click the checkbox.

If i don't check the checkbox after the first action i get the error:
'null' is null or not an object
Regards,
Simon

[Simon_Lloyd]

Update:
there was a missing " after "something i corrected that, no errors but checking or unchecking the checkbox makes no difference, sound is always heard.

Regards,
Simon

[Simon_Lloyd]

Another update:
If i remove the span from this:

<span id="something><span id="mgc_cb_evo_sound_span"></span></span> 

and make it this:

<span id="something></span> 

and using ths:

if(document.getElementById("chkbx").checked){ 
document.getElementById('something').innerHTML = '<span id="mgc_cb_evo_sound_span"><\/span>'; 
}

then checking the checkbox first, execute my entry and sound plays no faults, however if i execute my entry first i get 'null' is null or not an object.

Can anyone help further, if it helps my site is ajax enabled (vbulletin)

Regards,
Simon

[Simon_Lloyd]

Guys, any further help with this?

Regards,
Simon

[Simon_Lloyd]

Is there a way of capturing null or preventing it as the windo wont progress any further when it has produced the null is null error

[rocknbil]

if (document.getElementById('your-element')) {
// only do something if it can be FOUND
}

But the sound still played regardless of whether the checkbox was checked or not?

Because it's still IN THE PAGE, regardless of the display properties.

... the SPAN is empty on purpose, its a dummy span for another js file ... i found if i remove the span the sound doesn't happen

OK . . well the best thing would be to have the ability to interact directly with the sound file, but sounds like (pun not intended) you're beyond that. Try something like this, which is a rerun of Readie's suggestion (I don't **think** a span inside a span is valid HTML, but it might be OK. Certainly ugly code. :-) )


<p id="give-it-some-name"><span id="your-span"></span></p>

So if it loads, and the JS loads in that span, you want to remove the span entirely.

function killSound() { 
 if (document.getElementById('give-it-some-name')) { 
 document.getElementById('give-it-some-name').innerHTML=''; 
 } 
 return false; 
} 

which would be executed by

<a href="#" onclick="return killSound();">Sound OFF</a>

Note it can be named "anything," just make sure the function refers to the document element, like above.

In looking over your previous posts, you have to make sure of a couple things. Note the missing quoted attribute:

<span id="something><span id="mgc_cb_evo_sound_span"></span></span>

And if you're really using "something" as the ID, then your function should refer to "something". It may have been just that . . .

[Simon_Lloyd]

Thanks for the detailed help as im no coder!, Im afraid that didnt work either :( when i clicked the sound off link and performed an action that would have played a sound i get an error:
null is null or not an object.

Ideally i need this to be a checkbox or radio button so the sound remains off until the user decides otherwise, here's what i used:

<script> 
<!-- 

function killSound() { if (document.getElementById('mybox')) { document.getElementById('mybox').innerHTML=''; } return false; } 
//--> 
</script> 


<p id="mybox"> <span id="mgc_cb_evo_sound_span"></span> </p> 

and the clickable link you gave

[Zipper]

Is there anyway we can take a look at your javascript code for playing the sound? I'm thinking there should be an easy way to just pause the sound (depending on how you're playing it).

Also, what browser are you using to test this?

[Readie]

(I don't **think** a span inside a span is valid HTML, but it might be OK. Certainly ugly code. :-) )

w3.org's validator doesn't mind it :)

Tis a bit ugly though, agreed.

[Simon_Lloyd]

There is a whole host pf files as its a vbulletin modification, but if any of you are familiar with it i'd gladly post or send the file as i really don't know which js file is interactiong with it......the option to turn sound on/off is already there for this modification in the usercp but really the option should be where the user can see it and get to it easy, thats why i was trying to give the option to them locally, just copying the the code from the template that populates the usercp to the one where i want the option doesn't work.

Very kind regards,
SImon

[Simon_Lloyd]

Is anyone able to help further with this?

Regards,
Simon

[Fotiman]

I suspect that when the page loads some JavaScript executes that generates a Flash object within that span, and that Flash object is used to play the sound. What you would need to do is determine where in the JavaScript files it is interacting with mgc_cb_evo_sound_span, which might lead you to where it is interacting with the Flash object. You might then be able to trick it into doing something else, but I don't think you will be able to get much help without posting some of the code. I don't think that hiding the span (setting display to none or visibility to hidden) will work because the element still exists. And simply deleting the span element doesn't work either because some code has already executed that has tied itself to some object within that span. So I would try to find that piece of code, and then you can swap out the object that it has tied itself to, or perhaps there might even be a boolean flag that it checks before trying to play the sound (in which case, you could just set that boolean when the checkbox is checked/unchecked).

It doesn't sound like there are any API documents for this code.

Hope that helps.

[Simon_Lloyd]

Fotiman, thanks for the reply, I found that this is the js that is dealing with the sound, if someone could help modify this js so that it also checks to see if ChkBx (name of the checkbox that i would add) is checked, if it is (as well as the other setting it looks for in the admincp) then play sound if its not checked disable sound. As i said previously im not a coder but can do as instructed.

Thanks all!

CODE Part 1 of 3 due to size:
SNIP
-------------------------------

Regards,
Simon

[edited by: Simon_Lloyd at 5:54 pm (utc) on Mar 9, 2010]

[edited by: Fotiman at 6:40 pm (utc) on Mar 9, 2010]
[edit reason] Removed code dump [/edit]

[Fotiman]

In general, we prefer that you avoid massive code posts in the forum. See:
[webmasterworld.com...]

However, looking at your code I was able to run it through a beautifier and find the pieces of code that had anything to do with mgc_cb_evo_sound_span. There are 3 places and they are as follows:

if (mgc_cb_evo_sound && n && !first_load) {
  fetch_object("mgc_cb_evo_sound_span").innerHTML = '<embed src="clientscript/mgc_cb_evo/sound/new_chat.swf" hidden="true" autostart="true" loop="false">'
}

if (mgc_cb_evo_sound_channel && b) {
  fetch_object("mgc_cb_evo_sound_span").innerHTML = '<embed src="clientscript/mgc_cb_evo/sound/new_chat.swf" hidden="true" autostart="true" loop="false">'
}

if (mgc_cb_evo_sound && playsound && !first_pm_load) {
  fetch_object("mgc_cb_evo_sound_span").innerHTML = '<embed src="clientscript/mgc_cb_evo/sound/new_chat.swf" hidden="true" autostart="true" loop="false">'
}

In these cases, it is checking either mgc_cb_evo_sound or mgc_cb_evo_sound_channel to determine whether or not to embed the Flash swf that plays the sound. However, I did not see any code that interacts with that swf, which probably means that the swf is designed to look for certain events within the code. Because of that, your checkbox to enable/disable sound is not going to work. Once this gets embedded on the page, it's too late for you to do anything.

Your best bet is probably to contact the author of the swf to see if you can get more information regarding how it listens to events.

[Simon_Lloyd]

My apologies for all the code and thanks for the advice!

Regards,
Simon

[Fotiman]

No problem. If you find a solution, please be sure to update this thread in case anyone else comes across the same problem.

[Simon_Lloyd]

Firstly the author has abandoned the modification so i can't contact him but i am going to see what i can find in the swf myself, however i will post back if i manage anything.