?
Solved

help to add html code to variable in JavaScript array

Posted on 2008-11-19
6
Medium Priority
?
566 Views
Last Modified: 2012-05-05
I have this variable...

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks"}
};


I want to add an image at the end so it display Tasks - myImage

How I do that, I try without luck ...

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks - <img src=myImage>" }
};

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks &lt;img src=myImage&gt;" }
};

var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": "Tasks" + document.write('<img src=myImage>"); }
};

please advice... thanks!
0
Comment
Question by:a0k0a7
6 Comments
 
LVL 4

Expert Comment

by:husker475
ID: 22999829
Try:
var layers = {
 "activities":
 {"url": "http://domain",
  "name": "Activities"}  ,
 "tasks":
 {"url": "domain",
  "name": 'Tasks - <img src="myImage.ext">' }
};

Open in new window

0
 
LVL 8

Author Comment

by:a0k0a7
ID: 22999894
it didn't work for me...
0
 
LVL 43

Expert Comment

by:David S.
ID: 23000074
If that didn't work, we'll need to see more of your code to be able to help you.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:AFUEGO
ID: 23000211
here is....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Custom</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key="
      type="text/javascript"></script>
 
    <LINK href="menu.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    body {
      font-family: Arial, sans serif;
      font-size: 11px;
    }
    </style>
    <script type="text/javascript" src="menu.js"></script>
    <script type="text/javascript"> 
var map;
var userAdded = 1;
    var centreLat=0.0;
    var centreLon=0.0;
    var initialZoom=1;
 
var layers = {
 "activities": 
 {"url": "http://google.com",
  "name": "Activities"}  ,
 "tasks": 
 {"url": "http://google.com",
  "name": "Tasks" }
};
 
function customGetTileURL(a,b) {
      //converts tile x,y into keyhole string
 
      var c=Math.pow(2,b);
 
        var d=a.x;
        var e=a.y;
        var f="t";
        for(var g=0;g<b;g++){
            c=c/2;
            if(e<c){
                if(d<c){f+="q"}
                else{f+="r";d-=c}
            }
            else{
                if(d<c){f+="t";e-=c}
                else{f+="s";d-=c;e-=c}
            }
        }
        return "portal/"+f+".jpg"
    }
 
    function getWindowHeight() {
        if (window.self&&self.innerHeight) {
            return self.innerHeight;
        }
        if (document.documentElement&&document.documentElement.clientHeight) {
            return document.documentElement.clientHeight;
        }
        return 0;
    }
 
    function getWindowWidth() {
        if (window.self&&self.innerWidth) {
            return self.innerWidth;
        }
        if (document.documentElement&&document.documentElement.clientWidth) {
            return document.documentElement.clientWidth;
        }
        return 0;
    }
 
    function resizeMapDiv() {
        //Resize the height of the div containing the map.
        //Do not call any map methods here as the resize is called before the map is created.
    	var d=document.getElementById("map");
    	var e=document.getElementById("sidebar");
        var offsetTop=0;
        for (var elem=d; elem!=null; elem=elem.offsetParent) {
            offsetTop+=elem.offsetTop;
        }
        var height=getWindowHeight()-offsetTop-16;
        if (height>=0) {
            d.style.height=height+"px";
            e.style.height=height+"px";
        }
        var width=getWindowWidth()-offsetTop-16-150;
        if (width>=0) {
            d.style.width=width+"px";
        }
    }
 
 
 
function onLoad() {
  //map = new GMap2(document.getElementById("map")); 
 
  //map.setCenter(new GLatLng(37.422341, -122.085018), 5);
  //map.addControl(new GSmallMapControl());
 
        resizeMapDiv();
        var copyright = new GCopyright(1,
                              new GLatLngBounds(new GLatLng(-90, -180),
                                                new GLatLng(90, 180)),
                              0,
                              "<a href=\"https://google.com\">G-Fuck</a>");
        var copyrightCollection = new GCopyrightCollection("(c) Company, 2008");
        copyrightCollection.addCopyright(copyright);
 
        //create a custom picture layer
        var pic_tileLayers = [ new GTileLayer(copyrightCollection , 0, 17)];
        pic_tileLayers[0].getTileUrl = customGetTileURL;
        pic_tileLayers[0].isPng = function() { return false; };
        pic_tileLayers[0].getOpacity = function() { return 1.0; };
        var pic_customMap = new GMapType(pic_tileLayers, new GMercatorProjection(6), "Pic",
            {maxResolution:5, minResolution:0, errorMessage:"Data not available"});
            
        pic_customMap.getProjection().tileCheckRange = function(a, b, c){
                var d = Math.pow(2,b); 
                if (a.y < 0 || a.y >= d)
                        return false;
                if (a.x < 0 || a.x >= d)
                        return false;
                return true
        }
        
        pic_customMap.getProjection().getWrapWidth = function() {
                return 1024 * 1024 * 1024;
        }
 
        //Now create the custom map. Would normally be G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP
        map = new GMap2(document.getElementById("map"),{mapTypes:[pic_customMap]});
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());
        map.enableDoubleClickZoom();
	map.enableContinuousZoom();
	map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(centreLat, centreLon), initialZoom, pic_customMap);
 
  //document.getElementById("url").value = "http://";
      new ContextMenu(map);
  
  for(var layer in layers) {
    addTR(layer, layers[layer].name);
    document.getElementById(layer).checked = true;
    toggleGeoXML(layer, true);
    }
} 
 
 
 
function addGeoXML() {
  var theUrl = document.getElementById("url").value;
  theUrl = theUrl.replace(/^\s+/, "");
  theUrl = theUrl.replace(/\s+$/, "");
  if (theUrl.indexOf(' ') != -1) {
    alert('Error - that address has a space in it');
  } else {
    var id = "userAdded" + userAdded;
    layers[id] = {};
    layers[id].url = theUrl;
    layers[id].name = "User Layer " + userAdded;
 
    addTR(id);
    document.getElementById(id).checked = true;
    toggleGeoXML(id, true);
    userAdded++;
  }
}
 
