Welcome to WebmasterWorld Guest from 34.204.171.108

Forum Moderators: open

Message Too Old, No Replies

Check a box in one DIV to make something happen in another DIV

     
3:25 am on Aug 9, 2018 (gmt 0)

Junior Member

10+ Year Member

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


I have some code which creates a checkbox. When you check the box it unhides an image. It works when both the checkbox and image are contained in the same DIV. However, I want the checkbox to lie in one DiV and the image to lie in another. When I move the image to another DIV the functioning falls apart. Can this be corrected? Below is the code for just the two DIVs sitting side by side with the checkbox and the image in the 'left' DIV -- and it works. The Javascript code (not shown) was provided to me by birdbrain.

<div align="left" class="row">
<div class="column left" style="background-color:#ddd; border-width:2px;">
<h2>Column 1</h2>
<p><input type="checkbox" id="toggle-chk">
<label for="toggle-chk" id="button"></label>
<img src="test_DOT-1.png" id="dot"></p> <----------------- I WANT TO REMOVE FROM HERE...
</div>

<div align="center" class="column right" style="background-color:#bbb; border-width:2px;">
<h2>Column 2</h2>
<p>Some text..</p> <-----...AND PLACE HERE
</div>
</div>


I tried removing the IMG tag from the first DIV to place it in the other one, which does not work. How do I tell the checkbox that the image it is trying to unhide is in another DIV?
9:14 am on Aug 9, 2018 (gmt 0)

Senior Member from GB 

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


Hi there icon_kid,


the input type="checkbox" needs to be placed just after the opening body tag.

This will then allow it's effect to cascade correctly.

Here is the amended code...




<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}

.left {
margin-bottom: 0.25em;
border:1px solid #000;
background-color:#ddd;
}

.right {
border:1px solid #000;
background-color: #bbb;
text-align: center;
}

#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 ~ .row .left #button::before {
content: 'hide image';
}

#toggle-chk:checked ~ .row .right #dot {
display: block;
}

</style>

</head>
<body>

<input type="checkbox" id="toggle-chk">

<div class="row">

<div class="column left">
<h2>Column 1</h2>
<p>
<label for="toggle-chk" id="button"></label>
<!-- I WANT TO REMOVE FROM HERE... -->
</p>
</div>

<div class="column right">
<h2>Column 2</h2>
<p>Some text..
<!-- ...AND PLACE HERE -->
<img src="test_DOT-1.png" id="dot" alt="test dot">
</p>
</div>

</div>

</body>
</html>


birdbrain
3:48 am on Aug 11, 2018 (gmt 0)

Junior Member

10+ Year Member

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


Thank you, birdbrain. It works. You created two fields using media="screen," and that's a new animal for me. I tried to decipher it to figure out on my own how to change some things but it looks very abstract to me. For example, I tried to see where the dimensions of the fields are stipulated. The two fields cover 100% of the screen width with one on top of the other. Their height is determined by the amount of content. For my project the layout needs to be two vertical columns (not two rows) -- with checkboxes on the left and images on the right, and having fixed dimensions. That would be 780 pixels tall for both fields with the left one being 240 pixels wide and the right one being 780 pixels wide. In that way it would look like a tall rectangle next to a perfect square -- like the text drawing below. The left field would be scrollable but the right one will not be. The background for the right field will be an image that is 780 x 780 (an exact fit for this field). Let's call this image "Brooklyn."

|-------|--------------------------|
|-------|--------------------------|
|-------|--------------------------|
|-------|--------------------------|
|-------|--------------------------|
|-------|--------------------------|
|-------|--------------------------|
|-------|--------------------------|
|-------|--------------------------|


Another thing I looked at is how the color codes relate. Since I am a pixel artist I actually did a check on the color codes to compare them to what was rendered to the screen and I found what is a perplexing discrepancy. The page generated has the upper field in a light gray with an RGB of "dddddd." The lower field is a medium gray of "bbbbbb." However, the code stipulates colors other than those two. It stipulates "fefefe" which is a near white for upper, and "ccc" (the 3-digit equivalent for "cccccc") for the lower which, by the way, is a shade half way between B and D.

What is "em" a measure of?

Lastly, I'm trying to figure out how to add "checkboxe/image" sets (each box affects one specific image). From what I can determine, all I would need to do is repeat this line in the <style> tag using unique image names and ID tags such as this:

#toggle-chk:checked ~ #dot-1 {
display: block;
}
#toggle-chk:checked ~ #dot-2 {
display: block;
}
#toggle-chk:checked ~ #dot-3 {
display: block;
}


...along with this in the <body>:

<img src="test_DOT-1.png" id="dot-1" alt="dot-1">
<img src="test_DOT-1.png" id="dot-2" alt="dot-2">
<img src="test_DOT-1.png" id="dot-3" alt="dot-3">


Would this work?
4:54 am on Aug 11, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15892
votes: 876


What is "em" a measure of?
Text size, as determined by current font settings. Formally, an em is the height and width of a capital M, hence the name. You use ems for text-related formatting: paragraph spacing, maximum line length, paragraph indent, line-height, padding of text areas, and so on.
5:11 am on Aug 11, 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:4523
votes: 350


The two fields are the "<div class="column left">" and "<div class="column right">" which are contained by the "<div class="row">" as shown in the html. I am guessing that the html has no other stylesheet so there are no specific dimensions there. For your html page to be viewed as you want, in two columns with a 240px wide column and a 780px wide column you can add those properties to the style elements on the page.

You can try this for example:

.left {
margin-bottom: 0.25em;
border:1px solid #000;
background-color:#ddd;
width: 242px;
display: table-cell;
}

.right {
border:1px solid #000;
background-image: url(Brooklyn.jpg);
background-repeat: no-repeat;
text-align: center;
display: table-cell;
}

.row {
display: table-row;
}

img {
max-width: 100%;
}

Now, as to how you are going to map those hundreds of tiny images to align with the background map, (I would not want that job) those individually positioned elements belong inside the <div class="right"> element.

8:36 pm on Aug 12, 2018 (gmt 0)

Junior Member

10+ Year Member

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


I am definitely not looking forward to dealing with thousands of images. At least I won't have to position any of them because they would simply postion themselves by wrapping the inside of a DIV until they completely cover it, and it won't be possible for any of the images to shift position. I haven't tried your new version of the code. I'll work on it.

As you may have realized, I'm trying to simulate a feature of "way stop" locations you see in Google Maps and Bing, for instance. For example, you type an address in a map utility and enter it. A map icon appears at that location on a geographic map. Forget about how the geographic data is used to locate a specific matching point on the map -- the question is: how do they tell an image to arrive at any specific point on a canvass. Is there a way to free images from being inline and position them according to a pixel location, (as long as they don't overlap by any amount). You can cause a new window to appear in a Web page and position it so that the upper-left corner of it lies at a specific pixel location within another window (such as "30,30") or create an "onMouseOver" hotspot for links that are activated at specific pixel locations. Why can't images be positioned at pixel locations the way windows and hotspots can? -- or is there a way that I can do this?
9:38 pm on Aug 12, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15892
votes: 876


how do they tell an image to arrive at any specific point on a canvas
By not trying to do something in pure html that cries out for javascript. In fact “canvas” is just the right word, since it’s a javascript feature that should do exactly what you’re looking for. Even MSIE
:: quick detour to caniuse dot com ::
supports the basic canvas features back to MSIE 9.
10:12 pm on Aug 12, 2018 (gmt 0)

Junior Member

10+ Year Member

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


Thanks, lucy24.
I'll look into that. It's not clear to me how to seek out the pieces of code I need.
11:33 pm on Aug 18, 2018 (gmt 0)

Junior Member

10+ Year Member

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


birdbrain:

