Forum Moderators: open
I'm using the following code, but I'm wondering if there was a better/shorter way of writing the follow lines:
<a href="/a/" onClick="document.getElementById('a').style.display='block';document.getElementById('b').style.display='none';return false;">A</a>
<a href="/b/" onClick="document.getElementById('a').style.display='none';document.getElementById('b').style.display='block';return false;">B</a>
Basically, what the two links will do is if the user has JavaScript installed, some elements on page will hide, while others will show. If JavaScript is turned off, then it will take the users to pages with the elements there or not there, depending on their clicked link.
Why not do it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>javascript or no javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script type="text/javascript">
<!--
location.href="javascript_enabled_page.html";
//-->
</script></head>
<body><div>This is the javascript disabled page</div>
</body>
</html>
birdbrain
Unfortunately, it no longer works. Any ideas?
<script type="text/javascript">function a(){document.getElementById('a').style.display='block';document.getElementById('b').style.display='none';return false;}function b(){document.getElementById('a').style.display='none';document.getElementById('b').style.display='block';return false;}</script>
<a href="/a/" onClick="a();" onKeyPress="a();">A</a>
<a href="/b/" onClick="b();" onKeyPress="b();">B</a>
The thing is, the majority of my users have javascript enabled, and redirecting all javascript users will create a lot of unnecessary server requests, and wasted bandwidth.
This is also my homepage, and I wouldn't want to risk indexing problems because of redirects from the search engines.
Also, these links are for something minor in the page, and not everyone will use these links, so I wouldn't want to redirect javascript users who won't even use the functions.
Basically I'm just trying to get the script down, because to me, right now it seems highly redundant.
Thanks
try this, it may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>javascript or no javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--div {
line-height:30px;
}
.js {
color:#f00;
}
.njs {
color:#0f0;
}-->
</style><script type="text/javascript">
<!--onload=function() {
var links=document.getElementsByTagName('a');
for(c=0;c<links.length;c++) {
if(links[c].className=='js') {
links[c].onclick=function() {
forJs();
return false;
}
}
else {
if(links[c].className=='njs') {
links[c].onclick=function() {
forNjs();
return false;
}
}
}
}
}function forJs() {
alert('this is the function for your javascript users\n\njust replace this alert with your javascript lines');
}function forNjs() {
alert('this is the function for your non-javascript users\n\njust replace this alert with your javascript lines');
}//-->
</script></head>
<body><div><a class="js" href="#">javascript 1</a></div>
<div><a class="js" href="#">javascript 2</a></div>
<div><a class="js" href="#">javascript 3</a></div><div><a class="njs" href="#">non-javascript 1</a></div>
<div><a class="njs" href="#">non-javascript 2</a></div>
<div><a class="njs" href="#">non-javascript 3</a></div><div><a href="#">ordinary link1</a></div>
<div><a href="#">ordinary link2</a></div>
<div><a href="#">ordinary link3</a></div></body>
</html>
birdbrain