function addTR(id) {
  var layerTR = document.createElement("tr");
 
  var inputTD = document.createElement("td");
  var input = document.createElement("input");
  input.type = "checkbox";
  input.id = id;
  input.onclick = function () { toggleGeoXML(this.id, this.checked) };
  inputTD.appendChild(input);
 
  var nameTD = document.createElement("td");
  var nameA = document.createElement("a");
  //nameA.href = layers[id].url;
  var name = document.createTextNode(layers[id].name);
  nameA.appendChild(name);
  nameTD.appendChild(nameA);
 
  layerTR.appendChild(inputTD);
  layerTR.appendChild(nameTD);
  document.getElementById("sidebarTBODY").appendChild(layerTR);
}
 
function notzoomToGeoXML(geoXml) {
  var center = geoXml.getDefaultCenter();
  var span = geoXml.getDefaultSpan();
  var sw = new GLatLng(center.lat() - span.lat() / 2,
                       center.lng() - span.lng() / 2);
  var ne = new GLatLng(center.lat() + span.lat() / 2,
                       center.lng() + span.lng() / 2);
  var bounds = new GLatLngBounds(sw, ne);
  map.setCenter(center);
  map.setZoom(map.getBoundsZoomLevel(bounds));
}
 
function toggleGeoXML(id, checked) {
  if (checked) {
    var geoXml = new GGeoXml(layers[id].url);
    GEvent.addListener(geoXml, 'load', function() {
      if (geoXml.loadedCorrectly()) {
        //geoXml.gotoDefaultViewport(map);
        layers[id].geoxml = geoXml;
        document.getElementById("status").innerHTML = "";
      }
    });
    layers[id].geoXml = geoXml;
    map.addOverlay(layers[id].geoXml);
    document.getElementById("status").innerHTML = "Loading...";
  
  } else if (layers[id].geoXml) {
    map.removeOverlay(layers[id].geoXml);
  }
}
 
  </script>
 
</head>
<body onload="onLoad()" onresize="resizeMapDiv()" onunload="GUnload()">
    <br/>
    <div id="map" style="width: 800px; height: 600px; float:left; border: 1px solid black;"></div>
    <div id="sidebar" style="float:left; overflow-vertical:scroll; height: 600px; width:150px; border:1px solid black">
    <div style="font-size: 14px;"><br/>&nbsp;Available:</div>
    <table id="sidebarTABLE">
    <tbody id="sidebarTBODY">
    </tbody>
    </table>
    <div id="status" style="text-align:center; color: #ff0000"></div>
    <div style="font-family: Arial, sans serif; font-size: 14px;"><br/><br/>&nbsp;Add to map:</div>    
    &nbsp;<input id="url" value="http://"/>
    &nbsp;<input type="button" value="Add" onClick="addGeoXML();"/>
    </div>
 
  </body>
</html>
 
      

Open in new window

0
 
LVL 8

Author Comment

by:a0k0a7
ID: 23000245
What I would like to do it is to add an image icon to next to the layer definition.

It currently have ID and Name, I am not sure if I have to extend the function addTR()....


 
0
 
LVL 1

Accepted Solution

by:
AFUEGO earned 2000 total points
ID: 23006882
You need the following changes to the code....

#1 change variable definitions
#2 update AddGeoXML function
#3 update AddTR function

-Good Luck
var layers = {
 "activities": 
 {"url": "http://www.afuego.com",
  "name": "Activities" ,
  "image": "http://www.afuego.com/img/logo.gif" }  , 
 "tasks": 
 {"url": "http://www.afuego.com",
  "name": "Tasks",
   "image": "http://www.afuego.com/img/logo.gif" }
};
 
 
function addGeoXML() {
  var theUrl = document.getElementById("url").value;
  var theImage = document.getElementById("image").value;
  
  theUrl = theUrl.replace(/^\s+/, "");
  theUrl = theUrl.replace(/\s+$/, "");
  
  theImage = theUrl.replace(/^\s+/, "");
  theImage = theUrl.replace(/\s+$/, "");
  
  if (theUrl.indexOf(' ') != -1 && theImage.indexOf(' ') != -1) {
    alert('Error - that address has a space in it');
  } else {
    var id = "userAdded" + userAdded;
    layers[id] = {};
    layers[id].url = theUrl;
    layers[id].image = theImage;
    layers[id].name = "User Layer " + userAdded;
 
    addTR(id);
    document.getElementById(id).checked = true;
    toggleGeoXML(id, true);
    userAdded++;
  }
}
 
function addTR(id) {
  var layerTR = document.createElement("tr");
  
  var inputTD = document.createElement("td");
  var input = document.createElement("input");
  
  //Add Legend to sidebar -  display marker icons
  var image = document.createElement("img");
  image.src = layers[id].image;
  
  input.type = "checkbox";
  input.id = id;
  input.onclick = function () { toggleGeoXML(this.id, this.checked) };
  inputTD.appendChild(input);
 
  var nameTD = document.createElement("td");
  var nameTD2 = document.createElement("td");
  
  var nameA = document.createElement("a");
  //nameA.href = layers[id].url;
  var name = document.createTextNode(layers[id].name);
  nameA.appendChild(name);
  nameTD.appendChild(nameA);
  nameTD2.appendChild(image);
 
  layerTR.appendChild(inputTD);
  layerTR.appendChild(nameTD);
  layerTR.appendChild(nameTD2)
  document.getElementById("sidebarTBODY").appendChild(layerTR);
}

Open in new window

0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question