[SOLVED] Is this Script Compatible with All Browsers?

[Fluoresce]

Can anyone tell me if the following code is compatible with all browsers, please? It seems to work fine in FF 3 and IE 7. The purpose of the script is to expand and collapse the <div>s below.

 

If it is compatible, can anyone tell me, please, how I can change the <input /> buttons to <a> links, without compromising the script's compatibility and functionality?

 

I appreciate your help.

 

<script type=text/javascript>

window.onload = function hidemsg()
{
document.getElementById('jsmsg').style.display='none';
}

function showElement(id, display)
{
if(!display)
display = 'inline';

if(document.getElementById(id).style.display != 'none')
{
document.getElementById(id).style.display = 'none';

return 'Show';
}
else
{
document.getElementById(id).style.display = display;

return 'Hide';
}
}

</script>

<input type="button" value="Show" onclick="this.value = showElement('myDiv')">
<div id="myDiv" style="display: none";>Content to show/hide.</div>

<input type="button" value="Show" onclick="this.value = showElement('myDiv2')">
<div id="myDiv2" style="display: none";>Content to show/hide.</div> 



<noscript>NOTE: JavaScript has been disabled on your browser. The Show/Hide buttons on this page will therefore not work. Please re-enable Javascript to enjoy full functionality.</noscript>

[darkfreaks]

cleaned up your code abit hopefully it should run much smoother

 

window.onload = function hidemsg()
{
document.getElementById('jsmsg').style.display='none';
}

function showElement(id, display)
{
if(!display){
display = 'inline';}

if(document.getElementById(id).style.display != 'none')
{
document.getElementById(id).style.display = 'none';

return 'Show';
}
else
{
document.getElementById(id).style.display = 'display';

return 'Hide';
}
}

[Fluoresce]

I appreciate your help, Darkfreaks, but do you know the answers to my questions?

 

Is the code compatible with all browsers? And, can you tell me, please, how I can change the <input /> buttons to <a> links, without compromising the script's compatibility and functionality?

[darkfreaks]

making it error free in plain javascript should make it more browser compatible but not in all cases 

[corbin]

No, that will not work if you change it to anchors.

 

 

<a> does not have a value attribute.

 

 

Also, I guess it's fine, but it's kind of strange in actual usage to assign a function while defining it.

 

 

Usually it's either done like:

 

somevar = function() {  /* this is an anonymous function! */ }

 

Or

 

function someFunction() { /* this is a named function! */ }

 

somevar = someFunction;

 

 

 

 

By the way, I have two suggestions:

 

 

-Instead of doing onclick="this.value = showElement('myDiv2')", why not just do:

onclick="showElement(this)"

-Instead of naming your function showElement, couldn't it more accurately be named ToggleElemVisibility (or something similar)?

 

 

As for how passing this to the function would go:

 

function ToggleVis(elem, tohide) {
    if(typeof(elem) != "object") {
        elem = document.getElementById(elem);
    }

    if(typeof(tohide) != "object") {
        tohide = document.getElementById(tohide);
    }
    if(tohide == null || tohide.style == null) {
        return false;
}


    if(tohide.style.display != 'none') {
        tohide.style.display = 'none';
        elem.innerHTML = 'Show';
	elem.value = 'Show';
    }
    else {
        tohide.style.display = '';
        //(elem.innerHTML != null) ? elem.innerHTML = 'Hide' : elem.value = 'Hide';
	elem.innerHTML = 'Hide';
	elem.value = 'Hide';
    }
}

 

 

That should also work with almost any kind of element (as long as it has a innerHTML property or a value property).

 

 

Edit:  Oh, apparently, NULL is null in JS, so you will need to change that.  Also, apparently innerHTML is always set in some browsers, even if the object doesn't use it.  Coming up with a work around now.

 

Edit 2:  Code updated to work.  Technically the existence of a property of an object should be checked before setting the value, but theoretically, an object returned by document.getElementById will always have both value and innerHTML.

[Fluoresce]

Corbin, I appreciate your help very much. However, I don't know how to get that code to show/hide the content of my <div>s:

 

