...

View Full Version : One works, duplicate doesnt, help!



Burfodus
03-23-2012, 04:28 PM
Hello Guys,

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.

url is http://www.zakscustomcues.com/modules/zakscustom/cuebuilder2.0.php

much appreciated.
steve

devnull69
03-23-2012, 06:00 PM
Your biggest mistake:

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!

Solution: Change from id to class

Burfodus
03-24-2012, 01:52 AM
ok,, changed them all to class, no different.

here is the script for the two functions

function toggle1(Imagenumone){
Sets = document.getElementsByClassName('togglesone');
NumberOfSets = Sets.length;
for (x = 0 ; x < NumberOfSets ; x++){
if (x == Imagenumone){
document.getElementById('toggleImageone' + x).src = 'images/cb/select.png';
document.getElementById('contentDivone' + x).style.display = 'block';
}else{
document.getElementById('toggleImageone' + x).src = 'images/cb/noselect.png';
document.getElementById('contentDivone' + x).style.display = 'none';
}
}
}

function toggle2(Imagenumtwo){
Sets = document.getElementsByClassName('togglestwo');
NumberOfSets = Sets.length;
for (y = 0 ; y < NumberOfSets ; y++){
if (y == Imagenumtwo){
document.getElementById('toggleImagetwo' + y).src = 'images/cb/select.png';
document.getElementById('contentDivtwo' + y).style.display = 'block';
}else{
document.getElementById('toggleImagetwo' + y).src = 'images/cb/noselect.png';
document.getElementById('contentDivtwo' + y).style.display = 'none';
}
}
}
and the html elements are created from a while loop gathering the data from a database

<?php $toggleNo = '1';
$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>
<a class="togglesone" href="javascript:toggle'.$toggleNo.'('.$count.');" onClick="emailtwo='.$clickvar.';">
<div class="cbselectortoggle">
<img class="toggleimage" id="toggleImageone'.$count.'" src="images/cb/noselect.png"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/'.$timberID.'.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">'.$newtimbername.''.$dots.'</p>
</div>
<span>
<div class="spandiv">
<div class="cbspanname">'.$newtimbername.'</div>
<div class="cbspansci">'.$timbersci.'</div>
<div class="cbspaninfo">
<div class="spanimg"><img src="images/cb/timbers/icons/'.$timberID.'.png" /></div>
<div class="spanblurb">'.$timberblurb.'</div>
</div>
<div class="cbspanjanka">'.$timberjanka.'</div>
</div>
</span>
</a>
</div>';
$count++;
}
}
?>
and the second one

$count= '0';
$toggleNo= '2';
$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>
<a class="togglestwo" href="javascript:toggle'.$toggleNo.'('.$count.');" onClick="email='.$clickvar.';">
<div class="cbselectortoggle">
<img class="toggleimage" id="toggleImagetwo'.$count.'" src="images/cb/noselect.png"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/'.$timberID.'.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">'.$newtimbername.''.$dots.'</p>
</div>
<span>
<div class="spandiv">
<div class="cbspanname">'.$newtimbername.'</div>
<div class="cbspansci">'.$timbersci.'</div>
<div class="cbspaninfo">
<div class="spanimg"><img src="images/cb/timbers/icons/'.$timberID.'.png" /></div>
<div class="spanblurb">'.$timberblurb.'</div>
</div>
<div class="cbspanjanka">'.$timberjanka.'</div>
</div>
</span>
</a>
</div>';$count++;}
}

thanks, any help would be greatly appreciated.
steve.

Old Pedant
03-24-2012, 03:30 AM
You have some illegal HTML there.


<a href="http://www.zakscustomcues.com/cart.php">
Shopping Cart
|

There is no </a> tag to end that <a> tag.

Also, you have


<span>
<div class="spandiv">
...
</div>
</span>

It's illegal to put a block element (<div>) inside and inline element (<span>).



But you have one thing in there that should be easy to change:


// toggle script times two
// this section must be repeated for each toggle

I don't believe that.

Look here:


<div id="groupone">
<div class="cbselector">
<a href="#" onclick="emailtwo='variableOne1';return toggleany('one',1);">
<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibilty: hidden;" />
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/2.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">Purpleheart</p>
</div>
<!-- illegal span omitted for brevity -->
</a>
</div>
<div class="cbselector">
...
</div>
...
</div><!-- end of groupone -->

