Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Javascript Help

  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Help

    I am not a javascript coder by any means. I am using some sample code to create a function on a site, and I need to change one thing in the way that it displays.

    This code:
    Code:
    <div><select id="locationSelect" style="width:90%;visibility:hidden"></select></div>
    is populated by Javascript:
    Code:
    function createOption(name, distance, num) {
          var option = document.createElement("option");
          option.value = num;
          option.innerHTML = name + " - " + distance.toFixed(1) + " Miles";
          locationSelect.appendChild(option);
        }
    It produces a drop down for each location that the query returns. The code originally came from here: https://developers.google.com/maps/a...earch_v3?csw=1

    So what I want to do is display the results in a list style, rather than in a drop down. But I have absolutely no clue how to make this happen, because I'm just not a js girl!

    Any ideas?

    TIA!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    I don't know what the format of the google information is in,
    but if it is an array of elements you could create the list like this...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
    .ulCSS { font-size:1.25em; color:red; list-style-type:none; }
    </style>
    
    <script type="text/javascript">
    Array.prototype.toUL=function(){  
      var b="<ul class='ulCSS'>\n  <li> ";
      return b+this.join(" <\/li>\n  <li> ")+" <\/li>\n<\/ul>\n";
    }
    </script>
    
    </head>
    <body>
    <div id="debug"></div>
    
    <script type="text/javascript">
    var googleInformation = [
       'zero','one','two','three','four','five'
    ];
    window.onload = function() {
      document.getElementById('debug').innerHTML = googleInformation.toUL();
    }
    </script>
    
    </body>
    </html>
    Given more information, it could be developed further.
    Adjust the CSS for your individual display needs.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    sticking closer to the google example...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    <style type="text/css">
    li{cursor:pointer;}
    </style>
    </head>
    <body>
    <ul id="loclist"></ul>
    
    <script type="text/javascript">
    function createOption(name, distance, num) {
          var it = document.createElement("li");
    	  it.setAttribute("data-marker", num);
          it.innerHTML = name + " - " + distance.toFixed(1) + " Miles";
    	  it.onclick=function(){showMarker(this)}
          document.getElementById("loclist").appendChild(it);
        }
    
    function showMarker(li){
    google.maps.event.trigger(markers[li.getAttribute("data-marker")], 'click');
    }
    
    //for debugging only - presumably createOption gets called from elsewhere	
    createOption("home", 4878772.00, 4);
    createOption("office", 484545.00, 6);	
    </script>
    
    </body>
    </html>


  •  

    Posting Permissions

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