Issues with text changed on link click

JavaScript
1

Hi :slight_smile:

I have finally gotten my text to change when the links are clicked, but they switch make immediately, instead of when another link is clicked.

I used code ‘jscheuer1’ posted on dynamicdrive which worked beautifully on the test page. When I attempted to adapt it to my site, the above happened.
Any help debugging would be appreciated, as I don’t know enough about javascript to be able to work out the problem.
My test Site
the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toastmasters International | Australia, New Zealan and Papua New Guinea Site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


</script>

</head>

<body onload="MM_preloadImages('images/map-region-72.jpg','images/map-region-73.jpg','images/map-region-70.jpg','images/map-region-69.jpg')">
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div id="info">
[COLOR="Indigo"]<div id="menu">
<div onclick="reveal('first');"><a class="button" href="" ><span>TOASTMASTERS AT A GLANCE</span></a></div>
<div onclick="reveal('second');"><a class="button" href="" ><span>BECOME A BETTER SPEAKER</span></a></div>
<div onclick="reveal('third');"><a class="button" href="" ><span>BECOME A BETTER LEADER</span></a></div>
<div onclick="reveal('fourth');"><a class="button" href="" ><span>NURTURING ENVIRONMENT</span></a></div>
<div onclick="reveal('fifth');"><a class="button" href="" ><span>VISIT A CLUB</span></a></div>
<div onclick="reveal('sixth');"><a class="button" href="" ><span>JOINING A CLUB</span></a></div>
</div>
<div class="textBox" id="zero">
  <p>There are over 800 clubs with over 17,000 members throughout Australia, New Zealand and Papua New Guinea.</p><p>Toastmasters International is a not for profit training organisation that focuses on communication and leadership development.<br />
  </p>
</div>
<div class="textBox" id="first">
  <p>There are over 800 clubs with over 17,000 members throughout Australia, New Zealand and Papua New Guinea.</p><p>Toastmasters International is a not for profit training organisation that focuses on communication and leadership development.</p><br />
   </div>
<div class="textBox" id="second">
  <p>Toastmasters will give you the skills and confidence you need to effectively express yourself in any situation. By learning to effectively formulate and convey your ideas, you open a world of possibilities. You will be more persuasive and confident whether speaking with your colleagues, your community or your family.<br />
  </p>
</div>
<div class="textBox" id="third">
  <p>Leadership is the art of understanding the needs of others and guiding them to achieve common goals. To do so, you need to communicate effectively and inspire people to work as a team. Toastmasters can help you do both. Learn leadership theories and put them into practice with the clubs so that you can, in turn, apply them to everyday situations.<br />
  </p>
</div>
  <div class="textBox" id="fourth">
  <p>The environment at a Toastmasters club is friendly and supportive, and the self paced programme allows you to build confidence with each speaking and leadership assignment.<br />
  </p>
  </div>
  <div class="textBox" id="fifth">Each club has its own unique style. Some clubs may have a particular focus –such as the aged, the young corporate or recipients of the Maguire programme - , or may have entry requirements – employees of sponsoring businesses or level of speaking ability. Most clubs meet every couple of weeks for 1-3 hours. The meetings are run in a structured way so everyone may have an opportunity to speak. You are welcome to visit clubs in your area to see how they work and which one suits you. We recommend you contact them beforehand in case they are having a special event away from the normal venue.</div>
 
  <div class="textBox" id="sixth">
    <p>When you join a club, you will receive your New Member Kit and be assigned a mentor to help you to settle in and get through your first speaking roles.</p>
    <p>When you apply yourself at a Toastmasters club, you will be amazed at how quickly your communication and leadership skills improve.</p>
  </div>[/COLOR]
<div id="special">
  <p><a class="buttonSpecial"><span>Toastmasters VideoS</span></a><br />
    <a class="subLinks" href="http://www.youtube.com/v/gFEkW1jucg0&hl=en_US&fs=1&" rel="vidbox" title="Interview on Summer Money"><br />
    Interview on Summer Money</a><br />
    <a class="subLinks" href="http://www.youtube.com/v/pTCFIxh2RmA&hl=en_US&fs=1&" rel="vidbox" title="Toastmasters Promo Video">Toastmasters Promo Video</a>
    <br />
    <br />
  </div>

<div id="special">
  <a href="http://reports.toastmasters.org/findaclub/default.cfm?Country=Australia" target="_blank" class="buttonSpecial" ><span>find a club</span></a>

</div>
</div>

