Forum Moderators: open
-----------------------------
<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>
<div id="jsmsg">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.</div>
<input type="button" value="Show" onclick="this.value = showElement('myDiv')">
<div id="myDiv" style="display: none";>Content to show/hide.</div>
-----------------------------
First, it checks to see if Javascript is disabled, in which case it will display a message.
The rest of the script shows/hides whatever content I place in the DIV with the id "myDIV".
For example, you could instead use:
<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><script type="text/javascript">
document.write(' <div id="myDiv">'
+ 'Content to show\/hide.'
+ '<\/div>');
</script>
[edited by: lavazza at 11:44 pm (utc) on Mar. 6, 2009]
I learnt today that Opera and some other browsers have a problem with the NOSCRIPT tag, which is why I used a DIV.
As I asked above, does it look compatible with all browsers?
I will PM you the link to the article which says that Opera has a problem with NOSCRIPT.
"Back in the day" some coders when to great lengths to ID browsers to make sure their scripts worked. The problem with this is it requires constant updating as new browsers and versions appear monthly. So instead of testing for a particular browser, you test for the DOM objects you want to manipulate, and degrade gracefully if they are not present.
Here's an old Mozilla/IE example, and it's a poor one:
if (document.layers) { // It's netscape }
if (document.all) { // It's IE }
It's poor because this only addresses two browsers.
In your case, any standards compliant browser that recognizes document.getElementById will run your script. It doesn't matter what browser it is; even browsers that haven't been invented yet that adhere to these standards will run it. So all you need for this is to test for the method you want to use:
if (document.getElementById) { //we're in }
So what if document.getElementById is not supported? You display the standard text first. Note how "jsmsg" does not have display:none. It's only made invisible if document.getElementById is present.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload=function () {
if (document.getElementById) {
document.getElementById('jsmsg').style.display='none';
document.getElementById('myDiv').style.display='none';
document.getElementById('myButton').onclick=function() { toggleElement('myDiv'); }
}
}
// We don't need to re-test for document.getElementById
// again here, as it's never going to run if it's not.
// Changed it a bit, what you really want is a toggle.
function toggleElement(id) {
// Make it a var for shorthand
var obj = document.getElementById(id);
var btn = document.getElementById('myButton');
obj.style.display = (obj.style.display == 'none')?'block':'none';
btn.value = (obj.style.display == 'block')?'Hide':'Show';
}
</script>
</head>
<body>
<p id="jsmsg">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.</p>
<form><input type="button" id="myButton" value="Show"></form>
<p id="myDiv" style="display: none;">Content to show/hide.</p>
</body>
</html>
So, if you test for the objects or methods you want to use, you'll never have to ask if it will work in this or that browser.
I tried it and it worked fine, except for one small problem: when I put it on my site, I saw that, as my pages loaded, the message intended for users with disabled Javascript kept appearing for a brief second, before disappearing. The only way I managed to fix this was by deleting that whole part of the script and using a <noscript> tag instead. Apparently, Opera does have a problem with this tag (as I mentioned above), but only if the tag has been styled with CSS.
I also have another small problem . . .
The manner in which you wrote the script limits the toggle functionality to only one element. On my page, I have muiltiple <div>s that I want to toggle. The script that I was using before allowed my to toggle as many <div>s as I wanted, provided I gave them all unique IDs.
Is there a way in which your script can be adapted to meet this requirement? And is it possible to change the button to an <a> or an <img />?
Apparently, Opera does have a problem with this tag (as I mentioned above), but only if the tag has been styled with CSS.
Thanks Tehuti!
They say you learn something every year...
2009: check :)
I just checked and found a glitch in one of my sites (that had a noscript declaration in the css file) when viewed in Opera 9.52, with JS off
Fixed by editing the CSS file from noscript to .myNoScript and nesting the 'message' inside <div class="myNoScript"></div> tags
Thanks :)
Thanks Tehuti
Hey, no problem. I learn off you guys every day.
As to my problem, I'm back to where I started. Here's what I've got:
-------------------------------
<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>
<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>
<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>
<input type="button" value="Show" onclick="this.value = showElement('myDiv3')">
<div id="myDiv3" style="display: none";>Content to show/hide.</div>
-------------------------------
Since the <noscript> tag will work properly without CSS styling, I will use it instead of a <div> or a <p>. And since the toggle code will work in all browsers that support DOM calls and getElementById, I will use that, too. All I need, therefore, is to know how to change the <input> buttons to <a>s.
Anyone?
