/    Sign up×
Community /Pin to ProfileBookmark

special condition of selecting between divs

Copy linkTweet thisAlerts:
Sep 12.2015

I am not sure if I am explaining this correctly, or if I am even searching properly, but I cannot find an answer to my problem.

What I want to do is to have a set of options (links or buttons) on one section of the page (using select tags) that link to a single specific different portion of the page. This section will contain the contents of the div container specified by the link in the selection group. The page fits a screen and is not scroll-able in either direction, unless the user’s resolution is less than 1024×800.

I don’t have any code to show as I have not determined the final layout of the page yet, but I can give a simple representation of what the screen will look like. I am not asking anyone to write my code for me; rather, I am asking for help in how to write the javascript to make it work.

I do have some HTML code written for the display, but it does not contain the select routine yet as I was doing separate pages for each different div. I just thought that I could probably simplify things more if I could contain all the different div’s in one page and just select between them.

[code]
+—————-+————+————————————————+
| div select 1 | |This is the area that will hold the contents |
| div select 2 | |of the div selected by the button or link at |
| div select 3 | |the left. This area may or may not have a |
+—————-+ |vertical scroll bar, depending on the content |
| |of the div. This is an over-simplified diagram. |
| | |
| |I already know how to add the scroll bar to the |
| |div. |
| | |
+—————————–+————————————————+
[/code]

to post a comment
JavaScript

22 Comments(s) ↴

Copy linkTweet thisAlerts:
@WayneCaauthorSep 12.2015 — I found that my original files are still on my other computer, which is stored for now. I wrote a quick new page, in which I used tables for expediency, but the divs are there. I have been able to make it work the way I want to for the most part, but am still having difficulty with one thing.

I can show/hide each div as I click each ones individual link, but I want to be able to hide any visible div when another is made visible. It is not working. Below is the code I have so far. Yes I know that I am using some deprecated tags, but this was a quick and dirty write just to get the point across, not one that would be published.

The way it is currently working is that I can have all 3 divs visible at once, which is not what I want.

I do want for the page to start with all divs hidden.

I do want that any visible div gets hidden when another div is being made visible.

I do want that if you click the last link clicked to make a div visible, the div will become hidden, leaving the table to the right blank, as it was when you opened the page.

If you click each divs link a second time, it will hide that div, but clicking to show or hide has no impact on the other divs.