<div id="grouptwo">
<div class="cbselector">
...
</div>
<div class="cbselector">
...
</div>
<div class=cbselector>
<a href="#" onClick="email='variableOne3';return toggleany('two',3)">
<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibility: hidden;" />
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/8.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">Cocobolo</p>
</div>
<!-- illegal span omitted for brevity -->
</a>
</div>
<div class="cbselector">
...
</div>
</div><!-- end of grouptwo -->


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";
}
}



See? One toggleany function. Just pass in the suffix ("one","two",etc.) along with the image number clicked on.

And rather than swapping select/noselect images, just hide/unhide the one that is always there.

No?

Burfodus
03-24-2012, 04:59 AM
yes, there are probably a lot of errors in my code lol, im not trained, just doing the best i can.

thanks for the code, ill give it a try, you also saved me repeating this 10 times, your new script will do all, hope it works

i will report back
steve

Burfodus
03-24-2012, 06:37 AM
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

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";
}
}
html for first tab

<div class="ftcontent" id="groupone"><!-- change options based on urltab seleced -->
<div id="headerDivImg">
<div id="popup">
<div id="titleTextImg">title for second tab content
</div>
<div class="cbselector"> <a href="javascript:emailtwo='variableOne0';" onclick="javascript:toggleany('one','0');" >

<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibility: hidden;"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/1.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">Gabon Ebony</p>
</div>
<table class="spandiv"><tr><td>
<div class="popupouter">
<div class="cbspanname">Gabon Ebony</div>
<div class="cbspansci">Diospyros crassiflora</div>
<div class="cbspaninfo">
<div class="spanimg"><img src="images/cb/timbers/icons/1.png" /></div>
<div class="spanblurb">From equato....s ago</div>
</div>
<div class="cbspanjanka"></div>
</div>

</td></tr></table>
</a>
</div><div class="cbselector"> <a href="javascript:emailtwo='variableOne1';" onclick="javascript:toggleany('one','1');" >

<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibility: hidden;"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/2.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">Purpleheart</p>
</div>
<table class="spandiv"><tr><td>
<div class="popupouter">
<div class="cbspanname">Purpleheart</div>
<div class="cbspansci">Peltogyne paniculata</div>
<div class="cbspaninfo">
<div class="spanimg"><img src="images/cb/timbers/icons/2.png" /></div>
<div class="spanblurb">A brilliantly .......s and truck floors.</div>
</div>
<div class="cbspanjanka"></div>
</div>

</td></tr></table>
</a>
</div><div class="cbselector"> <a href="javascript:emailtwo='variableOne2';" onclick="javascript:toggleany('one','2');" >

<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibility: hidden;"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/5.png" />


code for second tab

<div class="ftcontent" id="grouptwo"><!-- change options based on urltab seleced -->
<div id="headerDivImg">
<div id="popup">
<div id="titleTextImg">title for second tab content</div>
<div class="cbselector"> <a href="javascript:emailtwo='variableOne0';" onclick="javascript:toggleany('two','0');" >

<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibility: hidden;"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/1.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">Gabon Ebony</p>
</div>
<table class="spandiv"><tr><td>
<div class="popupouter">
<div class="cbspanname">Gabon Ebony</div>
<div class="cbspansci">Diospyros crassiflora</div>
<div class="cbspaninfo">
<div class="spanimg"><img src="images/cb/timbers/icons/1.png" /></div>
<div class="spanblurb">From equatorial Africa,...that was used by the Egyptian Pharaohs over 3,000 years ago</div>
</div>
<div class="cbspanjanka"></div>
</div>

</td></tr></table>
</a>
</div><div class="cbselector"> <a href="javascript:emailtwo='variableOne1';" onclick="javascript:toggleany('two','1');" >

<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibility: hidden;"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/2.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">Purpleheart</p>
</div>
<table class="spandiv"><tr><td>
<div class="popupouter">
<div class="cbspanname">Purpleheart</div>
<div class="cbspansci">Peltogyne paniculata</div>
<div class="cbspaninfo">
<div class="spanimg"><img src="images/cb/timbers/icons/2.png" /></div>
<div class="spanblurb">A brilliantly colorn be used for wharf pilings and truck floors.</div>
</div>
<div class="cbspanjanka"></div>
</div>

</td></tr></table>
</a>
</div><div class="cbselector"> <a href="javascript:emailtwo='variableOne2';" onclick="javascript:toggleany('two','2');" >

