Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TEST-1</title>
<script type="text/javascript">
window.onload=function() { attachBehaviors(); }
function attachBehaviors() {
if (
document.getElementById('toggle_chk') &&
document.getElementById('001-001')
) {
document.getElementById('001-001').style.display='block';
document.getElementById('toggle_chk').onclick=function() {
toggle_image(this);
};
}
}
//
function toggle_image(chk) {
// if you want to hide it . . .
document.getElementById('001-001').style.display=(chk.checked)?'block':'none';
//var src=(chk.checked)?'test_DOT-1.png':'';
//document.getElementById('001-001').src=src;
}
</script>
</head>
<body>
<form action="">
<p><input type="checkbox" name="toggle_chk" id="toggle_chk" value="1" checked>
<label for="toggle_chk">Image on/off</label></p>
<p><img src="test_DOT-1.png" id="001-001"></p>
</form>
</body>
</html>
there is no need to use "JavaScript" for this project; CSS will suffice. ;)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>TEST-1</title>
<style media="screen">
#toggle-chk {
position: absolute;
left: -999em;
}
#button {
display: block;
width: 7em;
padding: 0.25em 0;
margin-bottom: 1em;
border:1px solid #999;
border-radius: 0.25em;
background-image:linear-gradient( to bottom, #fefefe, #ccc );
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
text-align:center;
cursor: pointer;
}
#button::before {
content: 'show image';
}
#dot {
display: none;
}
#toggle-chk:checked ~ #button::before {
content: 'hide image';
}
#toggle-chk:checked ~ #dot {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle-chk">
<label for="toggle-chk" id="button"></label>
<img src="test_DOT-1.png" id="dot" alt="Test Dot">
</body>
</html>
Also note that "frames" are now considered to be twentieth
century methodology and should definitely not be used. :(
"One field will contain a long list of business account names (each one
underneath another) and would have to be scrollable vertically"
Can you give me the code for this list?
Also where does the "toggling" come into this set-up?
One field ... would have to be scrollable vertically. The other field ... not being scrollable.
there is, obviously, always "more than one way to skin a cat". :)
[edited by: not2easy at 1:47 am (utc) on Jul 30, 2018]
[edit reason] No site reviews, see Terms of Service [/edit]
<frameset cols="300px,780px,*" height="780" rows="780">
<frame src="list.html" name="list" frameborder="1">
<frame src="BK_MAP.html" name="map" frameborder="1">
</frameset><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>TEST-3</title>
<style media="screen">
#toggle-chk {
position: absolute;
left: -999em;
}
#button {
display: block;
width: 4em;
padding: 0.25em 0;
margin-bottom: 1em;
border:1px solid #999;
border-radius: 0.25em;
background-image:linear-gradient( to bottom, #fefefe, #ccc );
box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 );
text-align:center;
cursor: pointer;
}
#button::before {
content: '-';
}
#dot {
display: none;
}
#toggle-chk:checked ~ #button::before {
content: '***';
}
#toggle-chk:checked ~ #dot {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="toggle-chk">
<label for="toggle-chk" id="button"></label>
</body>
</html><input type="checkbox" id="toggle-chk">
<label for="toggle-chk" id="button"></label>
The Javascript code is this: (with the image tag removed since it is not supposed to appear in this frame at all.but there is no javascript in the code. There is only HTML and CSS.