<i>
</i>&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Sample Solution Page&lt;/TITLE&gt;
&lt;SCRIPT type="text/javascript"&gt;
function visInvis(id) {
var a = document.getElementById(mySol);
var b = document.getElementById(YASS);
var c = document.getElementById(Tak);
var e = document.getElementById(id);
if(e == a &amp;&amp; e.style.display == 'none') {
b.style.display = 'none';
c.style.display = 'none';
}
if(e == b &amp;&amp; e.style.display == 'none') {
a.style.display = 'none';
c.style.display = 'none';
}
if(e == c &amp;&amp; e.style.display == 'none') {
a.style.display = 'none';
b.style.display = 'none';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
&lt;/SCRIPT&gt;
&lt;STYLE&gt;
#mySol { display: none; }
#YASS { display: none; }
#Tak { display: none; }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;TABLE align="left" valign="top" width="14%" cellspacing=0&gt;
&lt;TR&gt;&lt;TH align="left" colspan="2"&gt;Puzzle Name&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Width:&lt;/TD&gt;&lt;TH&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Height:&lt;/TD&gt;&lt;TH&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Boxes/Goals:&lt;/TD&gt;&lt;TH&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;A onClick="visInvis('mySol');"&gt;&lt;B&gt;My Solution&lt;/B&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;A onClick="visInvis('YASS');"&gt;&lt;B&gt;YASS Solution&lt;/B&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;A onClick="visInvis('Tak');"&gt;&lt;B&gt;Takaken Solution&lt;/B&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE align="left" valign="top" border="1" width="15%" height="300" cellspacing=0&gt;
&lt;CAPTION align="top"&gt;&lt;B&gt;Puzzle&lt;/B&gt;&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE align="right" valign="top" border="1" width="70%" height="600" cellspacing=0&gt;
&lt;CAPTION align="top"&gt;&lt;B&gt;Solution&lt;/B&gt;&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD valign="top"&gt;
&lt;DIV id=mySol&gt;My Solution&lt;/DIV&gt;
&lt;DIV id=YASS&gt;YASS Solution&lt;/DIV&gt;
&lt;DIV id=Tak&gt;Takaken Solution&lt;/DIV&gt;
&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
Copy linkTweet thisAlerts:
@WayneCaauthorSep 12.2015 — I replaced the above javascript with the following, which made the whole thing stop working. I could really use some help on this one.

<i>
</i>&lt;SCRIPT type="text/javascript"&gt;
function visInvis(id) {
var a = document.getElementById(mySol);
var b = document.getElementById(YASS);
var c = document.getElementById(Tak);
var e = document.getElementById(id);
if(a.style.display == 'block')
a.style.display = 'none';
if(b.style.display == 'block')
b.style.display = 'none';
if(c.style.display == 'block')
c.style.display = 'none';
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
&lt;/SCRIPT&gt;
Copy linkTweet thisAlerts:
@WayneCaauthorSep 13.2015 — I found a large part of the problem. The var definitions for a, b, and c needed to have the id names in single quotes. That corrected the problem of more than one div being open at once. The second post's if statements were used, not the originals. The new problem is now when I click the last link clicked a second time it has no impact on the visible div. It remains visible. I am looking for a correction that will fix this, and then the code will work as expected.
Copy linkTweet thisAlerts:
@WayneCaauthorSep 13.2015 — Well, using the original if statements worked. With the id names in single quotes, the links hide and show each div and when clicking on a different one after making one visible, the visible one becomes hidden and the new one is visible. Then clicking that link a second time hides the div and the table is empty. Note that the links do not appear as hyperlinks. While the code uses the 'A' tag, it does not use the 'href' attribute. The anchor contains only the 'onClick' attribute. The final version of the code is as follows:

<i>
</i>&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Sample Solution Page&lt;/TITLE&gt;
&lt;SCRIPT type="text/javascript"&gt;
function visInvis(id) {
var a = document.getElementById('mySol');
var b = document.getElementById('YASS');
var c = document.getElementById('Tak');
var e = document.getElementById(id);
if(e == a &amp;&amp; e.style.display == 'none') {
b.style.display = 'none';
c.style.display = 'none';
}
if(e == b &amp;&amp; e.style.display == 'none') {
a.style.display = 'none';
c.style.display = 'none';
}
if(e == c &amp;&amp; e.style.display == 'none') {
a.style.display = 'none';
b.style.display = 'none';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
&lt;/SCRIPT&gt;
&lt;STYLE&gt;
#mySol { display: none; }
#YASS { display: none; }
#Tak { display: none; }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;TABLE align="left" valign="top" width="14%" cellspacing=0&gt;
&lt;TR&gt;&lt;TH align="left" colspan="2"&gt;Puzzle Name&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Width:&lt;/TD&gt;&lt;TH&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Height:&lt;/TD&gt;&lt;TH&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Boxes/Goals:&lt;/TD&gt;&lt;TH&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;A onClick="visInvis('mySol');"&gt;&lt;B&gt;My Solution&lt;/B&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;A onClick="visInvis('YASS');"&gt;&lt;B&gt;YASS Solution&lt;/B&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;A onClick="visInvis('Tak');"&gt;&lt;B&gt;Takaken Solution&lt;/B&gt;&lt;/A&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE align="left" valign="top" border="1" width="15%" height="300" cellspacing=0&gt;
&lt;CAPTION align="top"&gt;&lt;B&gt;Puzzle&lt;/B&gt;&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE align="right" valign="top" border="1" width="70%" height="600" cellspacing=0&gt;
&lt;CAPTION align="top"&gt;&lt;B&gt;Solution&lt;/B&gt;&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD valign="top"&gt;
&lt;DIV id=mySol&gt;My Solution&lt;/DIV&gt;
&lt;DIV id=YASS&gt;YASS Solution&lt;/DIV&gt;
&lt;DIV id=Tak&gt;Takaken Solution&lt;/DIV&gt;
&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;


I hope that this helps someone else who needs it. It was fun figuring this out, but help would have been appreciated anyway.
Copy linkTweet thisAlerts:
@WayneCaauthorSep 13.2015 — It seems I was premature in my assertion that the code works. There is a problem which I cannot see the cause of, or the solution to. I will explain.

The expected behavior:

Click button 'mySol' makes div My solution visible

Click button 'YASS' makes div My solution hidden and div YASS solution visible

Click button 'Tak' makes div YASS solution hidden and div Takaken solution visible

This works as expected, only [B][I]after[/I][/B] the first time you click all three buttons. The first time through does the following (and is repeatable by refreshing the page):

Click button 'mySol' makes div My solution visible

Click button 'YASS' leaves div My solution visible and makes div YASS solution visible

Click button 'Tak' leaves divs My solution and YASS solution visible and makes div Takaken solution visible

Click button 'mySol' leaves divs YASS solution and Takaken solution visible and makes div My solution hidden

Click button 'YASS' leaves div Takaken solution visible and makes div YASS solution hidden

Click button 'Tak' makes div Takaken solution hidden

These can be done in any order with the same result. After the last div is hidden again the function works properly and one div is visible at a time. I do not understand what is causing this problem, and need some help correcting it.

I have changed the code so that it complies with html5 more (the bold tags used in the captions are still there), and changed the anchor tags to buttons. I also did some display corrections to the tables so that things would remain pretty much fixed and not jump around when changes are made to the numbers in the left table.

Any help is appreciated.

Here is the code:
<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Sample Solution Page&lt;/TITLE&gt;
&lt;SCRIPT type="text/javascript"&gt;
function visInvis(id) {
var a = document.getElementById('mySol');
var b = document.getElementById('YASS');
var c = document.getElementById('Tak');
var e = document.getElementById(id);
if(e == a &amp;&amp; e.style.display == 'none') {
b.style.display = 'none';
c.style.display = 'none';
}
if(e == b &amp;&amp; e.style.display == 'none') {
a.style.display = 'none';
c.style.display = 'none';
}
if(e == c &amp;&amp; e.style.display == 'none') {
a.style.display = 'none';
b.style.display = 'none';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
&lt;/SCRIPT&gt;
&lt;STYLE type="text/css"&gt;
#mySol { display: none; }
#YASS { display: none; }
#Tak { display: none; }
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;TABLE align="left" valign="top" width="16%"&gt;
&lt;TR&gt;&lt;TH align="left" colspan="2"&gt;Puzzle Name&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Width:&lt;/TD&gt;&lt;TH width="50%"&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Height:&lt;/TD&gt;&lt;TH width="50%"&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Boxes/Goals:&lt;/TD&gt;&lt;TH width="50%"&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution"&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH width="50%"&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution"&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH width="50%"&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution"&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves/Pushes:&lt;/TD&gt;&lt;TH width="50%"&gt;0/0&lt;/TH&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE align="left" valign="top" border="1" width="15%" height="300" cellspacing=0&gt;
&lt;CAPTION align="top"&gt;&lt;B&gt;Puzzle&lt;/B&gt;&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE align="right" valign="top" border="1" width="68%" height="600" cellspacing=0&gt;
&lt;CAPTION align="top"&gt;&lt;B&gt;Solution&lt;/B&gt;&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD valign="top"&gt;
&lt;DIV id=mySol&gt;My Solution&lt;/DIV&gt;
&lt;DIV id=YASS&gt;YASS Solution&lt;/DIV&gt;
&lt;DIV id=Tak&gt;Takaken Solution&lt;/DIV&gt;
&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
Copy linkTweet thisAlerts:
@xelawhoSep 14.2015 — Here is a simple version of what I think you are trying to do. All you have to do is make sure the id's on the buttons and the divs match up. You can get around that, too, but I think it may be more trouble than it is worth for what you are trying to achieve.
[code=php]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.hid { display: none; }
</style>
</head>

<body>
<div id="btnwrap">
<button id="mysol">My Solution</button><br>
<button id="yasol">Yass Solution</button><br>
<button id="taksol">Tak Solution</button><br>
</div>
<div id="mysoldiv" class="hid">This is my Solution</div>
<div id="yasoldiv" class="hid">This is Yass Solution</div>
<div id="taksoldiv" class="hid">This is Tak Solution</div>
<script>
(function(){
var showndiv=false;
document.getElementById("btnwrap").onclick=function(e){
var e = e || window.event;
var targ = e.target || e.srcElement;
if(targ.tagName.toUpperCase()=="BUTTON"){
var thediv=document.getElementById(targ.id+"div");
if(showndiv){showndiv.className=showndiv.className+" hid"};
thediv.className=thediv.className.replace("hid","");
showndiv=thediv;
}
}
})();
</script>
</body>

</html>
[/code]
Copy linkTweet thisAlerts:
@WayneCaauthorSep 14.2015 — Here is a simple version of what I think you are trying to do.[/QUOTE]

Actually, I found out that I can't use e.style.display with style rules defined in style tags. It required that code to be inline as the rest of the style code is. When I made that change everything worked as expected. I only just got onto this site to report this, and saw your response. Thank you for attempting to answer my question. ?

Now I have another issue related to the buttons that may need a javascript answer.

The default appearance of the buttons in FF, Chrome and IE9 is acceptable, but I would like to use the depressed form the button has when the mouse button is being held down as a means of showing which button has been pressed. It would return to normal state either when the button is clicked a second time, or when another button is clicked.

I have been trying css answers alone, but it appears that css alone is not the answer, and it may require some javascript to make it work. Back in the HTML 2.0/3.2 days I used javascript and images to achieve this effect, but I don't have that code anymore and can't recall how I did it. Any help on this would be appreciated.
Copy linkTweet thisAlerts:
@Kevin2Sep 14.2015 — A couple of CSS ideas for you to try on your "buttons". The first allows a second click of the "button" to return it to a normal state. The second is a mutually exclusive set of buttons. How you would incorporate either into your existing code is up to you.
[code=html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS "buttons"</title>
<style>
input {
display: none;
}

div {
line-height: 40px;
}

label {
background-color: gray;
padding: 3px;
margin: 2px;
color: #000;
font-weight: bold;
cursor: pointer;
border: 5px outset;
}

input[type=checkbox]:checked ~ label{ border: 5px inset; }

</style>
</head>
<body>

<div><input type="checkbox" id="mySolcontrol"><label for="mySolcontrol">My Solution</label></div>
<div><input type="checkbox" id="YASScontrol"><label for="YASScontrol">YASS Solution</label></div>
<div><input type="checkbox" id="Takcontrol"><label for="Takcontrol">Takaken Solution</label></div>
</body>
</html>[/code]

[code=html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS "buttons"</title>
<style>
input {
display: none;
}

div {
line-height: 40px;
}

label {
background-color: gray;
padding: 3px;
margin: 2px;
color: #000;
font-weight: bold;
cursor: pointer;
border: 5px outset;
}

input[type=radio]:checked ~ label{ border: 5px inset; }

</style>
</head>
<body>

<div><input type="radio" name="control" id="mySolcontrol"><label for="mySolcontrol">My Solution</label></div>
<div><input type="radio" name="control" id="YASScontrol"><label for="YASScontrol">YASS Solution</label></div>
<div><input type="radio" name="control" id="Takcontrol"><label for="Takcontrol">Takaken Solution</label></div>
<!-- a fourth button could be added here to clear everything and return the above buttons to "normal" -->
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@WayneCaauthorSep 17.2015 — Thanks to everyone who helped me with this issue. I have found a better solution for my purposes. Below is the final version of the code. In this version, I am merely changing the font color when the button is clicked, teal when you click it once, black if you click a different button or click the same button a second time. I am doing it all from within the javascript. In the fix, my rollover highlite broke, and the fix was to use onMouseOver and onMouseOut instead of using :hover in style tags in the head.

The code is too long to put in this post, so I will put it into the next post. Also, I cleaned up the code and it is html5 compliant now.
Copy linkTweet thisAlerts:
@WayneCaauthorSep 17.2015 — <i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;Sample Solution Page&lt;/TITLE&gt;
&lt;SCRIPT type="text/javascript"&gt;
&lt;!--
function visInvis(id,id1,id2,id3,id4,id5,id6) {

<i> </i> var a = document.getElementById('mySol');
<i> </i> var a1 = document.getElementById('MM');
<i> </i> var a2 = document.getElementById('MP');
<i> </i> var a3 = document.getElementById('MBL');
<i> </i> var a4 = document.getElementById('MBC');
<i> </i> var a5 = document.getElementById('MPS');
<i> </i> var a6 = document.getElementById('MPL');

<i> </i> var b = document.getElementById('YASS');
<i> </i> var b1 = document.getElementById('YM');
<i> </i> var b2 = document.getElementById('YP');
<i> </i> var b3 = document.getElementById('YBL');
<i> </i> var b4 = document.getElementById('YBC');
<i> </i> var b5 = document.getElementById('YPS');
<i> </i> var b6 = document.getElementById('YPL');

<i> </i> var c = document.getElementById('Tak');
<i> </i> var c1 = document.getElementById('TM');
<i> </i> var c2 = document.getElementById('TP');
<i> </i> var c3 = document.getElementById('TBL');
<i> </i> var c4 = document.getElementById('TBC');
<i> </i> var c5 = document.getElementById('TPS');
<i> </i> var c6 = document.getElementById('TPL');

<i> </i> var d;
<i> </i> var d1 = document.getElementById('MS');
<i> </i> var d2 = document.getElementById('YS');
<i> </i> var d3 = document.getElementById('TS');

<i> </i> var e = document.getElementById(id);
<i> </i> var e1 = document.getElementById(id1);
<i> </i> var e2 = document.getElementById(id2);
<i> </i> var e3 = document.getElementById(id3);
<i> </i> var e4 = document.getElementById(id4);
<i> </i> var e5 = document.getElementById(id5);
<i> </i> var e6 = document.getElementById(id6);

<i> </i> if(e == a &amp;&amp; e.style.display == 'none') {
<i> </i> d = d1;
<i> </i> b.style.display = 'none';
<i> </i> b1.style.display = 'none';
<i> </i> b2.style.display = 'none';
<i> </i> b3.style.display = 'none';
<i> </i> b4.style.display = 'none';
<i> </i> b5.style.display = 'none';
<i> </i> b6.style.display = 'none';
<i> </i> d2.style.color = 'black';

<i> </i> c.style.display = 'none';
<i> </i> c1.style.display = 'none';
<i> </i> c2.style.display = 'none';
<i> </i> c3.style.display = 'none';
<i> </i> c4.style.display = 'none';
<i> </i> c5.style.display = 'none';
<i> </i> c6.style.display = 'none';
<i> </i> d3.style.color = 'black';
<i> </i> }

<i> </i> if(e == b &amp;&amp; e.style.display == 'none') {
<i> </i> d = d2;
<i> </i> a.style.display = 'none';
<i> </i> a1.style.display = 'none';
<i> </i> a2.style.display = 'none';
<i> </i> a3.style.display = 'none';
<i> </i> a4.style.display = 'none';
<i> </i> a5.style.display = 'none';
<i> </i> a6.style.display = 'none';
<i> </i> d1.style.color = 'black';

<i> </i> c.style.display = 'none';
<i> </i> c1.style.display = 'none';
<i> </i> c2.style.display = 'none';
<i> </i> c3.style.display = 'none';
<i> </i> c4.style.display = 'none';
<i> </i> c5.style.display = 'none';
<i> </i> c6.style.display = 'none';
<i> </i> d3.style.color = 'black';
<i> </i> }

<i> </i> if(e == c &amp;&amp; e.style.display == 'none') {
<i> </i> d = d3;
<i> </i> a.style.display = 'none';
<i> </i> a1.style.display = 'none';
<i> </i> a2.style.display = 'none';
<i> </i> a3.style.display = 'none';
<i> </i> a4.style.display = 'none';
<i> </i> a5.style.display = 'none';
<i> </i> a6.style.display = 'none';
<i> </i> d1.style.color = 'black';

<i> </i> b.style.display = 'none';
<i> </i> b1.style.display = 'none';
<i> </i> b2.style.display = 'none';
<i> </i> b3.style.display = 'none';
<i> </i> b4.style.display = 'none';
<i> </i> b5.style.display = 'none';
<i> </i> b6.style.display = 'none';
<i> </i> d2.style.color = 'black';
<i> </i> }

<i> </i> if(e == a &amp;&amp; e.style.display == 'block')
<i> </i> d = d1;
<i> </i> if(e == b &amp;&amp; e.style.display == 'block')
<i> </i> d = d2;
<i> </i> if(e == c &amp;&amp; e.style.display == 'block')
<i> </i> d = d3;

<i> </i> if(e.style.display == 'block') {
<i> </i> e.style.display = 'none';
<i> </i> e1.style.display = 'none';
<i> </i> e2.style.display = 'none';
<i> </i> e3.style.display = 'none';
<i> </i> e4.style.display = 'none';
<i> </i> e5.style.display = 'none';
<i> </i> e6.style.display = 'none';
<i> </i> d.style.color = 'black';
<i> </i> }
<i> </i> else {
<i> </i> e.style.display = 'block';
<i> </i> e1.style.display = 'block';
<i> </i> e2.style.display = 'block';
<i> </i> e3.style.display = 'block';
<i> </i> e4.style.display = 'block';
<i> </i> e5.style.display = 'block';
<i> </i> e6.style.display = 'block';
<i> </i> d.style.color = 'teal';
<i> </i> }
<i> </i> }

<i> </i> function selectText(divID) //divID contains actual id of ‘div’ element
<i> </i> {
<i> </i> var textC=document.getElementById(divID);
<i> </i> if (document.selection)
<i> </i> {
<i> </i> //Portion for IE
<i> </i> var div = document.body.createTextRange();
<i> </i> div.moveToElementText(textC);
<i> </i> div.select();
<i> </i> }
<i> </i> else
<i> </i> {
<i> </i> //Portion for FF
<i> </i> var div = document.createRange();
<i> </i> div.setStartBefore(textC);
<i> </i> div.setEndAfter(textC);
<i> </i> window.getSelection().addRange(div);
<i> </i> }
<i> </i> }
<i> </i>--&gt;
<i> </i>&lt;/SCRIPT&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;TABLE style="float: left; vertical-align: top; width: 17%;"&gt;
&lt;TR&gt;&lt;TH style="text-align: left; width: 65%;"&gt;Collection:&lt;/TH&gt;&lt;TH style="width: 35%;"&gt;Revenge&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TH style="text-align: left;"&gt;Level #:&lt;/TH&gt;&lt;TH style="width: 30%;"&gt;1&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TH style="text-align: left; vertical-align: top; height: 49.5pt;" colspan="2"&gt;Puzzle Name&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;HR&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Width:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Height:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Boxes/Goals:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;0&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;HR&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2" style="text-align: center;"&gt;&lt;INPUT type="button" id=MS
style="font-weight: bold;" onMouseOver="this.style.color='teal'"
onMouseOut="this.style.color='black'"
onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL');
selectText('mySol');" value="My Solution"&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2" style="text-align: center;"&gt;&lt;INPUT type="button" id=YS
style="font-weight: bold;" onMouseOver="this.style.color='teal'"
onMouseOut="this.style.color='black'"
onClick="visInvis('YASS','YM','YP','YBL','YBC','YPS','YPL');
selectText('YASS');" value="YASS Solution"&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2" style="text-align: center;"&gt;&lt;INPUT type="button" id=TS
style="font-weight: bold;" onMouseOver="this.style.color='teal'"
onMouseOut="this.style.color='black'"
onClick="visInvis('Tak','TM','TP','TBL','TBC','TPS','TPL');
selectText('Tak');" value="Takaken Solution"&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;HR&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Moves:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;
&lt;DIV id=MM style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=YM style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=TM style="display: none;"&gt;0&lt;/DIV&gt;&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Pushes:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;
&lt;DIV id=MP style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=YP style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=TP style="display: none;"&gt;0&lt;/DIV&gt;&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Box lines:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;
&lt;DIV id=MBL style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=YBL style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=TBL style="display: none;"&gt;0&lt;/DIV&gt;&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Box changes:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;
&lt;DIV id=MBC style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=YBC style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=TBC style="display: none;"&gt;0&lt;/DIV&gt;&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Pushing sessions:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;
&lt;DIV id=MPS style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=YPS style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=TPS style="display: none;"&gt;0&lt;/DIV&gt;&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD&gt;Pusher lines:&lt;/TD&gt;&lt;TH style="width: 30%;"&gt;
&lt;DIV id=MPL style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=YPL style="display: none;"&gt;0&lt;/DIV&gt;
&lt;DIV id=TPL style="display: none;"&gt;0&lt;/DIV&gt;&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;&lt;HR&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;&lt;TD colspan="2"&gt;Inactive button means no solution available. Some puzzles YASS cannot solve,
some Takaken cannot solve, and some I have not solved.&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE style="float: right; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
width: 42%; height: 650px;"&gt;
&lt;CAPTION style="align: top; text-align: left; font-weight: bold;"&gt;Solution&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD style="vertical-align: top;"&gt;
&lt;DIV id=mySol style="display: none; width: 520px; height: 640px; word-wrap: break-word;
overflow: auto;"&gt;My Solution&lt;/DIV&gt;
&lt;DIV id=YASS style="display: none; width: 520px; height: 640px; word-wrap: break-word;
overflow: auto;"&gt;YASS Solution&lt;/DIV&gt;
&lt;DIV id=Tak style="display: none; width: 520px; height: 640px; word-wrap: break-word;
overflow: auto;"&gt;Takaken Solution&lt;/DIV&gt;
&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;TABLE style="float: center; border: 1px solid; border-spacing: 0px; padding: 3px; vertical-align: top;
width: 40.3%; height: 650px;"&gt;
&lt;CAPTION style="align: top; text-align: left; font-weight: bold;"&gt;Puzzle&lt;/CAPTION&gt;
&lt;TR&gt;&lt;TD&gt;
&lt;PRE style="text-align: center;"&gt;&lt;/PRE&gt;
&lt;/TD&gt;&lt;/TR&gt;
&lt;/TABLE&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
Copy linkTweet thisAlerts:
@Kevin2Sep 17.2015 — But all this (X 3-4):
&lt;INPUT type="button" id=MS style="font-weight: bold;" onMouseOver="this.style.color='teal'" onMouseOut="this.style.color='black'" onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL'); selectText('mySol');" value="My Solution"&gt;

could be replaced by:
[code=html]<button id="MS" onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL'); selectText('mySol');">My Solution</button>[/code]
with this CSS;
button {
font-weight: bold;
color: #000;
}
button:hover {
color: teal;
}

And [b]text-align:left;[/b] is default for all elements. So unless you are counteracting a parent element's text alignment that's redundant.

There's probably more, but that's what stuck out to me... ?
Copy linkTweet thisAlerts:
@WayneCaauthorSep 17.2015 — But all this (X 3-4):
&lt;INPUT type="button" id=MS style="font-weight: bold;" onMouseOver="this.style.color='teal'" onMouseOut="this.style.color='black'" onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL'); selectText('mySol');" value="My Solution"&gt;

could be replaced by:
[code=html]<button id="MS" onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL'); selectText('mySol');">My Solution</button>[/code]
with this CSS;
button {
font-weight: bold;
color: #000;
}
button:hover {
color: teal;
}

And [b]text-align:left;[/b] is default for all elements. So unless you are counteracting a parent element's text alignment that's redundant.

There's probably more, but that's what stuck out to me... ?[/QUOTE]

I could not use the style tags to set the colors because the javascript does not work with them. The e.style.display syntax only works with inline style.

The onMouseOver and onMouseOut code was intended to fix a problem where the highlite was not properly being rendered. Let me explain. The way it was supposed to work was that the rollover changes the text color of the button as you move the mouse pointer over them, alternating between teal (mouseover) and black (mouseout). When you click a button, the button remains "selected" by the teal color remaining on the button text after you move the mouse pointer off the button, and remaining that way until you click another button or the same button again. Moving the pointer over the other buttons still has the effect of changing between teal and black, but having no effect on the selected button. I was using style tags with the css input:hover { color: teal; } before, but moving the pointer over a different button was overriding the "selected" teal color and making it become black again.

Well, the fix ended up not working, so I removed the onmouseover and onmouseout attributes.. The lines now read:

[code=html]
 <TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=MS
style="font-weight: bold;"
onClick="visInvis('mySol','MM','MP','MBL','MBC','MPS','MPL');
selectText('mySol');" value="My Solution"></TD></TR>
<TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=YS
style="font-weight: bold;"
onClick="visInvis('YASS','YM','YP','YBL','YBC','YPS','YPL');
selectText('YASS');" value="YASS Solution"></TD></TR>
<TR><TD colspan="2" style="text-align: center;"><INPUT type="button" id=TS
style="font-weight: bold;"
onClick="visInvis('Tak','TM','TP','TBL','TBC','TPS','TPL');
selectText('Tak');" value="Takaken Solution"></TD></TR>
[/code]

Since the color change on the rollover was not working, and I could not solve the issue, I opted to leave that part out. The buttons highlite when you move over them in the normal way (the background color changes slightly and the border color changes), and when you click a button the selected color (teal) is applied and remains until you click another button or the same button again.

The text-align: left items are because I am overriding the normal behavior of the TH heading tag to center the text. I am using only inline style in this page because every attempt I have made using style tags has not produced the desired results, but the inline styles are working well.

I could have used <button> instead of <input type="button">, but I didn't want to chance that some hidden behavior of the <button> version would cause me problems.
Copy linkTweet thisAlerts:
@Kevin2Sep 18.2015 — Since the color change on the rollover was not working, and I could not solve the issue, I opted to leave that part out. The buttons highlite when you move over them in the normal way (the background color changes slightly and the border color changes), and when you click a button the selected color (teal) is applied and remains until you click another button or the same button again.[/quote]
[B]onmouseover[/B] and [B]:hover[/B] (shown below) should not be deal breakers. If they are you are coding for the wrong millenium (or at least the wrong decade ?). Touch-screen devices (phone, tablet, phablet, and even some laptops) have no "onmouseover" or ":hover". Pointing your finger at a button, whether it's <button> or <input type="button"> won't do a thing.

The text-align: left items are because I am overriding the normal behavior of the TH heading tag to center the text.[/quote]
TH stands for Table Heading. Don't use it because it's bold and centered. Well, you don't even want the text centered, so ... why? Use [B]<td><b>mytext</b></td>[/B] instead.

I could have used <button> instead of <input type="button">, but I didn't want to chance that some hidden behavior of the <button> version would cause me problems.[/QUOTE]
Wow! Hidden behavior? Is there some sort of secret <button> conspiracy? I need to join this underground <button> society. ? All kidding aside the only difference between <button> and <input type="button"> is that you cannot assign a value to <button> for form submission, as in <button value="my_button_value">. Which in your case doesn't make any difference.

Some code was promised above. Perhaps this unholy mashup of some code I posted previously and xelawho's code (with apologies) will inspire you to greatness. No <button>s were harmed in the creation of this code. Rest easy. ?
[code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
.hid, input {
display: none;
}

#btnwrap, #solutions {
display: inline-block;
vertical-align: top;
}

#btnwrap div {
width: 10em;
height: 2em;
}

label {
display: block;
background-color: light gray;
padding: 3px;
color: #000;
font-weight: bold;
cursor: pointer;
border: outset;
text-align: center;
}
label:hover {
color: teal;
}

input[type=radio]:checked ~ label{ border: inset; color: teal; }
</style>
</head>
<body>

<div id="btnwrap">
<div><input type="radio" name="control" id="mySolcontrol"><label for="mySolcontrol" id="mysol">My Solution</label></div>
<div><input type="radio" name="control" id="YASScontrol"><label for="YASScontrol" id="yasol">YASS Solution</label></div>
<div><input type="radio" name="control" id="Takcontrol"><label for="Takcontrol" id="taksol">Takaken Solution</label></div>
<div><input type="radio" name="control" id="hide" checked><label for="hide" id="hidden">Hide solutions</label></div>
</div>

<div id="solutions">
<div id="mysoldiv" class="hid">This is my Solution</div>
<div id="yasoldiv" class="hid">This is YASS Solution</div>
<div id="taksoldiv" class="hid">This is Takaken Solution</div>
<div id="hiddendiv" class="hid"></div> <!-- an empty DIV is kinda hacky but it works -->
</div>

<script>
(function(){
var showndiv=false;
document.getElementById("btnwrap").onclick = function(e){
var e = e || window.event,
targ = e.target || e.srcElement;
if(targ.tagName.toUpperCase() == "LABEL"){
var thediv = document.getElementById(targ.id+"div");
if(showndiv){
showndiv.className=showndiv.className+" hid";
}
thediv.className = thediv.className.replace("hid","");
showndiv = thediv;
}
}
})();
</script>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@WayneCaauthorSep 21.2015 — I do thank you for your input here, Kevin. However, there are some assumptions you seem to have made that, if you did make them, are erroneous. I believe that the best way to impart understanding in this matter is to give some background of myself, along with the design intent of the pages I am working on here. Please note that I have not taken offense to anything, nor do I intend offense in my response. I believe that understanding is gained through explanation, and I am attempting to provide such an explanation here.

Background (I will attempt to be brief.)

I am 60 years old this month, so my experience goes back decades. It began in the 1960s when I was first exposed to the notion of computers and programming. Because of Star Trek the series, I was already spoiled to the notion of a drive to store data on and a monitor screen to view results on before the first microprocessor computer was ever released. I began studying the BASIC programming language in the 1970s when the Radio Shack TRS-80 Model 1 first appeared. While I was not able to own a computer, and had no access to one, I was able to read all the manuals that came out through Radio Shack. In 1981 I took a computer science prereq course at a local community college in the area that I lived in then, and it included a lab where I was able to write my first BASIC code. By the time I owned my first computer (a Tandy Color Computer 2 in 1988), I was already adept enough at the language that writing short routines came fairly easy, though I was by no stretch capable of writing any useful programs. I was exposed to the OS-9 RTOS at that time, and was introduced to the Basic09 variant of the BASIC language. It was this language that I learned the majority of what I know about programming with.

In 1992 I first became aware of the Internet. In 1994 I was able to begin learning HTML (it was still 2.0 then, though 3.0 was being discussed). By the time 3.0 had been shot down and 3.2 introduced in its place, I had already created some half-dozen or so web sites. I was not very proficient (in fact almost ignorant) in the use of javascript at that time, and java was way out of my league. However, I was making use of javascripts and learning it more as each day passed. I learned many useful tricks, like rollovers, switching images that shared the same location on the screen, and making animated GIFs. I was never very happy with the way I had to do things to get any kind of sophistication in the display, but it worked and that's what mattered.

Then CSS came along and I became frustrated. Yet another language to learn, and I was not learning the others as easily as I would have liked, so I just threw in the towel and stopped writing HTML. When I came back to it in the mid 2000s, I refused to try and make the code validate to any given DTD. I wrote what I wanted the way I wanted it and if no one else liked it, too bad. Since then I have learned more about CSS, and am getting better at using it. Javascript is still a challenge to me, but I can get it once I see how a given task works. I now work to make my code validate to HTML5, and have had success with almost every page I create.

Devices

I do not really write for devices like smart phones (iphone or android). My eyes are not so good anymore and those screens are way too small for me to get any meaningful data from. While ipads and android or windows tablets are closer to a computer screen in size, they are still devices and I do not wish to program for them. I program for desktop/tower computers and laptop computers. I know that eventually these types of devices will no longer be used in the mainstream, but I believe I will be long past writing any kind of code by then, so I am not concerned.

Inline versus Block

It really does not matter to me whether I use inline or block styling. The code in these pages just happened to come along as inline. When I tried mixing in block style for the button colors and rollover, it did not work. Advice from another forum taught me that I was trying to use block and inline for the same purposes and that it could not be done that way. I opted to stay with the inline as that is what the rest of the css and javascript was written for anyway.

A peeve

I understand that some times you have to do things in odd ways to accomplish the task you are setting out to achieve. In this instance, it is using a checkbox or radio button to achieve the effect of a toggle style push button.

For the uninitiated, there are two types of hardware push buttons, momentary and toggle. Momentary opens or closes a circuit as long as the button is held or pushed. Toggle style allows you to keep a circuit open or closed until you flip the switch back, or press the button again. HTML push buttons are designed after the momentary style, and this is why you have to do some creative coding to accomplish the look of a toggle style button.

Despite knowing this, I cannot accept the method used for creating the look of a toggle button. I simply will not use it. It is more code than anyone should have to write, and uses checkboxes or radio buttons which are designed for a different purpose than a push button. I have submitted to the W3C a recommendation that they improve the push button by adding one of two attribute styles (or both) in order to make a toggle push button available. The attributes are, TOGGLE (if specified the button is recognized as a toggle button and acts accordingly), or type="toggle" (which accomplishes the same thing, just in a different way). The type version would allow for a button to be specified as a toggle without having to use two attributes (type="button" toggle). I do not know if they will heed my recommendation or not, but I have finally (after many years) gotten that recommendation in, so I consider my part in the task accomplished.

Target audience

Every web site and page has a target audience. For the pages I am writing here, the target audience is a niche: the Sokoban game audience. Yes, there are versions available for the android, iphone, tablets and ipads. No I am not trying to put the data I am providing on those devices. My intent is that the player will look at the pages on a computer screen (laptop/notebook or desktop/tower). If you look at the pages, you can see that the layout is not conducive to a small screen or a touch screen. That is the bottom line, and there is no changing it.
Copy linkTweet thisAlerts:
@Kevin2Sep 22.2015 — Well, I ain't that much younger than you then! I did my first coding, such as it was, about 1980 with FORTRAN and punchcards.

These days, however, I try to code my HTML, etc., for modern devices even though I at times have trouble viewing things on my phone. In my humble opinion you are partially misinterpreting your "target audience". You state that you are targeting "the Sokoban game audience". Not "the Sokoban game audience that uses only computers." What makes you think that your target audience will never access your page with a phone or a tablet even though you don't/won't? A couple who are very good friends of mine are really into puzzles, print or otherwise, although I don't know if they play Sokoban. They access the internet with all of these devices: desktop, laptop, iPads, iPhones, and maybe more. They're in their late 70s; not my "young whippersnapper" mid-50s. They have more "toys" with internet access than I do. Why are you assuming that these (or other) almost-octogenarians, or even pentagenarians like me, would only access your page with a computer? For that matter, why are you assuming any age at all?

While the code mashup I posted may be a bit of a hack by turning <label>s into buttons and hiding <input>s, hacking HTML has been around as long as you've been using the internet. In point of fact using <table>s for layout, as your code demonstrates, is a hack from about 1995. Tables should be used for tabular data only, not page layout. Using <th> just to make the enclosed text bold and then using CSS to counter the inherent text centering is another hack. Are your hacks less "hacky" than mine for the intended purpose? Well, it's your page/code. You make that decision.

Your analogy with physical momentary and toggle switches is fabulous. Unfortunately for you there is currently no "pure HTML" way of replicating them. In fact, you originally asked for a CSS or Javascript solution to your problem. Now it seems that you don't want a CSS or Javascript solution because it's "more code than anyone should have to write". You reminisce longingly of "Javascript rollovers" you used to do. Seriously, how is that less code than a couple of lines of CSS?

The point of the mashup code I posted was not to give you an exact way of coding your page. It was posted, as I stated, "to inspire you to greatness". Use what you want if you can, throw away the rest. Or throw away all! But don't complain when the tags you [I]want[/I] to use don't work as you would wish in your ideal (and already hacked) HTML 2.0/3.2 world. And don't hold your breath on W3C and browser vendors (Google, Mozilla, Microsoft, Apple, et al) adopting your suggestions in anything close to the near future. W3C moves at a glacial pace at best, despite the HTML5 spec supposedly being a "living document".

I recently completely rebuilt one website I run. The first version of that site was coded (by me) in 1997 and had a bunch of embarrassing cliches of the time: frames, music, and more. The second version, from about 2002, was a table-based layout. The 2013-era stats/logs for that site showed that more than 50% of human users were accessing the site with mobile devices. Hence the rebuild. One result of that rebuild which was interesting to me was that the code base for a basic page (HTML, CSS, Javascript) is actually less now than with the previous table layout. Why? A number of reasons. First, HTML5's "semantic tags". Second, <tr>s and <td>s add a stupid amount of code to a page, much of which needs to be counteracted (as you've found out) with CSS. Or "adjusted" with more HTML code (e.g. attributes such as border="blah", width="blah", cellspacing="blah", valign="blah", and on and on). None of which is cached. CSS, if it's in a separate file, is cached. Draw your own conclusion there.

In other words, why are you resisting modernizing your HTML code? Why are you not willing to use "hacky" code on top of your already hacky code.

Look, I don't care how old you are and whether or not you can or even want to use a mobile device. More importantly, [i]your users don't either![/i] The point is that in 2015, just like back in 1995, you'll have to hack HTML tags to make them do what you want. That's part of the purpose of CSS -- bending HTML to your will. But it's apparent that unless it's undoing the natural behavior of a misused <th> you can't be bothered.
Copy linkTweet thisAlerts:
@WayneCaauthorSep 22.2015 — Most of what you say is true, Kevin. I will give you that. However, there are a couple of things you say that are missing the mark. The first, which I am glad you reminded me of as I forgot to include it in my last post, concerns the use of the table heading (TH) tags. You assume that I am using them because they are by default bold and centered, but then go out of my way to left-justify the text they contain. This is not the case. There are three tables in the code for this page, and the left-most table contains multiple rows and two columns. Only the bottom row uses table data (TD) tags, as it contains information concerning the buttons. The rest of the table, including the button rows, is heading data. The left column contains description text of the contents of the right column, and needs to be left-justified because it is in a column, not a row. The right column remains centered because it contains numbers that are relevent to the descriptions in the left column. These numbers do change with each different puzzle, which is why I can understand that you are looking at these as data, not headings. However, the difference between heading and data is not always determined solely by the type of information contained in the cells.

Headings are not required to be only in a row format, or only on the top of the table. They are not required to contain only descriptive text. Even in spreadsheet programs headings can contain other types of data, and be in columns on the right or the left, and on the bottom or the top, and can also be combinations of top, bottom, left and right. What determines heading or data is the focus of the table. In this case, the entire left table exists to provide description for the rendered puzzle and its associated solutions, with the primary focus being the solutions themselves. The puzzle rendering, in its own table, is in a table data cell. The solutions also are in a table of their own and in table data cells. I could have just as easily contained all three tables inside another table that would have combined them into one larger table with three nested tables, and that would be perfectly acceptable HTML as far as the validators are concerned. HTML (even 5) allows for nested tables. I merely left each table standing alone instead of encompassing them all into a larger table.

While I could change the right column of the left table to be data cells, and apply bold and centered text styles to them if I wanted to, the fact remains that I consider these cells to be headings, not just data.

The use of tables as layout is the second place that you miss the mark. Yes, the current form does suggest that the tables' function is to make the page layout, and for the center and right tables this is true. I have been experimenting with divs for this purpose, but have not been able to get the divs to look the same way the tables do. Once I have that figured out I will replace those two tables with divs. Likely I will also wrap the left table into a div also, but that table will remain a table even then. The primary goal here is to achieve the same look as the page has now as close to exact as I can get it. The way the page is now there is no room for deviation, so if I cannot get the divs to cooperate I may not change the code at all. There is one other thing that comes into play here, and that is the validator. The W3C validator validates this page (and the other two pages that go with it) to html5 with zero errors and zero warnings. Let me repeat that. ZERO ERRORS and ZERO WARNINGS. This means that the W3C considers these pages to be perfectly acceptable html, css and javascript. As long as I get no errors or warnings, I really have no reason to change them at all, other than to have them accepted by others as valid.

On the topic of mobile devices, I can only point out the obvious. If you look at the page we have been discussing here in a browser (I have tested with Firefox, IE and Chrome) on a laptop or desktop computer, you will see that there is no way this could be rendered on a smart phone, and only marginally on a tablet. If you look at the links page that goes with this page (as the page we have been discussing is one of over 900 copies of the page, each with a different puzzle depicted), you will see that there is no way it could be rendered on a smart phone, and only marginally on a tablet.

Most sites that include mobile device access usually put that version of the pages into a separate sub-domain. Using 'mysite.com' as the example, the mobile version would be located at 'mobile.mysite.com'. This proves that there are two sets of web pages for the site, one for mobile devices and the other for laptop/desktop devices. As I said in my last post, I do not intend to code for mobile devices. Yes, many sokoban players do play on their smart phones and tablets, as there are mobile versions of the game engine available. However, most still play on their laptops and desktops as the game engines for those devices have been around longer and are more developed than the versions for mobile devices. As far as I am concerned, if the person considering looking at my pages decides not to because a mobile version is not available, then that is their choice.

To be honest, many players of the game may not even be interested in these pages, as they consider it 'giving it away' and 'defeating the purpose of the game' (which, in their opinion, is only to make you think and that there is no other pleasure that can be derived from the game). I disagree, as I do on so many things. I believe that sometimes a person gets stuck to the point that seeing a solution is the only way past that block. If they use it properly, they can learn how to get past blocks like those and go on to solving more complex puzzles using what they have learned. Yes, it is easy for someone to just use the given solution to solve that given puzzle and then move on without ever thinking about it again. My position is, I am not their father or mother to tell then what to do or how to do it. If they abuse the help I am providing, they only hurt themself.

This same point of view can be applied to learning programming languages such as HTML, CSS, javascript, java and so on. Much of what I have learned has been through the process of finding a solution, using it for the purpose I had for looking for it, and then playing with it in other contexts to see how else I might be able to apply it. I could have just as easily just taken the solution found, using it for the purpose intended, and then moving on to something else without giving it another thought. My intent has always been to learn so I can do these things without having to ask for help all of the time. I believe I have followed the appropriate course in this, and I do encourage others to do the same, even if I do differ in what constitutes valid help.

The final form of these pages will not be on a site online. They will be in a zip archive available for download from my blog for anyone who decides they want to look up a solution locally to them. If you want to see the links page that goes with the puzzle pages, I can attach a copy to a post here, or make it available to you privately if you wish.
Copy linkTweet thisAlerts:
@wbportSep 22.2015 — Deleted by author.
Copy linkTweet thisAlerts:
@wbportSep 23.2015 — If you are looking for a toggle button try:
[CODE]<!DOCTYPE html>
<head>
<title>Toggle Demo</title>
<script language="JavaScript">
</html>var sw1
function startup() {
document.demo.dotoggle.style.color="red";
document.demo.dotoggle.style.backgroundColor="black";}
function calculate() {
sw1^= 1;
if (sw1) {
document.demo.dotoggle.style.color="black";
document.demo.dotoggle.style.backgroundColor="yellow";}
else {
document.demo.dotoggle.style.color="yellow";
document.demo.dotoggle.style.backgroundColor="black";
}
}
</script>
</head>
<body onload="startup()">
<form name="demo">
<input type="button" name="dotoggle" value="Toggle Me This" onclick="calculate(0)">
</form>
</body>
[/CODE]
At any rate, I find checkboxes and radio buttons give the user choices and let the user know what they are before clicking on the "Submit" button.
Copy linkTweet thisAlerts:
@WayneCaauthorSep 23.2015 — Deleted by author.[/QUOTE]

I did not expect to see you delete your post. I was intrigued by your statements. It makes me very happy to see that there is still a wealth of experience available for those who need it.

I pretty much do develop what I need, and ask for help when I get stuck. One of the places where it seems so much confusion takes place is where form elements are concerned. I guess most people just assume that if the element is grouped as a form element, then it should only be used in a form environment. However, there has never been a rule requiring this, and I have seen many examples of form elements being used outside of a form environment, especially where it concerns push buttons, checkboxes and radio buttons. In this particular instance, the three buttons I have on the page are only for the purpose of showing or hiding div containers. There is no form function, so there is no form, just the three buttons.
Copy linkTweet thisAlerts:
@WayneCaauthorSep 23.2015 — If you are looking for a toggle button try:

...

At any rate, I find checkboxes and radio buttons give the user choices and let the user know what they are before clicking on the "Submit" button.[/QUOTE]

In a form environment checkboxes, radio buttons and push buttons all play specific roles. The push buttons are generally used for submit and reset functions, and rarely for other functions. Checkboxes and radio buttons are generally used for everything other than submit and reset functions. By the same token, it is highly unlikely that a toggle push button would be found in a form. The toggle push button is a specific instance of a button being used outside of a form environment. As the use I intend is outside a form environment, its use inside a form is not applicable for me.

I am very interested in the code you supplied. I will be testing it to see how it works, and see if there is a chance it might accomplish my original goal of having the selected button appear to be pushed. Thank you for the example. ?
Copy linkTweet thisAlerts:
@wbportSep 23.2015 — I deleted my first post since it seemed too much ego trip and too little addressing your question. My web site is home.comcast.net, but look quickly since comcast will pull the plug on hobby (client side only) sites in October.

I also ask for help when I get stuck and got invaluable help in this forum for my tempo change and guitar chord pages (under NoteWorthy). The pages are all problems/questions I thought about or solved at one time or other and some are adaptations of other people's code (I [b]do[/b] give credit, though).

Just looked at my previous toggle code and have no idea why my {stop}html tag ended up on the fifth line instead of the bottom. At any rate, I made [B]sw1[/B] a global so it could be referenced by any other function, in case you or anyone else wants to use it outside of a demo page.

Good luck with your project.
Copy linkTweet thisAlerts:
@WayneCaauthorSep 24.2015 — I deleted my first post since it seemed too much ego trip and too little addressing your question. My web site is home.comcast.net, but look quickly since comcast will pull the plug on hobby (client side only) sites in October.

I also ask for help when I get stuck and got invaluable help in this forum for my tempo change and guitar chord pages (under NoteWorthy). The pages are all problems/questions I thought about or solved at one time or other and some are adaptations of other people's code (I [b]do[/b] give credit, though).

Just looked at my previous toggle code and have no idea why my {stop}html tag ended up on the fifth line instead of the bottom. At any rate, I made [B]sw1[/B] a global so it could be referenced by any other function, in case you or anyone else wants to use it outside of a demo page.

Good luck with your project.[/QUOTE]

It is sad to see so many hobby hosting sites going by the wayside. I have gone to a blog and making my web pages available through download because the hosting sites I have gone to recently all want me to use their pre-designed templates instead of allowing me to create my own pages. The sites I want to make will not work in their templates.

You have quite a diverse collection on your site. I remember COBOL from back in the 60s. It was the primary business software for billing and accounting. I learned the language when I attended DeVry in 1999-2002. I have never used it, and I think have forgotten most of what I learned.

I caught the html closing tag thing. It was an easy fix, so no problem there. Your code example is exactly what I was thinking about when I asked for help. It's simple, elegant, does the job and uses the push button. I figured there had to be a way. Now all I have to do is figure out how to emulate the look of the 3D button when it is pushed so I can use that as my selected state. Of course, each browser renders push buttons differently, so I will likely have to resort to some fancy button drawing to accomplish the task. But maybe there's a way to access the same pushed look that the browser uses so i don't have to draw it.

Thanks for the help, and I hope that you are successful in locating another site for your hobby pages.
×

Success!

Help @WayneCa spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...