PDA

View Full Version : befuddled by foo



HippieChickie
07-20-2016, 11:57 PM
Hello

I have a working code that when you click an image in 1 div it shows a larger image & a few words.

I my html each div increases the number by 1 i.e.: foo1, foo2, foo3 & so on.

for some reason, foo9 & foo10 will not work & I cant seem to figure out why. :confused:

I have checked to make sure the image path is correct & all names are correct & everything looks good.

if anyone can pls help i would greatly appreciate it.

I have included the code/html but you can see it in action at: http://whambamgames.com/wb/formats/pattern.html & scroll down near bottom.


<script type="text/javascript">

function show_visibility(IDS){
hide_visibility();
document.getElementById(IDS).style.display = 'block';
}

function hide_visibility(){
var sel = document.getElementById('lnks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}

</script>




<tr>
<td class="auto-style1"><a href="#foo4" onclick="show_visibility('foo4')"><img border="0" src="images/pattern/smileyface.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo5" onclick="show_visibility('foo5')"><img border="0" src="images/xtreme/xtreme4.gif" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo6" onclick="show_visibility('foo6')"><img border="0" src="images/pattern/arrow.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo9" onclick="show_visibility('foo9')"><img border="0" src="images/pattern/rectangle.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo3" onclick="show_visibility('foo3')"><img border="0" src="images/pattern/plus.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo7" onclick="show_visibility('foo7')"><img border="0" src="images/pattern/butterfly.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo8" onclick="show_visibility('foo8')"><img border="0" src="images/pattern/corners.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo2" onclick="show_visibility('foo2')"><img border="0" src="images/pattern/cross.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo1" onclick="show_visibility('foo1')"><img border="0" src="images/pattern/pinwheel.jpg" width="75" height="150"></a></td>
<td class="auto-style1"><a href="#foo10" onclick="show_visibility('foo10')"><img border="0" src="images/pattern/rrtracks.jpg" width="75" height="148"></a></td>
<td class="auto-style1"><img border="0" src="images/pattern/blank.gif" width="75" height="150"></td>
</tr>





<div id="lnks" style="height: 300px; margin-left: 200px; margin-top: -2px; width: 592px;">


<div id='foo0' style="display:show; background: #ffffff; width:99%;">&nbsp;
<p style="width: 354px"><b><font face="Arial">Click any Image to see how to make it.</font></b></p>
<p><img border="0" src="images/pattern/blank.gif" width="168" height="333"></div>

<div id='foo1' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>PINWHEEL:</u></b><br> Do NOT let BALLS 2 & 4 get in the Home Triangle!</p>
<p><img border="0" src="images/pattern/pinwheel.jpg" width="168" height="333"></p>
<p>&nbsp;</div>

<div id='foo2' style="display:none; background: #ffffff; width:100%; ">&nbsp;
<p><b><u>CROSS:</u></b><br> 3 Players MUST only get BALL 3 in the Home Triangle! 1 Player must get BALL 3 & 4</p>
<p><img border="0" src="images/pattern/cross.jpg" width="168" height="333"></p>
<p>&nbsp;</div>

<div id='foo3' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>PLUS:</u></b><br> Do NOT let balls 1 & 2 get in the Home Triangle!</p>
<p><img border="0" src="images/pattern/plus.jpg" width="168" height="333"></p>
<p>&nbsp;</div>

<div id='foo4' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>SMILEY FACE:</u></b><br> 1 Player MUST get BALLS 1,4 and 2 in the Home Triangle,<br> Their pard must get BALLS 1 and 2 in.</p><p> The other Pards must get in BALL 2 and his pard BALL 1</p>
<p>&nbsp;</p>
<p><img border="0" src="images/pattern/smileyface.jpg" width="168" height="333"></div>

<div id='foo5' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>SNOWFLAKE:</u></b><br> Do NOT let BALL 4 get in the Home Triangle!</p>
<p><img border="0" src="images/pattern/snowflake.gif" width="168" height="333"></p>
<p>&nbsp;</div>

<div id='foo6' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>ARROW:</u></b><br> 1 Player MUST get ALL 4 BALLs in the Home Triangle! Their Pard must get BALL 3 & 4 in <br> The other 2 players must get BALL 2 in and his Pard must get in BALL 1</p>
<p><img border="0" src="images/pattern/arrow.jpg" width="168" height="333"></p>
<p>&nbsp;</div>

<div id='foo7' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>BUTTERFLY:</u></b><br> 1 Player MUST get BALLs 1, 2 & 3 in the Home Triangle. His Pard must ONLY get BALL 3 in <br> The other 2 players must get BALLS 1, 2 and 4 in the Home Triangle!</p>
<p><img border="0" src="images/pattern/butterfly.jpg" width="168" height="333"></p>
<p>&nbsp;</div>

<div id='foo8' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/corners.jpg" width="168" height="333"> <p>&nbsp;

<div id='foo9' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333"> <p>&nbsp;

<div id='foo10' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333"> <p>&nbsp;

<div>
</div>
</div>

</div>
</p>


thanks
HippieChickie

jscheuer1
07-21-2016, 02:55 AM
This:


<div id='foo8' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/corners.jpg" width="168" height="333"> <p>&nbsp;

<div id='foo9' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333"> <p>&nbsp;

<div id='foo10' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333"> <p>&nbsp;

<div>
</div>
</div>

</div>
</p>

Should probably be:


<div id='foo8' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>CORNERS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/corners.jpg" width="168" height="333"> <p>&nbsp;</div>

<div id='foo9' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>RECTANGLE:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rectangle.jpg" width="168" height="333"> <p>&nbsp;</div>

<div id='foo10' style="display:none; background: #ffffff; width:100%;">&nbsp;
<p><b><u>RAILROAD TRACKS:</u></b><br> Do NOT let balls 3 & 4 get in the Home Triangle! </p>
<p><img border="0" src="images/pattern/rrtracks.jpg" width="168" height="333"> <p>&nbsp;
</div>

</div>
</p>

In any case there are missing closing </div> tags such that foo9 and 10 appear to the browser to be a part of foo8.

HippieChickie
07-22-2016, 05:36 AM
thanks so much! you are brilliant! that was exactly the problem!

Have a great day!
HippieChickie

styxlawyer
07-22-2016, 04:31 PM
As my previous post was removed without comment or reason given, I'll repeat it. Whereas earlier it was only 50+ errors, there are now over 100 errors in your page which the W3C Validator has picked up.

Link (https://validator.w3.org/check?uri=http%3A%2F%2Fwhambamgames.com%2Fwb%2Fformats%2Fpattern.html&charset=%28detect+automatically%29&doctype=Inline&group=0)

Using the W3C Validator (https://validator.w3.org) will frequently help you find simple errors yourself.

jscheuer1
07-23-2016, 01:39 AM
It is desirable to have valid code/markup - yet it's not essential. I would go further. It's a very good idea to have valid code/markup. That said - when a perfectly good solution has already been offered, I think it's also a very good idea to wait until the OP has digested and responded to that before anyone goes about harping about valid code/markup. Once that has happened (the OP has gotten and acknowledged their answer), then it's fine to harp on fundamentals - or whatever anyone might want to add, as long as it's constructive.

I would go further. If fundamentals are your main thing - you should probably blog about them (You can even do that here - the DD forum has free blogging available for regular participants such as yourself). The forum here is more about solutions to specific issues.

That said - I admit it's a gray area. If you get there first - fine, talk about valid markup all you want. If you are not first on the scene though, unless the advice already given is obviously wrong, PLEASE give the OP a chance to digest it before adding your own 2 cents.