Safari Browser, check boxes and Nokia Maps

**Ulala** · 2012-02-28, 09:33

--- splitting from previous issue.

**Ulala** · 2012-03-07, 14:00

Hi,

In safari Browser, wherever the web page having check boxes, they are not displaying by displaying Nokia maps. No Errors are appearing. Please tell me what is the problem. In other browsers check boxes are displaying?

**jasfox** · 2012-03-08, 10:25

Originally Posted by Ulala

Hi,

In safari Browser, wherever the web page having check boxes, they are not displaying by displaying Nokia maps. No Errors are appearing. Please tell me what is the problem. In other browsers check boxes are displaying?

There is no known issue with displaying the map in safari with check boxes. Indeed I've just run a test example with a map and check boxes and it displays fine. My guess is that in your CSS you are styling the checkboxes to display behind the map due to a CSS quirk on Safari or something. Assuming there is no more obvious cause, the following debug procedure should help.

Try running your documents through a prettifier such as HTML tidy http://infohound.net/tidy/
Ensure the mark up is valid before assuming the API is at fault. e.g. http://validator.w3.org/
Slowly remove all CSS styling until the problem goes away.
Start off by just displaying a simple map (with no markers or anything fancy) and make sure you use var when defining the map.

Personally I had no styling on the checkboxes and I was using the following style for the map

Code:

<div id="map" style=" width: 50%; height: 50%; position: absolute;">

**Ulala** · 2012-03-09, 09:17

Hi,

Check-boxes not displaying in safari version 5.0.5 : I tested this issue in a seperate HTML file, I think almost the problem is in JS file (i.e., <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script> ). Here I commented this JS file then the check box is displaying in safari 5.0.5. Please check again using this below code and remove comment for JS file before checking.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
    <!-- <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script> -->
    <style type="text/css">
    .nm_bubble_content{
              color:black;
              background:white;
              border: 1px solid white;
              padding:0px;			  	  			  	  
    }
    </style>
  </head>
<body>
<div id="map" style="z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;"></div>
<script type="text/javascript">       
        
var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   var map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 4,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

</script>
<input type="checkbox" name="chk" id="chk"/>Check box display here</body>
</html>

**jasfox** · 2012-03-09, 10:40

Your issue is not related to the use of the API, but is merely a CSS styling issue. If you wish to support this specific version of the safari browser, you may have to add some safari specific CSS. The discussions on this board are related to the use of the Nokia Maps API itself, and not about general CSS styling issues.

It appears that you seem to be trying to place the checkbox over the map - I would suggest the best way to do this to ensure cross browser compatibility would be to inject the checkbox as a DOM element using the appendChild functionality. If however you merely wish to display a checkbox and a map on the same page then just split the mark up into separate DIVs and style the page so they don't overlap.

**Ulala** · 2012-03-09, 12:04

Hi,

Please if you don't mind, If I am not applying any safari specific css styles, then checkbox is displaying in Safari browser, when we not including the JS file. [<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>].

If only when we include the JS file related to the Nokia Maps API , the checkbox is disappearing.

I am just using <input type ="checkbox" name="chk" id="chk"/>. In this below code, checkbox is not overlapping on the map. Please go through once.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
  <script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
   <style type="text/css">
    .nm_bubble_content{
              color:black;
              background:white;
              border: 1px solid white;
              padding:0px;			  	  			  	  
    }
    
    /* common settings checkbox and radiobutton */
    input[type="checkbox"],
    input[type="radio"]
    {
     -khtml-appearance: none;
     width: 20px;
     height: 20px;
     vertical-align: middle;
    }
    </style>
  </head>
<body>
    <span style="float:left"><input type="checkbox" name="chk" id="chk"/>
Check box display here</span>
<div id="map" style="z-index: -1; left:0px; top:50px; width: 50%; height: 50%; position: absolute;"></div>

<script type="text/javascript">       
        
var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   var map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 4,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

</script> 
</body>
</html>

**jasfox** · 2012-03-09, 12:28