<div class="cbselectortoggle">
<img class="toggleimage" src="images/cb/select.png" style="visibility: hidden;"/>
</div>
<div class="cbtimbericon" >
<img class="toggleimage" src="images/cb/timbers/icons/5.png" />
</div>
<div class="cbtimbericonname">
<p class="cbtimbernamep">Bloodwood</p>


thanks
steve

Old Pedant
03-24-2012, 07:03 AM
Boggles my mind.

I don't have all your images, of course.

Can you put a page up (dummy url nobody will see, say) that uses that code and scheme without too much trouble?

As for putting the span/table/div close to the cursor: It's not that hard to do without jQuery, honest.

Here's a *VERY* old demo of mine (first written about 8 years ago) that does it with a popon calendar:
http://www.clearviewdesign.com/Newbie/Demos/poponCalendarDemo.shtml

I'm not proud of the code, but this has worked in all browsers since MSIE 5 and Netscape 6. Roughly 8 years, I believe.

Old Pedant
03-24-2012, 07:09 AM
The guts of the calendar positioning code is here:


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:


function toggleany(here,suffix,imagenum)

And then invoke it via onclick="javascript:toggleany(this,'two','1');"

Assuming we can get toggleany to work.

Burfodus
03-24-2012, 09:00 AM
well, i have had all these elements working together on the one page, so i know it works, i tested it first before writing the real page, url as above
http://www.zakscustomcues.com/modules/zakscustom/cuebuilder2.0.php

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.

will report back.
steve

Burfodus
03-24-2012, 09:18 AM
no change with the 'here and this' amendment.

i will have no hair left by the end of this

steve.

Burfodus
03-24-2012, 01:50 PM
still not working , pleeease help somebody, i have been stuck on this for three days now.

thanks in advance
steve

Burfodus
03-24-2012, 03:11 PM
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.

regards
steve

Old Pedant
03-24-2012, 11:18 PM
WOW! That boggles my mind even more!

When I get some time I'm going to go look at the code again!

Burfodus
03-25-2012, 01:18 AM
OK , so its not quite fixed.

go here
http://www.zakscustomcues.com/modules/zakscustom/cuebuilder2.0.php

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.

what the hell is going on!.
steve

Burfodus
03-25-2012, 12:11 PM
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)

please see the new version of the page here
http://www.zakscustomcues.com/modules/zakscustom/cuebuilder2.1.php

the script is

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 ...

<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>


which results in the html output of


<div id="groupone">
<div class="cbselector" id="popup">
<a onclick="javascript:toggleany(this,'one',0 ); emailone='variableOne0';">
<img class="toggleimage" id="cbselectortoggle" src="images/cb/select.png" style="visibility: hidden;" />
<img class="toggleimage" id="cbtimbericon" src="images/cb/timbers/icons/1.png" />
<em>Gabon Ebony</em>
<span>
<em class="spanem">Gabon Ebony</em>
<strong>Diospyros crassiflora</strong>
<img src="images/cb/timbers/icons/1.png" />
<small>From equatorial ..rk. Ebony is a treasured hardw... years ago</small>
<b></b>
</span>
</a>
</div>
<div class="cbselector" id="popup">
<a onclick="javascript:toggleany(this,'one',1 ); emailone='variableOne1';">
<img class="toggleimage" id="cbselectortoggle" src="images/cb/select.png" style="visibility: hidden;" />
<img class="toggleimage" id="cbtimbericon" src="images/cb/timbers/icons/2.png" />
<em>Purpleheart</em>
<span>
<em class="spanem">Purpleheart</em>
<strong>Peltogyne paniculata</strong>
<img src="images/cb/timbers/icons/2.png" />
<small>A brilliantly ......uck floors.</small>
<b></b>
</span>
</a>
</div>
<div id="spanclear"></div>
</div>
</li>


just in case it helps, im creating this site on a xoops platform, not sure if thats relevant or not.

thank you all for your help, im making this site for free for a friend, and really appreciate your assistance.
regards
steve

Burfodus
03-27-2012, 07:36 AM
please guys, surely someone is able to work this out, 5 days of my holidays spent on this, and still getting the same problem.

regards
steve

Burfodus
03-27-2012, 11:35 AM
OK, i actually worked out why it wasnt working.
been looking in the wrong place all along, not knowing if the contendDiv didnt exist for the function, it wouldnt work.

solved - finally
sb..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum