[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3302
  • Last Modified:

function to toggle span visibility...

Hello!

I'm trying to make a function in javascript that would toggle the visibility of span blocs in different html pages.
Since I don't know how many span blocs there will be in each pages I tried to count them with document.elements and indexOf 'text_' (since each span id will be text_1, text_2 and so on in each page) but it didn't work...

What I want to do is find out how many span I have and then repeat with a variable to make them invisible and then, turn one visible according to a variable i'll send in argument when calling the function s there will always be only one span visible at a time (they're all one on top of the other...)

So far I did this, but it doesn't work at all....
function LayerVisi(nomLayer) {
for (i = 0; i < document.elements.length; i++){
var nom = document.elements.name
if (nom.indexOf("txt_") != -1) {
if (nom == "txt_" + nomLayer) {
document.getElementById(nomLayer).style.visibility="visible";
} else {
document.getElementById(nomLayer).style.visibility="hidden";
}
}
}

Can anyone help me on that one??

thanks!
0
fechan
Asked:
fechan
  • 6
  • 4
1 Solution
 
jaysolomonCommented:
0
 
fechanAuthor Commented:
that still doesn't tell me how I can count span though... I already know how to make the span visivle or invisible anyways....
0
 
jaysolomonCommented:
try this

<script type="text/javascript">
<!--
var count = 0;
function cntSpan(){
      for(i=0; i<document.getElementsByTagName('span').length; i++){
                  ++count
                  alert(count);
            }
      }
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
  <input type="button" name="Button" value="Button" onclick="cntSpan()">
</form>
<span id="text_1">span1</span> <span id="text_2">span2</span> <span id="text_3">span3</span>
<span id="text_4">span4</span> <span id="text_5">span5</span> <span id="text_6">span6</span>
<span id="text_7">span7</span> <span id="text_8">span8</span> <span id="text_9">span9</span>
<span id="text_10">span10</span> <span id="text_11">span11</span> <span id="text_12">span12</span>
<span id="text_13">span13</span> <span id="text_14">span14</span>
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
fechanAuthor Commented:
yoiu can't put that script in a JS library, can you?
0
 
fechanAuthor Commented:
oh nevermind about that one... my mistake :P

do you know how come that doesn't work?
document.getElementById('text_'+i).style.visibility="hidden";

(in
       for (i=0; 1<count; i++){
             document.getElementById('text_'+i).style.visibility="hidden";
       }
)
0
 
NeoTeqCommented:
Whoa...

That seems like a nice infinite loop to me! Maybe you should replace the 1 by an 'i'... Just a suggestion.

BTW IMO it's better to use display = "" for visible and display = "none" for invisible (insteada visibility... the display-property also removes the space needed for the element.
0
 
jaysolomonCommented:
display works in IE5+ and NS6+
0
 
fechanAuthor Commented:
well either way it doesn't work....
It used to work when I was naming a specific span name but now that I write ('text_'+i) I get an 'object required' error....
0
 
fechanAuthor Commented:
oh no wait... what's not working is that I use an argument and it's undefined for some reason...
0
 
jaysolomonCommented:
post your code
0
 
fechanAuthor Commented:
argh I think I just don't know what's not working...

That's my HTML
<body onLoad="MM_preloadImages('../../travail/tec1280/01_travail/textes/casA/images/ima-01-03c-2.jpg')">

<form name="form1" method="post" action="">
<!--   <p>
    <input type="button" name="Button" value="Button" onclick="cntSpan('text_2');">
  </p> -->
  <p> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imgrollover','','../../travail/tec1280/01_travail/textes/casA/images/ima-01-03c-2.jpg',1)" onclick="cntSpan('text_1')">
    <img src="../../travail/tec1280/01_travail/textes/casA/images/ima-01-03c-1.jpg" alt="txt1" name="imgrollover" width="50" height="61" border="0"></a>
  </p>
  <p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imgrollover','','../../travail/tec1280/01_travail/textes/casA/images/ima-01-03c-2.jpg',1)" onclick="cntSpan('text_2')"><img src="../../travail/tec1280/01_travail/textes/casA/images/ima-01-03c-1.jpg" alt="txt2" name="imgrollover" width="50" height="61" border="0"></a>
  </p>
</form>

<span id="text_1" style="position: absolute; z-index:1; width: 450; left: 10;">span1</span>
<span id="text_2" style="position: absolute; z-index:1; width: 450; left: 10;">span2</span>
<span id="text_3" style="position: absolute; z-index:1; width: 450; left: 10;">span3</span>
<span id="text_4" style="position: absolute; z-index:1; width: 450; left: 10;">span4</span>
<span id="text_5" style="position: absolute; z-index:1; width: 450; left: 10;">span5</span>
<span id="text_6" style="position: absolute; z-index:1; width: 450; left: 10;">span6</span>
<span id="text_7" style="position: absolute; z-index:1; width: 450; left: 10;">span7</span>
<span id="text_8" style="position: absolute; z-index:1; width: 450; left: 10;">span8</span>
<span id="text_9" style="position: absolute; z-index:1; width: 450; left: 10;">span9</span>
<span id="text_10" style="position: absolute; z-index:1; width: 450; left: 10;">span10</span>
<span id="text_11" style="position: absolute; z-index:1; width: 450; left: 10;">span11</span>
<span id="text_12" style="position: absolute; z-index:1; width: 450; left: 10;">span12</span>
<span id="text_13" style="position: absolute; z-index:1; width: 450; left: 10;">span13</span>
<span id="text_14" style="position: absolute; z-index:1; width: 450; left: 10;">span14</span>

And that's my JS

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_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_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];}
}

//----------------------------------------------------
function cntSpan(nomLayer){
      var count = 0;
     for(i=0; i<document.getElementsByTagName('span').length; i++){
           ++count
          }
     
       for (i=1; i<=count; i++){
             document.getElementById('text_'+i).style.visibility="hidden";
            //document.getElementById('text_'+i).display="none";
       }
       document.getElementById(nomLayer).style.visibility="visible";
}

And now that I managed to get the last function to work my roll overs don't work anymore!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now