Originally Posted by Ulala

Hi,

Please if you don't mind, If I am not applying any safari specific css styles, then checkbox is displaying in Safari browser, when we not including the JS file. [<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>].

If only when we include the JS file related to the Nokia Maps API , the checkbox is disappearing.

I am just using <input type ="checkbox" name="chk" id="chk"/>. In this below code, checkbox is not overlapping on the map. Please go through once.

As stated previously this is a CSS issue, not an API issue. If you remove the map altogether and replace the <div id='map> with an embedded image, you will still have the same problem. If you are having a display issue in Safari you will need to add Safari specific CSS styling.

CSS Styling is not within the remit of this discussion board.

**karthik7452** · 2012-03-14, 04:28

hi Jasfox ..

I am using nokia maps .

i have also same issue in safari.....

**jasfox** · 2012-03-15, 10:49

Originally Posted by karthik7452

hi Jasfox ..

I am using nokia maps .

i have also same issue in safari.....

Checkbox.jpg

As you can see from this screenshot, it is possible to add checkboxes directly above the map or on top of the map across a variety of browsers - I've included Mozilla Firefox, Internet Explorer, Safari and Chrome here.

The checkbox on the map is displayed using DOM injection.

Code:

var node = document.createElement("span");

node.id = 'nm_tooltip';
node.style.top = 0;
node.style.left = 0;
node.style.position="absolute";
node.style.color = "blue";

var checkBox =  document.createElement("input");
checkBox.style.zorder = -1;
checkBox.type="checkbox";
node.appendChild( checkBox);
node.appendChild( document.createTextNode('Check box 2 display here'));
document.getElementById("map").appendChild(node);

If you are having issues with cross browser styling, then I suggest you alter your CSS taking care with the vendor-specific CSS properties but browser specific CSS styling is nothing to do with the maps per se. As a hint, you could look at this blog for details:

https://acidmartin.wordpress.com/200...ri-and-chrome/

By the way, the screenshot uses the following

Code:

