im writing a big page with several different elements in it, and im stuck trying to duplicate a script.
first one works "tab b" click each 'icon' and a .png file appears above it to show its selected.
"tab c" same script and code seems to only work for first icon, and switch off when clicked on the others.
been staring at this for sooooome time now, please can someone see what i have done wrong, as i dont really understand the code im using, im just a beginner.
Each and every single id attribute must not be used for more than one element on the same document. This is most probably why only the first one works!
ok, I have successfully implemented your code, took some adjustment to get it to work, mainly trying to discover the missing 'i' in visibility on your example :-/
im a little slower at fault finding than most lol,
can you believe though i Still have the exact same problem!!!
i will put the code below
ps the span thing is for a popup im searching for an alternate code to place the popup next to the cursor but they all use jquery and it seems to stop the tabs from working. for now i changed it to a table, its hidden in css with hover making it visible.
thanks
your script
Code:
function toggleany(suffix,imagenum)
{
var group = document.getElementById("group" + suffix);
var Sets = group.getElementsByTagName("a");
for ( x = 0 ; x < Sets.length ; ++x )
{
var alink = Sets[x]; /* get reference to one a tag */
var images = alink.getElementsByTagName("img"); /* find images in that tag */
/* hide or show the select.png depending on which clicked */
images[0].style.visibility = ( x == imagenum ) ? "visible" : "hidden";
/* ditto for the contentDiv that matches suffix and imagenum */
document.getElementById("contentDiv" + suffix + x).style.display =
( x == imagenum ) ? "block" : "none";
}
}
The guts of the calendar positioning code is here:
Code:
var x = 0;
var y = 0;
var node = here;
while ( node.offsetParent != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
var cal = document.getElementById('CALENDAR');
cal.style.left = x + "px";
cal.style.top = (y + 24) + "px";
cal.style.visibility='visible';
You pass in a reference the object you want it near and then that little while loop does the magic. You can adjust the actual position relative to the object when you set the left and top positions.
Passing this from the onclick would be the easiest way to pass the needed here value.
That is, you add an argument to the toggleany function:
Code:
function toggleany(here,suffix,imagenum)
And then invoke it via onclick="javascript:toggleany(this,'two','1');"
Assuming we can get toggleany to work.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
it just doesnt seem to work in the real page. hmmm, there are some slight differences, but fundamentally the same.
yes i have seen many examples using jquery, it does seem simple, but it crashes the other elements i have going in the page like mootools. i have read you can get them both going at the same time, seemed a little complex for my abilities, i did give it a crack without success.
i will play with your code and see if i can implement it for what i want. thanks.
going to add the here and this suffix to see if it helps.
the strange thing is the first one in tab c works, almost like it is reading the second set as only 1 instead of many.
FIXED - in re writing my page to do all my scripts with jquery instead of trying to use two, i found the problem ......
wait for it .... the problem is 'two'
the code for some reason doesnt like it, change it to a number and it works fine.
first tab id="groupone" and in calling function toggleany(this,'one',1);
second tab id="grouptwo" and in calling function toggleany(this,'two',1); doesnt :-/
rewriting the page i tried numbers
first tab id="group4" and in calling function toggleany(this,'4',1); works
dont ask me why, maybe one of you supercoders will work it out one day :-)
thanks for your help everyone, the revised script is much better anyway.
and you will see that tab b works for all timbers, and tab c will only toggle on for the first 10 timbers! what the!
this is so strange, I now have this code in the new page three times, each one is different and i had to try random numbers to get it to work at all, and one tab they all work, the others vary.
ok, so since i cant get this to work i have gone back to basics, reading thats its not correct to have table and div inside an anchor tag, i have re written the code to remove this, also I was originally switching to html from php in the middle of the loop, so i removed that too just in case.
I have checked for open tags and general errors that could cause this, also I have changed the tab style to not use mootools also, thinking that could have effected it.
And STILL, after all this im getting the same problem (in fact it seems to be worse, it now only works on the first timber in the third tab)
function toggleany(here,suffix,imagenum)
{
var group = document.getElementById("group" + suffix);
var Sets = group.getElementsByTagName("a");
for ( x = 0 ; x < Sets.length ; ++x )
{
var alink = Sets[x]; /* get reference to one a tag */
var images = alink.getElementsByTagName("img"); /* find images in that tag */
/* hide or show the select.png depending on which clicked */
images[0].style.visibility = ( x == imagenum ) ? "visible" : "hidden";
/* ditto for the contentDiv that matches suffix and imagenum */
document.getElementById("contentDiv" + suffix + x).style.visibility = ( x == imagenum ) ? "visible" : "hidden";
}
}
which seems straight forward, i changed the second half to visibility switching instead of display/block, you will see the first one (gabon ebony) works.
the php code generating the html for the tab content is ...
PHP Code:
<div id="group3"> <?php $count= '0'; $query = mysql_query("select * from ".$xoopsDB->prefix('zakscustomtimbers')." ") or die ('getting timbers for failed'); //where relevent to option ----- ad where optionone= 'yes' and timberavail = 'on' ---- while($myrow = mysql_fetch_array($query)){ $timberID = $myrow['timberID']; $src = "images/cb/timbers/icons/$timberID.png"; // set image path if (file_exists($src)) { // see if image is there $timberIDcomma = "'".$timberID."'"; $timbername = $myrow['timbername']; $newtimbername = substr($timbername,0,15); if ($newtimbername == $timbername) { $dots = '';} else {$dots = '..';} $timbersci = $myrow['timbersci']; $timberblurb = $myrow['timberblurb']; $timberprice = $myrow['timberprice']; $clickvar = "'variableOne$count'"; echo ' <div class="cbselector" id="popup"> <a onclick="javascript:';echo "toggleany(this,'3',$count ); emailone='variableOne$count';"; echo '"> <img class="toggleimage" id="cbselectortoggle" src="images/cb/select.png" style="visibility: hidden;" /> <img class="toggleimage" id="cbtimbericon" src="images/cb/timbers/icons/'.$timberID.'.png" /> <em>'.$newtimbername.''.$dots.'</em> <span> <em class="spanem">'.$newtimbername.'</em> <strong>'.$timbersci.'</strong> <img src="images/cb/timbers/icons/'.$timberID.'.png" /> <small>'.$timberblurb.'</small> <b>'.$timberjanka.'</b> </span> </a> </div>'; $count++; } } ?> <div id="spanclear"></div> </div>
Before you post, read our: 