<div id="nav-map"><img src="images/map-region.jpg" alt="Toastmasters Region 12" width="400" height="340" usemap="#map" id="image-map" title="" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()"  border="0" />
  <map name="map">
    <area shape="poly" coords="302,332,323,292,336,284,350,266,358,252,352,226,351,209,382,239,396,246,389,278,351,309,325,347,312,340" href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand" class="72" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <area shape="rect" coords="301,68,400,89" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" class="73" onmouseover="MM_swapImage('image-map','','images/map-region-73.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <area shape="rect" coords="301,44,400,66" href="http://www.toastmasters.org.nz/" target="_blank" alt="District 72 | New Zealand" class="72" onmouseover="MM_swapImage('image-map','','images/map-region-72.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <area shape="rect" coords="301,21,399,42" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" class="70" onmouseover="MM_swapImage('image-map','','images/map-region-70.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <area shape="rect" coords="301,-2,400,20" href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" class="69" onmouseover="MM_swapImage('image-map','','images/map-region-69.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <area shape="poly" coords="297,232,297,206,251,210,207,210,205,254,216,260,234,272,258,275,270,289,280,256" href="http://www.d70toastmasters.org/" target="_blank" alt="District 70 | New South Wales, Australia Capital Territory" class="70" onmouseover="MM_swapImage('image-map','','images/map-region-70.jpg',1)" onmouseout="MM_swapImgRestore()" />
    <area shape="poly" coords="113,93,112,186,206,187,208,210,276,206,296,205,296,180,248,120,232,84,222,65,228,52,231,37,251,56,280,62,260,26,247,15,209,-2,203,15,205,41,205,49,212,65,202,117,163,93,167,74,151,67,136,68,117,81"  href="http://www.toastmastersd69.org/" target="_blank" alt="District 69 | Queensland, Northern Territory, Papua New Guinea" class="69" onmouseover="MM_swapImage('image-map','','images/map-region-69.jpg',1)" onmouseout="MM_swapImgRestore()"  />
    <area shape="poly" coords="112,97,101,83,86,99,64,116,-4,159,-2,204,11,264,63,263,110,244,136,241,179,267,208,290,236,293,237,315,250,329,269,289,256,275,236,275,206,254,205,203,207,185,114,188,111,98" href="http://www.d73.toastmasters.org.au/" target="_blank" alt="District 73 | Western Australia, South Australia, Victoria, Tasmania" class="73" onmouseover="MM_swapImage('image-map','','images/map-region-73.jpg',1)" onmouseout="MM_swapImgRestore()" />
  </map>
  
</div>

<div id="footer">
</div>
</div>
</div>
</body>
</html>

The Javascript

// JavaScript Document


if(document.getElementById)
document.write('<style type="text/css" href="style.css">.textBox {display:none;}#zero {display:block;}<\\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\\W)' + cn[i] + '(\\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('textBox'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}

Cheers!
Lee

2

you need to return false from the onclick event to prevent the default action from occurring.

3

Thanks for the reply, would you be able to explain a bit more? (Sorry but I really really don’t understand javascript very much yet).

Do I need to do this in the java script code or in the html ‘onClick’?
Why does the same code work in the test version, here?
I thought it might be the ‘button’ span interfering with it.

Thanks
Lee

4

Working out what’s wrong when we only have the experience of a working test version is tricky at best.

The default behaviour of the web browser is to follow a link to a different page.
JavaScript can be used to take over, and perform actions wen the link is clicked. It is with JavaScript that you also return false to the element to prevent the default behaviour of the web browser from occurring.

As the test site works, it seems that nothing more needs to be done to the actual design of the code.

With the non-test version that fails to work, there will be a JavaScript error occurring somewhere. When JavaScript is not running, there is no preventing the default action from occurring.

It is tricky to provide a complete diagnosis without being able to see the non-working page, but my suspicion is that you have one or more scripts that are not correctly being loaded.

5

If you mean the page I am working on, which isn’t working. It is the same as in the original post.
http://www.loveleecreations.com/testsite/region12/index.html
If I disable the javascript the div’s display (which I guess means the code is accessing the stylesheet ok) Not sure where else to go from here.

6

Ahh okay, I misundestood which page you were meaning when you said that it worked beautifully on the test page.

Those links for each section call the reveal function.


<div onclick="reveal('first');">

The reveal function, which is in the menu.js file, needs to return false from the end of the function.


function reveal(det) {
    ...
    return false;
}
7

You may also need to move the onclick event on to the anchor tag itself.