input[type="checkbox"]{
-khtml-appearance: visual;
... etc.

**karthik7452** · 2012-04-13, 10:14

Hi Jasfox...

verify this code.. still I am not getting check box in safari browser.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
<script src="http://api.maps.nokia.com/2.1.1/jsl.js" type="text/javascript" charset="utf-8"></script>
   <style type="text/css">
    .nm_bubble_content{
          color:black;
          background:white;
          border: 1px solid white;
          padding:0px;			  	  			  	  
    }
    
    /* common settings checkbox and radiobutton */
    input[type="checkbox"]
    {
         -khtml-appearance: visual;
         width: 20px;
         height: 20px;
         vertical-align: middle;
    }
    </style>
  </head>
<body>
    <span id="nm_tooltip" style="float:left"><input type="checkbox" name="chk" id="chk"/></span>
Check box display here
<div id="map" style="z-index: -1; left:0px; top:50px; width: 50%; height: 50%; position: absolute;"></div>

<script type="text/javascript">
var node = document.createElement("span");

node.id = 'nm_tooltip';
node.style.top = 0;
node.style.left = 0;
node.style.position="absolute";
node.style.color = "blue";

var checkBox =  document.createElement("input");
checkBox.style.zorder = -1;
checkBox.type="checkbox";
node.appendChild(checkBox);
node.appendChild(document.createTextNode('Check box 2 display here'));
document.getElementById("map").appendChild(node);

var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   var map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 4,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

</script> 
</body>
</html>

**Maveric** · 2012-04-13, 10:29

Hi there,

Please try this http://api.maps.nokia.com/2.2.0/jsl.js instead of your http://api.maps.nokia.com/2.1.1/jsl.js

Let me know how it goes?

Best Regards,
Marko

**karthik7452** · 2012-04-13, 10:50

No.. it's not working

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ovi Maps API Example</title>
<script src="http://api.maps.nokia.com/2.2.0/jsl.js" type="text/javascript" charset="utf-8"></script>
   <style type="text/css">
    .nm_bubble_content{
          color:black;
          background:white;
          border: 1px solid white;
          padding:0px;			  	  			  	  
    }
    
    /* common settings checkbox and radiobutton */
    input[type="checkbox"]
    {
         -khtml-appearance: visual;
         width: 20px;
         height: 20px;
         vertical-align: middle;
    }
    </style>
  </head>
<body>
    <span id="nm_tooltip" style="float:left"><input type="checkbox" name="chk" id="chk"/></span>
Check box display here
<div id="map" style="z-index: -1; left:0px; top:50px; width: 50%; height: 50%; position: absolute;"></div>

<script type="text/javascript">
var node = document.createElement("span");

node.id = 'nm_tooltip';
node.style.top = 0;
node.style.left = 0;
node.style.position="absolute";
node.style.color = "blue";

var checkBox =  document.createElement("input");
checkBox.style.zorder = -1;
checkBox.type="checkbox";
node.appendChild(checkBox);
node.appendChild(document.createTextNode('Check box 2 display here'));
document.getElementById("map").appendChild(node);

var infoBubbles = new nokia.maps.map.component.InfoBubbles();        
var     infoBubble;
var	restore_bubble = false;

var arr = new Array();
        arr.push(new nokia.maps.geo.Coordinate(52.5152, 13.380001));
        arr.push(new nokia.maps.geo.Coordinate(52.6162, 13.380341));
        arr.push(new nokia.maps.geo.Coordinate(52.5172, 13.387701));

var info = new Array();
        info.push("\"The time has come,\" the Walrus said");
        info.push("\"To talk of many things:");
        info.push("Of shoes--and ships--and sealing-wax-- Of cabbages--and kings--");

   var map = new nokia.maps.map.Display(
    document.getElementById("map"),
    {
    'zoomLevel': 4,
    'center': [52.5152, 13.380001],
            components: [ 
                    new nokia.maps.map.component.Behavior(),
                            new nokia.maps.map.component.ZoomBar(),
                            new nokia.maps.map.component.TypeSelector(),
                    infoBubbles
            ]
    });

       for (var i = 0; i < arr.length; i++){       
            var markersIconsUrl = "http://www.mobilesroom.com/wp-content/uploads/2012/01/Yahoo-Logo-Images.jpg";
            startIcon = new nokia.maps.gfx.BitmapImage(markersIconsUrl, null, 20, 20, 25, 95);
            startMarker = new nokia.maps.map.Marker(arr[i], {                        
                            icon: startIcon,
                            anchor: new nokia.maps.util.Point(12, 12)

                    });
                    startMarker.html = info[i];
                    startMarker.coordinate = arr[i];
                   // alert(arr[i]);
                    startMarker.addListener("mouseover", function(evt) {
                    infoBubble = infoBubbles.addBubble(evt.target.html, evt.target.coordinate);
                    restore_bubble = true;
             });
            map.objects.add(startMarker);
       }

</script> 
</body>
</html>

**Maveric** · 2012-04-13, 11:31

Ok thanks for the update - looking to this right now - back as soon as I can.

best
Marko

**jasfox** · 2012-04-13, 16:36

Your problem is that you are adding the checkbox before the map has been initialised.

The line:

Code:

document.getElementById("map").appendChild(node);

must be after

Code:

var map = new nokia.maps.map.Display(
document.getElementById("map"),
{
'zoomLevel': 4,
'center': [52.5152, 13.380001],
components: [
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector(),
infoBubbles
]
});

or else the checkbox is displayed behind the map.

**karthik7452** · 2012-04-17, 06:11

Hi,
I changed the code as you said, but it is not displaying. I am using Windows 7 Safari 5.0.5 browser. Please check once agin.

Discussion Board

Thread: Safari Browser, check boxes and Nokia Maps

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Export TC TrustCenter certificate from safari browser

Check Boxes Not Appearing

UID for KHTML-Safari Browser

list box with check boxes ???

Posting Permissions