I have a problem before ask in here, i already searching in google or cases in stackoverflow, but not solved this case :(
This is my screnshot
http://i.stack.imgur.com/oSIsS.png
sign red arrow this is place marker, why google maps not focus in place marker ?
and this mycode
this part code page.php
<div id="tab-5">
<?php
$map = "-6.3447213,106.8658161";
$title = "Creative School";
$image = "log.jpg";
$addres = "DKI JAKARTA";
?>
<iframe id="headerMap" width="480" HEIGHT="420"></iframe>
<script>
jQuery("iframe#headerMap").attr("src", "map.php?map=<?php echo $map;?>&title=<?php echo $title ?>&image=<?php echo $image ?>&addres=<?php echo $addres ?>");
</script>
</div>
this full code map.php
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
var TILE_SIZE = 256;
var lang = new google.maps.LatLng(<?php echo $_GET['map'];?>);
function createInfoWindowContent() {
return [
'<center><b><?php echo $_GET['title'];?></b></center>',
'<center><b><?php echo $_GET['addres'];?></b></center>',
'<center><img src="images/<?php echo $_GET['image'];?>"></center>'
].join('<br>');
}
function initialize() {
var mapOptions = {
zoom: 13,
center: lang
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent(createInfoWindowContent());
coordInfoWindow.setPosition(lang);
coordInfoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
Help me thank's you
Related
I have a problem when I try to show a map with all the companies of an organization in my web.
When I go to my website I see that the map is not displayed.
I'm going to inspect item and I get the error "initMap is not a function".
I do not know why this error is due.
Can you help me?
I attach the code:
<?php
if($_SERVER['REMOTE_ADDR']=='80.32.126.235'){
error_reporting(E_ALL);
ini_set('display_errors', '1');
}
$json = file_get_contents('https://aplicatiuspin.cat/aplicatiu/webServices/views/?v=empreses/json&idAplicatiu=59&idEtiqueta=1&template=none');
$empreses = json_decode($json, true);
?>
<div id="map" style="height: 500px; width: 100%;"></div>
<script type="text/javascript">
function initMap() {
var map_cnt = {lat:41.563211, lng:2.008875};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: map_cnt,
scrollwheel: false
});
var mapBound = new google.maps.LatLngBounds();
var mapInfoWindow = new google.maps.InfoWindow();
<?php
foreach ($empreses as $e) {
if (is_numeric($e['latitud']) && is_numeric($e['longitud'])) {
?>
var marker<? echo $e['id'];?> = new google.maps.Marker({
position: new google.maps.LatLng(<? echo $e['latitud'];?>, <? echo $e['longitud'];?>),
map: map,
title: '<? echo addslashes($e['nom']); ?>'
});
mapBound.extend(marker<? echo $e['id'];?>.getPosition());
google.maps.event.addListener(marker<? echo $e['id'];?>, "click", function () {
var tmp = jQuery("#divEmpresa<?=$e['id']; ?>");
tmp.popup('show');
});
map.fitBounds(mapBound);
<?
}
}
?>
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<script src="/webServices/views/js/jquery.popupoverlay.js"></script>
<div style="overflow: hidden; height: 1px; width: 1px;">
<?php
foreach ($empreses as $e):?>
<div class="divEmpresa" id="divEmpresa<?=$e['id']; ?>" style="background-color: #ffffff; padding: 20px; border-radius: 5px; width: 50%;">
<div style="text-align: right; padding: 0 5px;">
<a href="#" class="divEmpresa<?=$e['id']; ?>_close" >
<i class="fa fa-times" aria-hidden="true"></i>
</a>
</div>
<div class="row">
<!--<div class="col-sm-4"><img src="/webServices/views/img/empresa<?=$e['id']; ?>.jpg"> </div>-->
<div class="col-sm-8"><h2><?=$e['nom']; ?></h2></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<?=$e['adreca']; ?><br>
<?=$e['cp']; ?> - <?=$e['poblacio']; ?> <br>
<?=$e['telefon']; ?><br>
<?=$e['web']; ?>
</div>
</div>
</div>
<?
endforeach;
?>
</div>
<script>
jQuery( document ).ready(function() {
jQuery('.divEmpresa').popup({
transition: 'all 0.3s',
scrolllock: true
});
});
</script>
You have to forgot add google-api-key like below.
Get your YOUR_API_KEY here and added it..
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Updated Code
<?php
if($_SERVER['REMOTE_ADDR']=='80.32.126.235'){
error_reporting(E_ALL);
ini_set('display_errors', '1');
}
$json = file_get_contents('https://aplicatiuspin.cat/aplicatiu/webServices/views/?v=empreses/json&idAplicatiu=59&idEtiqueta=1&template=none');
$empreses = json_decode($json, true);
?>
<div id="map" style="height: 500px; width: 100%;"></div>
<script type="text/javascript">
function initMap() {
var map_cnt = {lat:41.563211, lng:2.008875};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: map_cnt,
scrollwheel: false
});
var mapBound = new google.maps.LatLngBounds();
var mapInfoWindow = new google.maps.InfoWindow();
<?php
foreach ($empreses as $e) {
if (is_numeric($e['latitud']) && is_numeric($e['longitud'])) {
?>
var marker<? echo $e['id'];?> = new google.maps.Marker({
position: new google.maps.LatLng(<? echo $e['latitud'];?>, <? echo $e['longitud'];?>),
map: map,
title: '<? echo addslashes($e['nom']); ?>'
});
mapBound.extend(marker<? echo $e['id'];?>.getPosition());
google.maps.event.addListener(marker<? echo $e['id'];?>, "click", function () {
var tmp = jQuery("#divEmpresa<?=$e['id']; ?>");
tmp.popup('show');
});
map.fitBounds(mapBound);
<?
}
}
?>
}
</script>
<script async defer src="https://maps.google.com/maps/api/js?v=3.25&key=enter-your-key-here&callback=initMap"></script>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>
<div style="overflow: hidden; height: 1px; width: 1px;">
<?php
foreach ($empreses as $e):?>
<div class="divEmpresa" id="divEmpresa<?=$e['id']; ?>" style="background-color: #ffffff; padding: 20px; border-radius: 5px; width: 50%;">
<div style="text-align: right; padding: 0 5px;">
<a href="#" class="divEmpresa<?=$e['id']; ?>_close" >
<i class="fa fa-times" aria-hidden="true"></i>
</a>
</div>
<div class="row">
<!--<div class="col-sm-4"><img src="/webServices/views/img/empresa<?=$e['id']; ?>.jpg"> </div>-->
<div class="col-sm-8"><h2><?=$e['nom']; ?></h2></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<?=$e['adreca']; ?><br>
<?=$e['cp']; ?> - <?=$e['poblacio']; ?> <br>
<?=$e['telefon']; ?><br>
<?=$e['web']; ?>
</div>
</div>
</div>
<?
endforeach;
?>
</div>
<script>
jQuery( document ).ready(function() {
jQuery('.divEmpresa').popup({
transition: 'all 0.3s',
scrolllock: true
});
});
</script>
You have create a google API key and paste it in 'enter-your-key-here' place.
To create google API key click below link
https://developers.google.com/maps/documentation/javascript/get-api-key
Cheers!!
I'm obviously making a thing which is meant to show a Map.
Literally nothing happens - no Map, no Errors, no crash and burn.
Here is my code:
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>
<script>
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
mapTypeId: 'satellite',
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
I've tried changing the width/height of the parent div to PX's with no luck.
Any help is great
Cheers
For a better insight, view the full page code here:
http://pastebin.com/XrRYgtjz
I would say you have two issues.
your map div doesn't have a size (you don't specify the size of the containing element for the anonymous div <div style="height:100%; width: 100%;">).
your MapOptions doesn't contain the required/manditory zoom property.
proof of concept fiddle
code snippet:
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
zoom: 5,
mapTypeId: 'satellite',
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script deferred async src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I think the problem is in how you've described the new map in your mapOptions variable. Try changing the syntax to something like this, passing mapCanvas as the first argument and the options as the second argument:
var mapOptions = new google.maps.Map(mapCanvas, {
center: {lat: 53.419824, lng: -3.0509294},
mapTypeId: 'satellite',
scrollwheel: true
});
I hope this helps!
<div style="height:100%; width: 100%;">
Maybe problem in height. Try change to 400px.
Or
<div style="height:400px; width: 100%;">
<div id="map-canvas" style="height:100%; width: 100%;></div>
</div>
EDIT
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
<script>
function initMap() {
var mapCanvas = document.getElementById("map-canvas");
var mapOptions = {
center: new google.maps.LatLng(53.419824, -3.0509294),
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: true
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>
I have so far created a template of what i want and have manged to start getting each area to work, still got some work to do but I am currently trying to embed a KML file as a layer for my google map.
Here is my full coding below.
<!DOCTYPE html>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var markers = [];
function createMarker(latlng, html, map, refnum) {
var latlngtxt = (latlng.lat() + ',' + latlng.lng()).split(',');
$.each(latlngtxt, function(i, v){
v = Math.round(v);
v += v > 0? (i? 'E' : 'N') : (i? 'W' : 'S');
latlngtxt[i] = v.replace(/^-/, '');
});
latlngtxt = latlngtxt.join(', ');
var ref = $.trim($('#reference').val());
//ref = ref? ref + '<br>' : '';
var infowindow = new google.maps.InfoWindow({
content: ref || html //+ '#' + (markers.length + 1) + '<br>' + html + '<br>' + latlngtxt
});
var marker = new google.maps.Marker({
map: map,
position: latlng,
html: html,
infowindow: infowindow
});
marker.addListener('mouseover', function() {
infowindow.open(map, this);
$('#supplementwindow').html(infowindow.content).fadeIn();
});
marker.addListener('mouseout', function() {
infowindow.close();
$('#supplementwindow').fadeOut();
});
markers.push(marker);
}
var up206b = {};
var map;
function trace(message) {
if (typeof console != 'undefined') {
console.log(message);
}
}
up206b.initialize = function() {
var latlng = new google.maps.LatLng(52.136436, -0.460739);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
up206b.geocode();
}
var ctaLayer = new google.maps.KmlLayer({
url: 'file:///C|/wamp/www/maps/UK County border lines.kml',
map: map
});
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
up206b.geocode = function() {
/* for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = []; */
var addresses = [$('#address').val(), $('#address2').val()];
addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
}
jQuery(function($){
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false;
}
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.136436, -0.460739));
map.setZoom(13);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(13);
}
});
});
</script>
</head>
<body onload="up206b.initialize()">
<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>
<div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >
<form >
<br>
Location 1 <input type="text" id="address">
<br>
<br>
Location 2
<input type="text" id="address2">
<br>
<br>
Reference
<input type="text" id="reference">
<br>
<br>
<input type="button" value="Submit" onClick="up206b.geocode()">
</form>
</div>
<div id="menu" style=" position: absolute; margin: 45px 89px;" >
<select id="Counties">
<option value="">Select County</option>
<option value="bedfordshire">Bedfordshire</option>
<option value="buckinghamshire">Buckinghamshire</option>
<option value="cambridgeshire">Cambridgeshire</option>
<option value="hertfordshire">Hertfordshire</option>
<option value="northamptonshire">Northamptonshire</option>
</select>
</div>
</div>
<div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div>
<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" >
<input type="button" value="Assign">
</div>
<div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All"><br>
<input type="button" id="removemarker" value="Remove Marker"></div>
</body>
</html>
The snippet of my code below is where I am trying to embed the KML file as a layer. I have tried using an online server URL with my KML and it doesn't work and also using Wamp as a local host server. Would it actually work with Wamp?
Have I placed to coding in the wrong place, have I written it wrong or missed out something? If anyone could give me some guidance, I would appreciate it thanks.
var ctaLayer = new google.maps.KmlLayer({
url: 'file:///C|/wamp/www/maps/UK County border lines.kml',
map: map
});
According to the documentation, the KmlLayer URL must be publicly accessible.
Overview
The Google Maps JavaScript API supports the KML and GeoRSS data formats for displaying geographic information. These data formats are displayed on a map using a KmlLayer object, whose constructor takes the URL of a publicly accessible KML or GeoRSS file.
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var kmlLayer = new google.maps.KmlLayer({
map: map,
url: "http://www.geocodezip.com/geoxml3_test/final_map_original_wales1c.xml"
})
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
document.getElementById('status').innerHTML = "KmlStatus=" + kmlLayer.getStatus();
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="status"></div>
<div id="map_canvas"></div>
How can I convert multiple dynamic div (created at runtime) into image. There are more than 50 div which are created at runtime using php array. I just want all those div to be converted to image seperately.
Here is the code I tried for -
<?php
$names = [" ", "abc", "def", "ghi yfg", "jkl", "mno"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
My Css code --
<style>
#font-face {
font-family:roboto;
src: url("/roboto/Roboto-Medium.ttf")
}
.mydivCls {
background-image: url("1.png");
width: 325px;
height: 207px;
}
.mydivCls p {
font-family: roboto;
padding-top: 100px;
text-align: center;
}
</style>
And here is my script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
I'm getting following error in my console --
TypeError: document.getElementById(...) is null
document.getElementById('canvas'+i).appendChild(canvas);
Here is the solution I found --
<?php
/**
* This Script is used for converting a particular div to image
*/
?>
and my HTML code --
<?php
$names = [" ", "Kuldeep Kumar", "Rishabh Gaur", "AMIT RANJAN", "Vinay Agarwal", "MANJEET KUMAR", "Shuchi Singla", "Sumit Chaturvedi"];
$i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++; } ?>
<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>
<div id="image">
<p>Image:</p>
</div>
and changes in script --
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script>
var i=1;
$(".mydivCls").each (function(){
html2canvas([document.getElementById('mydiv'+i)], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
i++;
});
</script>
Code for image generation is correct, you have issue in your php part (all div have the same id). Need to increment $i variable:
<?php $i=1;
foreach ($names as $name ) {
?>
<div class='mydivCls' id="mydiv<?php echo $i?>">
<p id="mytext"><?php echo $name ?></p>
</div>
<?php $i++;
} ?>
www.bchomescondos.ca/properties/?city=Burnaby&id=261618646
www.bchomescondos.ca/properties/?city=Burnaby&id=261711367
These are just the few of the sample pages where the problem is arising. I am not too proficient with the Google Map API, but still tried to incorporate on my website.
I have added three tabs- one showing the road map, another the street view and the third is the walkscore. While the road map and walk-score is working fine, the street view isn't.
But one strange thing I have noticed is if the page is resized (just for any weird reason) the street view map appears.
I would be very much obliged if anyone helps me with this problem.
The Script
http://pastebin.com/zQTCxez2
<script src="https://maps.googleapis.com/maps/api/js?v=3.19&sensor=true_or_false"></script>
<script>
var geocoder;
var ws_wsid = 'afca921c9778417e8dc16a8236d1f079';
var ws_address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";
var ws_width = '100%';
var ws_height = '400';
var ws_layout = 'vertical';
var ws_commute = 'true';
var ws_transit_score = 'true';
var ws_map_modules = 'all';
var address = "<?php echo $row['address']; ?>,<?php echo $row['city']; ?>";
function initialize() {
var fenway = new google.maps.LatLng( <? php echo $row['latitude']; ?> , <? php echo $row['longtitude']; ?> )
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var contentString = '<a class="fancybox-inline" href="#request_form_pop">Request of showing this property</a>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: fenway,
map: map,
title: ''
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {});
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
The HTML
http://pastebin.com/fgDRR0MN
<div class="row">
<div class="one columns"></div>
<section class="ten columns tabs" style="margin: 20px 0;">
<ul class="tab-nav">
<li class="active">Google Map</li>
<li> Street View</li>
<li>Walk Score</li>
</ul>
<div class="tab-content active">
<div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
</div>
</div>
<div class="tab-content">
<div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
</div>
<div class="tab-content">
<div id="ws-walkscore-tile" style="height: 400px; border: 0.5px solid #000;"></div>
</div>
<script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>
</section>
<div class="one columns"></div>
</div>
I just wanted to show the street view when that particular tab is clicked.
CSS Files
[http://www.bchomescondos.ca/wp-content/themes/dgdon/css/gumby.css]
[http://www.bchomescondos.ca/wp-content/themes/dgdon/css/style.css]
So, it can be deduced that there is no problem with the map api and it's script. The problem lies with how the CSS tabs are handled.
Thanks duncan for your help. I would open a new question regarding solving this CSS and JS problem.