×

Discussion Board

Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Registered User
    Join Date
    Feb 2012
    Posts
    38

    Safari Browser, check boxes and Nokia Maps

    --- splitting from previous issue.
    Last edited by jasfox; 2012-03-09 at 13:03.

  2. #2
    Registered User
    Join Date
    Feb 2012
    Posts
    38

    Re: How to decrease the Icon (Image) marker size.

    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?

  3. #3
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to decrease the Icon (Image) marker size.

    Quote Originally Posted by Ulala View Post
    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.

    1. Try running your documents through a prettifier such as HTML tidy http://infohound.net/tidy/
    2. Ensure the mark up is valid before assuming the API is at fault. e.g. http://validator.w3.org/
    3. Slowly remove all CSS styling until the problem goes away.
    4. 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;">

  4. #4
    Registered User
    Join Date
    Feb 2012
    Posts
    38

    Re: How to decrease the Icon (Image) marker size.

    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>

  5. #5
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to decrease the Icon (Image) marker size.

    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.

  6. #6
    Registered User
    Join Date
    Feb 2012
    Posts
    38

    Re: How to decrease the Icon (Image) marker size.

    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>

  7. #7
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to decrease the Icon (Image) marker size.

    Quote Originally Posted by Ulala View Post
    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.
    Last edited by jasfox; 2012-03-09 at 13:05.

  8. #8
    Registered User
    Join Date
    Mar 2012
    Posts
    11

    Re: How to decrease the Icon (Image) marker size.

    hi Jasfox ..

    I am using nokia maps .

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

  9. #9
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: How to decrease the Icon (Image) marker size.

    Quote Originally Posted by karthik7452 View Post
    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.

  10. #10
    Registered User
    Join Date
    Mar 2012
    Posts
    11

    Re: Safari Browser, check boxes and Nokia Maps

    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>
    Last edited by jasfox; 2012-04-13 at 16:37. Reason: place code in [Code] tags for readability.

  11. #11
    Super Contributor
    Join Date
    May 2008
    Location
    Helsinki, Finland
    Posts
    1,100

    Re: Safari Browser, check boxes and Nokia Maps

    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
    [FONT="Comic Sans MS"][COLOR="Blue"][/COLOR][I]Marko Lumivuori
    Technical Support
    +358 40 8019330
    [email]marko.lumivuori@nokia.com[/email][/I][/FONT]

  12. #12
    Registered User
    Join Date
    Mar 2012
    Posts
    11

    Re: Safari Browser, check boxes and Nokia Maps

    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>
    Last edited by jasfox; 2012-04-13 at 16:38. Reason: Please place code in [Code] tags for readability.

  13. #13
    Super Contributor
    Join Date
    May 2008
    Location
    Helsinki, Finland
    Posts
    1,100

    Re: Safari Browser, check boxes and Nokia Maps

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

    best
    Marko
    [FONT="Comic Sans MS"][COLOR="Blue"][/COLOR][I]Marko Lumivuori
    Technical Support
    +358 40 8019330
    [email]marko.lumivuori@nokia.com[/email][/I][/FONT]

  14. #14
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: Safari Browser, check boxes and Nokia Maps

    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.

  15. #15
    Registered User
    Join Date
    Mar 2012
    Posts
    11

    Re: Safari Browser, check boxes and Nokia Maps

    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.

Page 1 of 2 12 LastLast

Similar Threads

  1. Export TC TrustCenter certificate from safari browser
    By kuddy_abc in forum Symbian C++
    Replies: 2
    Last Post: 2011-12-20, 22:09
  2. Check Boxes Not Appearing
    By saketbharambeiiith in forum Python
    Replies: 2
    Last Post: 2009-11-15, 00:40
  3. UID for KHTML-Safari Browser
    By presentTech in forum Symbian C++
    Replies: 2
    Last Post: 2006-08-29, 20:53
  4. list box with check boxes ???
    By dakoz in forum Symbian C++
    Replies: 1
    Last Post: 2006-04-11, 20:30

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •