Post the hide script, and elaborate...
Thank you. I have to show a complete sample document because any small thing in the whole context of the hide script may be an issue (I suppose). The original document was full of 'comments' which I left preserved in the sample code below for your reference:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brooklyn Map</title>
<style type="text/css">
/* Moved all presentational attributes out of body element. */
body {
color: #000;
font-family: Arial, Helvetique, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}
/* This container has the map background. It has been sized to the
* dimensions of the background image. It has position relative so
* absolutely positioned images that get placed on the map are relative
* to this container. */
.mapContent {
background: #484848 url('BROOKLYN_map.png') no-repeat;
width: 1551px;
height: 1315px;
overflow: auto;
position: relative;
}
/* This container has the client list. It is positioned within the map
* container. */
.clientList {
background-color: #CCD8D5;
border: 2px solid #93a6bc;
float: left;
overflow: auto;
margin: 1em;
width: 200px;
height: 700px;
}
/* This is the list of clients. List markers have been removed. */
.clientList ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
/* This is the list item which contains client info. */
.clientList li {
padding: .5em;
}
/* Moved all presentational attributes out of body element. */
a:link {
color: #8f8ffc;
}
a:visited {
color: #b67af6;
}
a:active {
color: #fff;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mapContent">
<div class="clientList">
<ul>
<li>
<input type="checkbox">
<img alt=""
src="ICONS/C-green-empty.png"
data-position-left="729px" data-position-top="1047px">
<font size="3" color="#0000a0"><b>Alergant</b></font>
<div><font size="3">1829 E. 13th St.</font></div>
</li>
<li>
<input type="checkbox">
<img alt=""
src="ICONS/C-green-dot.png"
data-position-left="768px" data-position-top="1040px">
<font size="3" color="#0000a0"><b>Babayev</b></font>
<div><font size="3">2269 Ocean Ave.</font></div>
</li>
</ul>
</div><!-- clientList -->
</div><!-- mapContent -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
(function () {
/**
* Given an image, create a copy and position it on the map using the
* data-position-top and data-position-left attributes of the image.
* This will insert the new image immediately after the one passed in
* but because it's absolutely positioned will appear on the map.
*/
function showOnMap($img) {
$('<img>', {
src: $img.attr('src'),
alt: $img.attr('alt')
}).css({
'position': 'absolute',
'top': $img.data('position-top'),
'left': $img.data('position-left')
}).insertAfter($img);
}
/**
* Given an image, remove the next sibling image (which was created in
* the showOnMap function) from the DOM.
*/
function hideFromMap($img) {
$img.next('img').remove();
}
/* Attach a click handler to the clientList container that will trigger
* for each checkbox element within the clientList. */
$('.clientList').on('click', 'input[type="checkbox"]', function () {
// this = the checkbox
var $img = $(this).next('img');
if (this.checked) {
showOnMap($img);
}
else {
hideFromMap($img);
}
})
})(); </script>
</body>
</html>
--------------------------------
The next thing is to show you the same code (from <STYLE> to <BODY>) but with all the comments removed and with the whole nested DIV in bold text:
<style type="text/css">
body {
color: #000;
font-family: Arial, Helvetique, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}
.mapContent {
background: #484848 url('BROOKLYN_map.png') no-repeat;
width: 1567px;
height: 1415px;
overflow: auto;
position: relative;
}
.clientList {
background-color: #b5c7e0;
border: 2px solid #93a6bc;
float: left;
margin: 1em;
width: 200px;
}
.clientList ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.clientList li {
padding: .5em;
}
a:link {
color: #8f8ffc;
}
a:visited {
color: #b67af6;
}
a:active {
color: #fff;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body> <---------------------------!
<div class="mapContent">
<div class="clientList">
<ul>
<li>
<input type="checkbox">
<img alt=""
src="client1.png"
data-position-top="500px" data-position-left="500px">
Client 1
<div>Address 1</div>
</li>
<li>
<input type="checkbox">
<img alt=""
src="client2.png"
data-position-top="300px" data-position-left="250px">
Client 2
<div>Address 2</div>
</li>
</ul>
</div><!-- clientList --> </div><!-- mapContent -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
(function () {
function showOnMap($img) {
$('<img>', {
src: $img.attr('src'),
alt: $img.attr('alt')
}).css({
'position': 'absolute',
'top': $img.data('position-top'),
'left': $img.data('position-left')
}).insertAfter($img);
}
function hideFromMap($img) {
$img.next('img').remove();
}
$('.clientList').on('click', 'input[type="checkbox"]', function () {
// this = the checkbox
var $img = $(this).next('img');
if (this.checked) {
showOnMap($img);
}
else {
hideFromMap($img);
}
})
})(); </script>
</body>
So everything in bold text needs to be plucked out in one whole piece and placed next underneath the BODY tag (where the arrow shows). That's all this is needed to pull one DIV out of the other. The resulting code looks like this:
(with the shifted segment still in bold text)
<style type="text/css">
body {
color: #000;
font-family: Arial, Helvetique, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}
.mapContent {
background: #484848 url('BROOKLYN_map.png') no-repeat;
width: 1567px;
height: 1415px;
overflow: auto;
position: relative;
}
.clientList {
background-color: #b5c7e0;
border: 2px solid #93a6bc;
float: left;
margin: 1em;
width: 200px;
}
.clientList ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.clientList li {
padding: .5em;
}
a:link {
color: #8f8ffc;
}
a:visited {
color: #b67af6;
}
a:active {
color: #fff;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<script>
(function () {
function showOnMap($img) {
$('<img>', {
src: $img.attr('src'),
alt: $img.attr('alt')
}).css({
'position': 'absolute',
'top': $img.data('position-top'),
'left': $img.data('position-left')
}).insertAfter($img);
}
function hideFromMap($img) {
$img.next('img').remove();
}
$('.clientList').on('click', 'input[type="checkbox"]', function () {
// this = the checkbox
var $img = $(this).next('img');
if (this.checked) {
showOnMap($img);
}
else {
hideFromMap($img);
}
})
})(); </script>
<body>
<div class="clientList">
<ul>
<li>
<input type="checkbox">
<img alt=""
src="client1.png"
data-position-top="500px" data-position-left="500px">
Client 1
<div>Address 1</div>
</li>
<li>
<input type="checkbox">
<img alt=""
src="client2.png"
data-position-top="300px" data-position-left="250px">
Client 2
<div>Address 2</div>
</li>
</ul>
</div><!-- clientList --> <div class="mapContent">
</div><!-- mapContent -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</body>
So there are actually two problems I have now. The first one (which should be easily fixed) is that the two DIVs are acting like block elements -- each DIV is taking a whole line unto itself, whereas I need them to sit side-by-side. However, the bigger problem is that, in this new arrangement, the hide script itself (which has not been altered) no longer works. And if that's not terribly interesting, I don't know what is.