The last code you offered is moving me towards what I'm seeking. It generates two columns with text and checkbox on the left and a toggled image on the right. Further customization is the next issue I have. The original code generated not just one but two checkboxes -- one with the fancy gradient background containing text along with a conventional, simple checkbox (which suits my project better). Either one caused an image to hide or unhide -- working in unison (both boxes checked together or unckecked together). I deleted the line with the 'label' tag and that removed the fancy box leaving only the simple one.

The size of each DIV is still not completely configured. They both expand (or collapse) according to the amount of data they hold, but they also resize differently from each other in the following way: They both expand vetically by the amount of text either one holds or by the pixel height of images that might be placed in either DIV. However, the DIV on the left-side maintains a fixed width of 254 pixels (even though your code specifies 242 pixels, which is not a problem -- just a curiosity). The width of the right-side DIV is variable in both height and width. For this project both DIVs must have fixed, immutable dimensions. They both need to be fixed at 750 pixels tall, with the left having a fixed width of 250px and the right having a fixed width of 780 pixels; the left one is scrollable -- the right one is not. I can edit the numbers to offset whatever discrepancy there is between the code and what the browser displays. In this case, a 12-pixel offset would be needed.

Padding: The text in the left DIV is touching the left edge of the DIV border. I want to put five or six pixels of padding inbetween. I saw something in the code affecting "padding" but it was for padding the checkbox. How do I pad the DIV?

I am also still interested in the function lucy24 mentioned about positioning images by pixel coordinates. It would save me a ton of work.
5:27 pm on Aug 19, 2018 (gmt 0)

Junior Member

10+ Year Member

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


I've made some progress but there are still issues. I have the layout I want: the two DIVs are now at the proper dimensions, and the one on the right side has a background image, but the checkbox lies outside of both DIVs -- it's supposed to be inside of the left one. That's not unusual because if you look at the code below you can see that the checkbox is placed before both DIVs. I thought I could just move the checkbox tag into the left DIV. Doing this did make the checkbox appear inside of the left DIV but it also caused the Javascript 'hide/unhide' function to not work. Here's the original code. How do I put the checkbox into the left DIV without killing the Javascript function?
<body>
<input type="checkbox" id="toggle-chk">
<div class="row">
<div class="column left">
<h2>Column 1</h2>
</div>
<div class="column right" style="background-image: url('Brooklyn.png')">
<p>Some text..
<img src="test_DOT-1.png" id="dot" alt="test dot">
</p>
</div>
</div>
</body>

Take a look at this image to see how my layout looks next to what I want:
[imgur.com ]
I also found some code that's supposed to place my images at specific pixel coords. I tried replacing this:
<img src="test_DOT-1.png" id="dot" alt="test dot">

...with this:
<img style="position:absolute; top:35px; left:170px" src="test_DOT-1.png">

This edit not only caused the Javascript function to not work, it also caused the image to move itself from the right-side DIV into the left one where the checkbox lies.
7:18 pm on Aug 19, 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:4523
votes: 350


How do I pad the DIV?
Edit the css for the .left which is your left division. For example:
.left {
margin-bottom: 0.25em;
padding-left: 5px;
border:1px solid #000;
background-color:#ddd;
width: 242px;
display: table-cell;
}


but the checkbox lies outside of both DIVs
That is because it is placed just inside the body tag. If it is to appear in the left column, you should place "<input type="checkbox" id="toggle-chk">" inside "<div class="column left">" somewhere below the <h2 header tag and if you'd prefer not to edit the left column CSS for padding, you could also put the <input inside <p> tags.

The problem with placing images at specific coords with absolute positioning is that it needs everyone who will view it to be using the same type of platform and monitor resolution. Otherwise they may not see that image where you see it on your screen. The reason it displayed in the left column is because your instructions told the image to be positioned "top:35px; left:170px" or exactly 35 pixels from the top of the page and 170 pixels from the left side of the page.

I'm no help for why the java script is breaking, I don't see any javascript on the page other than the <input contents.

To learn about using canvas and mapping elements with examples and "Try it Yourself" tutorials, w3schools offers several related topics, here are a few to take a look at:
[w3schools.com...]

[w3schools.com...]

[w3schools.com...]

[w3schools.com...]