Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: open

Message Too Old, No Replies

Help with javascript toggle functions

change "on/off" to "off/on"

     
2:16 pm on Jul 28, 2018 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 1, 2005
posts: 62
votes: 0


I need help with some code that creates a checkbox to toggle an image on and off (visable/hidden). The code works. However, I need to change one thing about it -- it is an "on/off" toggle (so to speak), meaning that the initial state of the checkbox on page load is "ON." On page load the check box is checked and the image appears. Uncheck the box and the image diappears. I want the opposit; I want the page to load with no boxes checked and no images showing until I check a box, (an "off/on" toggle," so to speak). Below is the code.

------------------------------------

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

------------------------------------
Another issue I will have to deal with for this project is that my document uses two frames. I'll call them "frame-1" and "frame-2." The check boxes will lie in frame-1 but will toggle images in frame-2. I suppose I would have to identify the frames or the images by using either "Id" or "name" so that the browser recognizes the target of each checkbox but I don't know the proper construction or syntax to do this. I'm not a programmer and I'm not trying to be one -- I'm just a graphic artist who occasionally uses Web programming to create interactive graphics projects.
6:28 pm on July 28, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there icon_kid,


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



birdbrain
8:55 pm on July 28, 2018 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 1, 2005
posts: 62
votes: 0


Thanks, birdbrain -- It worked. The "text checkbox" looks nicer than the conventional style too -- I think I'll keep it. The reason why I adopted frames for this project is because of the kind of page layout I need for it, that is, two separate fields, where I could specify their dimensions. One field will contain a long list of business account names (each one underneath another) and would have to be scrollable vertically. The other field has a geographical map image as it's background where the targeted images will lie -- this field not being scrollable. Before trying frames I tried tables but I had problems with it. Honestly, I don't remember exactly what those problems were, however. Is there something I could use that would be better than frames or tables to achieve the layout I need?
9:17 pm on July 28, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there icon_kid,

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



birdbrain
1:11 pm on July 29, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2740
votes: 838


One field ... would have to be scrollable vertically. The other field ... not being scrollable.

You can use flex-box for this.
[w3schools.com...]
1:18 pm on July 29, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2740
votes: 838


@birdbrain, I have used the same technique but with radio-buttons such that the button/s show the state eg: open/close.
1:30 pm on July 29, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there NickMNS,


there is, obviously, always "more than one way to skin a cat". :)



birdbrain
12:46 am on July 30, 2018 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 1, 2005
posts: 62
votes: 0


I'll explain the layout and describe the purpose of my project. Companies that dispatch their own vehicles out into the field to make deliveries often use map services like Google and Microsoft's "Bing." They use them to figure out the "way stops" a driver has to make along his route, but to arrange it in the most efficient, logical path a driver should make to save time, save fuel and to respond to customer needs in the most timely way possible. I have used Google Maps for this because you can save a map to their server. You can save map markers for every business account you have but you can not hide any of them if you wanted to. At the business I work for, we might have 200 accounts just in Brooklyn, NY. but only 20 of them need to be visited on a given day. The dispatcher needs to focus on just the twenty that need service -- the other 180 map icons on the map amounts to a bunch of distracting clutter.

My tact was to make images appear on a map but the problem with images is that they are 'inline.' That woudln't be good because as you add each image to a document the positions of all the other images changes in relation to it. As crazy (and cumbersome) as it sounds I decided to work with that condition by simple creating a grid of map icons (tiny dots) which merely serve as "place holders" at specific 6x6-pixel areas of the map. There are 130 spaces horizontally and 130 vertically -- 16,900 place holders. All these place holders require only two images -- one red dot, and one blank image for all the holders that aren't being used. What will distinguish each one in the code is a "title" tag in them such as "130-130" which would be the last place holder on line 130. Because of a "title" tag for each space, hovering the mouse pointer over any area of the map generates an 'info balloon' identifying that 6x6-pixel area of the screen. Once I match up a location on my map compared to Google's, I get its location number from the info balloon. Say a spot is showing "065-065" (which would be a spot that is dead center on this map) -- then I go to that line in my code; change the blank image to a red dot and assign a check box for it in the left field of the page. The data in the info balloon can also be conveniently used as the 'ID' or 'name' for the Javascript code to target the correct space on the map from a specific checkbox.

Imagine what the map would look like if every place holder were a red dot (130 squared equals a total of 16,900 dots). Next, the dots clear away and the user proceeds to click the six checkboxes -- one at a time, causing a dot to appear on the map for each box checked. Then he goes in reverse to uncheck all of them with the dots disappearing one by one. Only the place holders that correspond to way stops would have to be coded for toggling -- the rest would be just thousands of image tags that insert the same blank image. Without too much work I can use my word processor to generate all the info balloon data needed. I'm not crazy -- I'm just inventive, but is there a better way to do this?



[edited by: not2easy at 1:47 am (utc) on Jul 30, 2018]
[edit reason] No site reviews, see Terms of Service [/edit]

9:40 pm on Aug 5, 2018 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 1, 2005
posts: 62
votes: 0


My original post of my map demo was not allowed. Below is an acceptable link to it.
"birdbrain" has already given me a working code for image off/on function. The only problem I expect now is how to identify the target of each respective checkbox to a particular image, and perhaps learn of some other way of creating independant fields on a Web page other than using frames or tables -- (divs maybe?). Or is there a way to specify (on a page containing no text) an image to be positioned at specific X/Y coordinates -- much like the way a new browser window can be precisely positioned within another window or how a "hot spot" within an image can be fixed to an exact point on that image.

[imgur.com...]
5:16 am on Aug 7, 2018 (gmt 0)

Junior Member

10+ Year Member

joined:Jan 1, 2005
posts: 62
votes: 0


I have some code given to me by birdbrain to get my project started. The code hides an image on page load and shows the image when you check a box. However, the page I want to use this code in will contain two frames -- the checkbox will be in one frame but the image it shows or hides will lie in the other frame. How do I "target" the function of the Javascript to do its actions in a different frame? I've already been told that frames are obsolete. This is just a home project, not a big corporate deal. The answer should be simple and straight forward -- just a matter of "identifying" or "naming" things that correspond in both frame documents -- using the correct syntax.

The framesets are this:

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


The first frame is called "list,"
the second frame is called "map"

The Javascript code is this: (with the image tag removed since it is not supposed to appear in this frame at all."

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


The button itself is this:


<input type="checkbox" id="toggle-chk"> 
<label for="toggle-chk" id="button"></label>
3:12 pm on Aug 7, 2018 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4560
votes: 363


Your post says
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.

Are you asking for help with the page layout or the script's functions? There is no good reason to use the old frameset for layouts, NickMNS offered a link to learn about flex-box to replace the <frameset use. The HTML in your post is HTML5 and the <frameset> tag is not supported in HTML5. When you use deprecated elements in a page browsers may not interpret them as intended. It is time to move away from Netscape type display. Especially now that Mobile First is here, and mobile devices never heard of the <frameset> element.

If you wish to have a discussion on layout and appearance, this is not the right forum and may be why there hasn't been more help. You can start a discussion in the CSS forum [webmasterworld.com] and get more help.