Okay, so this a new one for me. I've used Javascript for years and never ran into this issue, but then again, I've never used so much on a single page before (no where near it).
I am creating a map of distributors for my company so corporate can click on any of its companies and markers pop up showing their locations. That's working fine. However, when you click a marker, it should give you more detailed information (Company name and location). That WAS working fine. For both the markers and the text, I am using javascript to toggle show/hide. However, after I added about ten markers, I noticed some markers stopped working - even though I tested after making each one and hadn't altered anything since testing it. The more I add, the more unstable it seems to become. Is there a memory limit or something for javascript (and how on earth have I maxed it out of there is? I know this may be nonsense - I'm totally lost atm).
Additional weird things - the same markers stop working across all browsers. To try to make up for any accidental changes, I copy and paste the code from a marker that is working to one that is not and just change the values. The one that was working before still works and the one that was broken before still doesn't. I am pasting the code below. Any help would be greatly appreciated.
PS - I deleted most of the blank markers (about 18 of them). You can add them back if this code doesn't replicate the problem for you.
EDIT: PPS - It's not elements covering each other up - sometimes the markers not working are on islands by themselves with nothing else near them.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Distributor Map for X</title>
<link rel="stylesheet" type="text/css" href="distributor.css">
<script src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="company1_check"){
$(".company1").toggle();
}
if($(this).attr("value")=="company2_check"){
$(".company2").toggle();
}
if($(this).attr("value")=="company3_check"){
$(".company3").toggle();
}
if($(this).attr("value")=="company4_check"){
$(".company4").toggle();
}
if($(this).attr("value")=="company5_check"){
$(".company5").toggle();
}
});
});
</script>
</head>
<body>
<div id="containerdiv" style="width:1200px; margin-left:auto; margin-right:auto;">
<div id="header">
<h1 style="text-align:center;">
Distributor Map
</h1>
<h2 style="text-align:center;">
For X
</h2>
<p style="font-weight:bold; text-align:center;">
Select the map(s) for the company whose distributors you wish to see.
</p>
<p style="text-align:center;">
<span style="font-weight:bold;">company1:<input value="company1_check" type="checkbox">
<span style="font-weight:bold;">company2:<input value="company2_check" type="checkbox" onclick="toggle_visibility(company2_map)">
<span style="font-weight:bold;">company3:<input value="company3_check" type="checkbox" onclick="toggle_visibility(company3_map)">
<span style="font-weight:bold;">company4:<input value="company4_check" type="checkbox" onclick="toggle_visibility(company4_map)">
<span style="font-weight:bold;">company5:<input value="company5_check" type="checkbox" onclick="toggle_visibility(company5)">
</p>
</div>
<div id="map" class="maps" style="width:1200px; z-index:1;">
<img src="images/base_map.png" alt="map" />
</div>
<!--Begin company1 Distributors-->
<div class="company1" style="z-index:6; display:none;">
<div class="company1" style="z-index:11; display:none; margin-left:870px; margin-top:190px;">
<a onclick="$('.company1_china_info').toggle()" href="#" id="company1_ch"><img id="company1_china" src="images/company1/company1_aus.png" alt="Beijing" ></a>
<p class="company1_china_info" style="color:#000; width:auto; display:none; margin-top:-90px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Beijing SCR Instruments LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in China</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:865px; margin-top:235px;">
<a onclick="$('.company1_hongkong_info').toggle()" href="#" id="company1_hongkong"><img id="company1_hongkong" src="images/company1/company1_aus.png" alt="Hong Kong" ></a>
<p class="company1_hongkong_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Fugro Geotechnical Services LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in Hong Kong</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:562px; margin-top:162px;">
<a onclick="$('.company1_italy_info').toggle()" href="#" id="company1_italy"><img id="company1_italy"src="images/company1/company1_aus.png" alt="Italy" ></a>
<p class="company1_italy_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:30px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;"> Belotti Sistemi S.a.s.</span><br />
<span style="background-color:#fff;">company1 Distributor in Italy</span>
</p>
</div>
<div class="company1" style="z-index:12; display:none; margin-left:824px; margin-top:265px;">
<a onclick="$('.company1_malaysia_info').toggle()" href="#" id="company1_malaysia"><img id="company1_malaysia" src="images/company1/company1_aus.png" alt="Malaysia" ></a>
<p class="company1_malaysia_info" style="color:#000; width:auto; display:none; margin-top:-60px; margin-left:-250px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CE Instruments SDN. BHD.</span><br />
<span style="background-color:#fff;">company1 Distributor in Malaysia</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:834px; margin-top:290px;">
<a onclick="$('.company1_singapore_info').toggle()" href="#" id="company1_sing"><img id="company1_singapore"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_singapore_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:-150px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CEP Services PTE LTD / Fugru Singapore PTE LTD</span><br />
<span style="background-color:#fff;">company1 Distributors in Brunei (CEP) and Singapore (Fugro) </span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:310px; margin-top:355px;">
<a onclick="$('.company1_peru_info').toggle()" href="#" id="company1_peru"><img id="company1_peru"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_peru_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Corporacion Geotecnica Peru EIRL</span><br />
<span style="background-color:#fff;">company1 Distributor in Peru</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:510px; margin-top:172px;">
<a onclick="$('.company1_spain_info').toggle()" href="#" id="company1_spain"><img id="company1_spain"src="images/company1/company1_aus.png" alt="Spain" ></a>
<p class="company1_spain_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Distribuciones Pako</span><br />
<span style="background-color:#fff;">company1 Distributor in Spain</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:905px; margin-top:190px;">
<a onclick="$('.company1_sk_info').toggle()" href="#" id="company1_sk"><img id="company1_southkorea" src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_sk_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Dong-A Geovan Co., Ltd</span><br />
<span style="background-color:#fff;">company1 Distributor in South Korea</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:890px; margin-top:250px;">
<a onclick="$('.company1_philippines_info').toggle()" href="#" id="company1_phil"><img id="company1_philippines"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_philippines_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Drilling Advisory & Logistics</span><br />
<span style="background-color:#fff;">company1 Distributor in The Philippines</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:260px; margin-top:250px;">
<a onclick="$('.company1_mexico_info').toggle()" href="#" id="company1_mex"><img id="company1_mexico"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_mexico_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Enlace Tecnico</span><br />
<span style="background-color:#fff;">company1 Distributor in Mexico</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:535px; margin-top:135px;">
<a onclick="$('.company1_uk_info').toggle()" href="#" id="company1_uk"><img id="company1_uk"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_uk_info" style="color:#000; width:auto; display:none; margin-top:-80px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Gage Technique International</span><br />
<span style="background-color:#fff;">company1 Distributor in the United Kingdom</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:330px; margin-top:175px;">
<a onclick="$('.company1_canada_info').toggle()" href="#" id="company1_can"><img id="company1_canada"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_canada_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Geneq Inc.</span><br />
<span style="background-color:#fff;">company1 Distributor in Canada</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:540px; margin-top:172px;">
<a onclick="$('.company1_barca_info').toggle()" href="#" id="company1_barca"><img id="company1_barca"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_barca_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">GeoMed Projectes, S.L.</span><br />
<span style="background-color:#fff;">company1 Distributor in Barcelona, Spain</span>
</p>
</div>
</div>
<!--Begin company2 Distributors-->
<div class="company2" style="z-index:5; display:none;">
<div class="company2" style="z-index:5; display:none; margin-left:570px; margin-top:210px;">
<a onclick="$('.company2_random_info').toggle()" href="#" id="company1_ch"><img id="company2_test"src="images/company2/company2_marker.png" alt="Somewhere" ></a>
<p class="company2_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company2 Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
<!--Begin company 3 Distributors-->
<div class="company3" style="z-index:4; display:none;">
<div class="company3" style="z-index:4; display:none; margin-left:270px; margin-top:260px;">
<a onclick="$('.company3_random_info').toggle()" href="#" id="company1_ch"><img id="company3_test" src="images/company3/company3_marker.png" alt="Somewhere" ></a>
<p class="company3_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company3 Instruments Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
<!--Begin company4 Distributors-->
<div class="company4" style="z-index:3; display:none;">
<div class="company4" style="z-index:3; display:none; margin-left:270px; margin-top:160px;">
<a onclick="$('.company4_random_info').toggle()" href="#" id="company1_ch"><img id="company4_test" src="images/company4/company4_marker.png" alt="Somewhere" ></a>
<p class="company4_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company4 Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
<!--Begin company5 Distributors-->
<div class="company5" style="z-index:2; display:none;">
<div class="company5" style="z-index:2; display:none; margin-left:870px; margin-top:90px;">
<a onclick="$('.company5_random_info').toggle()" href="#" id="company1_ch"><img id="company5_test" src="images/company5/company5_marker.png" alt="Somewhere" ></a>
<p class="company5_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company5 Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
</div>
</body>
</html>
EDIT: CSS page that was linked
div.maps {position:absolute; top:300;}
div.company1 {position:absolute;top:300;width:100%;}
img.company1_aus {position:absolute;top:400;left:750;}
p.company1_china_info {position:absolute;top:200;left:870;}
div.company2 {position:absolute; top:300; width:100%;}
p.company2_random_info {position:absolute; top:200; left:570;}
div.company3 {position:absolute; top:300; width:100%;}
div.company4 {position:absolute; top:300; width:100%;}
div.company5 {position:absolute; top:300; width:100%;}
Change your class for your inner divs to something else:
<div class="company1" style="z-index:6; display:none;">
<div class="company1-1" style="z-index:11; display:none; margin-left:870px; margin-top:190px;">
<a onclick="$('.company1_china_info').toggle()" href="#" id="company1_ch"><img id="company1_china" src="images/company1/company1_aus.png" alt="Beijing" ></a>
<p class="company1_china_info" style="color:#000; width:auto; display:none; margin-top:-90px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Beijing SCR Instruments LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in China</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:865px; margin-top:235px;">
<a onclick="$('.company1_hongkong_info').toggle()" href="#" id="company1_hongkong"><img id="company1_hongkong" src="images/company1/company1_aus.png" alt="Hong Kong" ></a>
<p class="company1_hongkong_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Fugro Geotechnical Services LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in Hong Kong</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:562px; margin-top:162px;">
<a onclick="$('.company1_italy_info').toggle()" href="#" id="company1_italy"><img id="company1_italy"src="images/company1/company1_aus.png" alt="Italy" ></a>
<p class="company1_italy_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:30px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;"> Belotti Sistemi S.a.s.</span><br />
<span style="background-color:#fff;">company1 Distributor in Italy</span>
</p>
</div>
<div class="company1-1" style="z-index:12; display:none; margin-left:824px; margin-top:265px;">
<a onclick="$('.company1_malaysia_info').toggle()" href="#" id="company1_malaysia"><img id="company1_malaysia" src="images/company1/company1_aus.png" alt="Malaysia" ></a>
<p class="company1_malaysia_info" style="color:#000; width:auto; display:none; margin-top:-60px; margin-left:-250px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CE Instruments SDN. BHD.</span><br />
<span style="background-color:#fff;">company1 Distributor in Malaysia</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:834px; margin-top:290px;">
<a onclick="$('.company1_singapore_info').toggle()" href="#" id="company1_sing"><img id="company1_singapore"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_singapore_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:-150px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CEP Services PTE LTD / Fugru Singapore PTE LTD</span><br />
<span style="background-color:#fff;">company1 Distributors in Brunei (CEP) and Singapore (Fugro) </span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:310px; margin-top:355px;">
<a onclick="$('.company1_peru_info').toggle()" href="#" id="company1_peru"><img id="company1_peru"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_peru_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Corporacion Geotecnica Peru EIRL</span><br />
<span style="background-color:#fff;">company1 Distributor in Peru</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:510px; margin-top:172px;">
<a onclick="$('.company1_spain_info').toggle()" href="#" id="company1_spain"><img id="company1_spain"src="images/company1/company1_aus.png" alt="Spain" ></a>
<p class="company1_spain_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Distribuciones Pako</span><br />
<span style="background-color:#fff;">company1 Distributor in Spain</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:905px; margin-top:190px;">
<a onclick="$('.company1_sk_info').toggle()" href="#" id="company1_sk"><img id="company1_southkorea" src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_sk_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Dong-A Geovan Co., Ltd</span><br />
<span style="background-color:#fff;">company1 Distributor in South Korea</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:890px; margin-top:250px;">
<a onclick="$('.company1_philippines_info').toggle()" href="#" id="company1_phil"><img id="company1_philippines"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_philippines_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Drilling Advisory & Logistics</span><br />
<span style="background-color:#fff;">company1 Distributor in The Philippines</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:260px; margin-top:250px;">
<a onclick="$('.company1_mexico_info').toggle()" href="#" id="company1_mex"><img id="company1_mexico"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_mexico_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Enlace Tecnico</span><br />
<span style="background-color:#fff;">company1 Distributor in Mexico</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:535px; margin-top:135px;">
<a onclick="$('.company1_uk_info').toggle()" href="#" id="company1_uk"><img id="company1_uk"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_uk_info" style="color:#000; width:auto; display:none; margin-top:-80px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Gage Technique International</span><br />
<span style="background-color:#fff;">company1 Distributor in the United Kingdom</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:330px; margin-top:175px;">
<a onclick="$('.company1_canada_info').toggle()" href="#" id="company1_can"><img id="company1_canada"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_canada_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Geneq Inc.</span><br />
<span style="background-color:#fff;">company1 Distributor in Canada</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:540px; margin-top:172px;">
<a onclick="$('.company1_barca_info').toggle()" href="#" id="company1_barca"><img id="company1_barca"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_barca_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">GeoMed Projectes, S.L.</span><br />
<span style="background-color:#fff;">company1 Distributor in Barcelona, Spain</span>
</p>
</div>
</div>
Add this to your css file:
div.company1-1 {position:absolute;}
Javascript:
if($(this).attr("value")=="company1_check"){
$(".company1").toggle();
$(".company1-1").toggle();
}
Also you should close span tags and get rid of onclick toggle_visibility() like below:
<span style="font-weight:bold;">company1:<input value="company1_check" type="checkbox"> </span>
<span style="font-weight:bold;">company2:<input value="company2_check" type="checkbox"> </span>
<span style="font-weight:bold;">company3:<input value="company3_check" type="checkbox"> </span>
<span style="font-weight:bold;">company4:<input value="company4_check" type="checkbox"> </span>
<span style="font-weight:bold;">company5:<input value="company5_check" type="checkbox"> </span>