<input type="button" value="Show" onclick="this.value = showElement('myDiv')">
<div id="myDiv" style="display: none";>Content to show/hide.</div>

<input type="button" value="Show" onclick="this.value = showElement('myDiv2')">
<div id="myDiv2" style="display: none";>Content to show/hide.</div> 

 

Also, you said that it's not possible to change the <input> button to an <a>. A guy in another forum said that this might work:

 

<script>
var toggleVis = function(triggerEl, targetEl) {
    targetEl.style.display = (targetEl.style.display == "none") ? "block" : "none";
    triggerEl.innerHTML = (triggerEl.innerHTML == "Show") ? "Hide" : "Show"; // change the button itself.
};
</script>

<a href="#" onclick="toggleVis(this, document.getElementById('myDiv'));return false;">Show</a>

<div id="myDiv" style="display: none";>Content to show/hide</div>

 

He expressed some concerns as to its compatibility, but said that it should be fine. What do you think?

 

As you should tell, I am a complete newbie to Javascript. This is my second day. 

[Fluoresce]

I tested the code that the other guy (from the other forum) gave me on FF3 and IE7. It works well, including the <a> button.

 

Can you more experienced guys see a problem with it?

[corbin]

<div id="myDiv" style="display: none";>Content to show/hide</div>

 

Is invalid html.  The ; should be inside the quote.

 

 

 

By the way, it's very strange to store an anonymous function in a variable instead of just declaring a function with a name.

 

 

To use the function I posted, you would use something like:

 

<a href="#" onclick="ToggleVis(this, 'div1'); return false;">Show</a>

<div id="div1" style="display: hidden;">Blah</div>

<input type="button" onclick="ToggleVis(this, 'div2'); return false;" value="Show">

<div id="div2" style="display: hidden;">Bleh</div>

[Fluoresce]

Thanks for the responses, Corbin.

 

I would like to use your <a> method. I tried it and found a couple of problems.

 

When the page loads, the <div>s are already open and the links say "Show". When I click "Show", the <div>s close but the links still say "Show". Only if I click them again do they say "Hide" after the <div>s open.  ???

 

What could be the problem? Here's the whole code that I'm using:

 

<script type="text/javascript">

function ToggleVis(elem, tohide) {
    if(typeof(elem) != "object") {
        elem = document.getElementById(elem);
    }

    if(typeof(tohide) != "object") {
        tohide = document.getElementById(tohide);
    }
    if(tohide == null || tohide.style == null) {
        return false;
   }

      
    if(tohide.style.display != 'none') {
        tohide.style.display = 'none';
        elem.innerHTML = 'Show';
      elem.value = 'Show';
    }
    else {
        tohide.style.display = '';
        //(elem.innerHTML != null) ? elem.innerHTML = 'Hide' : elem.value = 'Hide';
      elem.innerHTML = 'Hide';
      elem.value = 'Hide';
    }
}

</script>



<a href=\"#\" onclick=\"ToggleVis(this, '{$row['div_id']}'); return false;\">Show</a>



<div id=\"{$row['div_id']}\" style=\"display: hidden;\">{$row['div_contents']}</div>

[corbin]

Ahhh sorry, I had something wrong earlier ;p.

 

 

<div id=\"{$row['div_id']}\" style=\"display: hidden;\">{$row['div_contents']}</div>

 

Should be

 

<div id=\"{$row['div_id']}\" style=\"display: none;\">{$row['div_contents']}</div>

[Fluoresce]

Thanks, Corbin! Your fix worked.

 

I am now using the script that you gave, along with the <a>. I am assuming that this is the most compatible one, compared to the ones I got from the other forums. If you have the slightest doubt about the code's compatibility, I would very much like to hear it. Otherwise, this topic is solved.

 

Thank you very much!

[corbin]

document.getElementById and the object returned by that method are both standards, so if there is a browser that it doesn't work with, chances are, it's old.

 

 

It might not work with old versions of Navigator or Internet Explorer 5 or lower.  If you wanted to, you could code something to add support for document.layers (navigator) or document.all (IE 5 and lower), but document.getElementById should work with anything that is not ancient ;p.

[Fluoresce]

Thanks, Corbin! 

[corbin]

;p