Reading xml with jQuery
Reading xml with jQuery
Hi, I have an image map loaded through an xml file. I have hooked ip up to a jquery image map highlight I found, and it works really well.
http://plugins.jquery.com/project/maphilight
I then edited this jquery to add descriptive text when you hover over the hotspots. This is working ok but my limited knowledge of both xml and jquery has limited me and I have ended up creating unnecessary xml.
Here is the xml
<img src="bathroom.gif" alt="bathroom" width="852" height="571" >
<file>bathroom.xml</file>
<roomID>1</roomID>
<area id="Bath">
<componenetID>2</componenetID>
<componentDrillDown>N</componentDrillDown>
<component>NA</component>
<shape>poly</shape>
<helpText>Baths are great for getting clean</helpText>
<title>Bath</title>
<coords>363,318,364,377,509,420,521,421,599,400,600,334,439,302</coords>
</area>
<area id="Toilet">
<componenetID>52</componenetID>
<componentDrillDown>Y</componentDrillDown>
<component>components/toilet.xml</component>
<shape>poly</shape>
<helpText>Help</helpText>
<title>Toilet</title>
<coords>154,319,158,327,167,358,180,368,187,408,203,424,222,433,243,428,238,404,250,372,222,364,231,351,232,321,232,314,215,306</coords>
</area>
</img>
This is done in asp .net and there is little data I can attach to the hotspots, so i ahve used the title as a unique field to search.
This led to the problem where i have had to repeat the title as an attribute in the xml, and the reason i did this is because I get the title of the currently selected hotspot, and use this to search the xml for the helptext node.
Here is the edited j query - Ive bolded my additions
(function(F) {
var B, C, J, M, L, I, G, E, H, A, K;
B = document.namespaces;
has_canvas = !!document.createElement("canvas").getContext;
if (!(has_canvas || B)) {
F.fn.maphilight = function() {
return this
};
return
}
if (has_canvas) {
G = function(P, O, N) {
if (O <= 1) {
P.style.opacity = O;
window.setTimeout(G, 10, P, O + 0.1, 10)
}
};
E = function(N) {
return Math.max(0, Math.min(parseInt(N, 16), 255))
};
H = function(N, O) {
return "rgba(" + E(N.substr(0, 2)) + "," + E(N.substr(2, 2)) + "," + E(N.substr(4, 2)) + "," + O + ")"
};
C = function(N) {
var O = F('<canvas style="width:' + N.width + "px;height:" + N.height + 'px;"></canvas>').get(0);
O.getContext("2d").clearRect(0, 0, O.width, O.height);
return O
};
J = function(Q, N, T, P, O, DB, feed) {
var S, R = Q.getContext("2d");
R.beginPath();
//DB
$.get('/xml/' + feed, function(d) {
$(d).find('area[id = "' + DB + '"]').each(function() {
var $book = $(this);
var title = $book.find("title").text();
var Helptext = $book.find('helpText').text();
$('#desc').html("<strong>Information:</strong><p>" + title + "</p><p>" + Helptext.toString() + "</p>");
});
});
//END
if (N == "rect") {
R.rect(T[0], T[1], T[2] - T[0], T[3] - T[1])
} else {
if (N == "poly") {
R.moveTo(T[0], T[1]);
for (S = 2; S < T.length; S += 2) {
R.lineTo(T[S], T[S + 1])
}
} else {
if (N == "circ") {
R.arc(T[0], T[1], T[2], 0, Math.PI * 2, false)
}
}
}
R.closePath();
if (P.fill) {
R.fillStyle = H(P.fillColor, P.fillOpacity);
R.fill()
}
if (P.stroke) {
R.strokeStyle = H(P.strokeColor, P.strokeOpacity);
R.lineWidth = P.strokeWidth;
R.stroke()
}
if (P.fade) {
G(Q, 0)
}
};
M = function(N) {
N.getContext("2d").clearRect(0, 0, N.width, N.height)
$('#desc').html("<strong>Information:</strong><p></p>");
}
} else {
C = function(N) {
return F('<var style="zoom:1;overflow:hidden;display:block;width:' + N.width + "px;height:" + N.height + 'px;"></var>').get(0)
};
J = function(O, R, S, V, N, DB, feed) {
//DB
$.get('/xml/' + feed, function(d) {
$(d).find('area[id = "' + DB + '"]').each(function() {
var $book = $(this);
var title = $book.find("title").text();
var Helptext = $book.find('helpText').text();
$('#desc').html("<strong>Information:</strong><p>" + title + "</p><p>" + Helptext.toString() + "</p>");
});
});
//END
var T, U, P, Q;
T = '<v:fill color="#' + V.fillColor + '" opacity="' + (V.fill ? V.fillOpacity : 0) + '" />';
U = (V.stroke ? 'strokeweight="' + V.strokeWidth + '" stroked="t" strokecolor="#' + V.strokeColor + '"' : 'stroked="f"');
P = '<v:stroke opacity="' + V.strokeOpacity + '"/>';
if (R == "rect") {
Q = F('<v:rect name="' + N + '" filled="t" ' + U + ' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + S[0] + "px;top:" + S[1] + "px;width:" + (S[2] - S[0]) + "px;height:" + (S[3] - S[1]) + 'px;"></v:rect>')
} else {
if (R == "poly") {
Q = F('<v:shape name="' + N + '" filled="t" ' + U + ' coordorigin="0,0" coordsize="' + O.width + "," + O.height + '" path="m ' + S[0] + "," + S[1] + " l " + S.join(",") + ' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:' + O.width + "px;height:" + O.height + 'px;"></v:shape>')
} else {
if (R == "circ") {
Q = F('<v:oval name="' + N + '" filled="t" ' + U + ' style="zoom:1;margin:0;padding:0;display:block;position:absolute;left:' + (S[0] - S[2]) + "px;top:" + (S[1] - S[2]) + "px;width:" + (S[2] * 2) + "px;height:" + (S[2] * 2) + 'px;"></v:oval>')
}
}
}
Q.get(0).innerHTML = T + P;
F(O).append(Q)
};
M = function(N) {
F(N).find("[name=highlighted]").remove()
$('#desc').html("<strong>Information:</strong><p></p>");
}
}
L = function(O) {
var N, P = O.getAttribute("coords").split(",");
for (N = 0; N < P.length; N++) {
P[N] = parseFloat(P[N])
}
return [O.getAttribute("shape").toLowerCase().substr(0, 4), P]
};
//DB
ZZ = function(O) {
return [O.getAttribute("title")];
};
YY = function(O) {
return $('#ctl00_ContentPlaceHolder1_hdnMapname').val();
};
//END
K = function(P, O) {
var N = F(P);
return F.extend({}, O, F.metadata ? N.metadata() : false, N.data("maphilight"))
};
A = function(N) {
if (!N.complete) {
return false
}
if (typeof N.naturalWidth != "undefined" && N.naturalWidth == 0) {
return false
}
return true
};
I = {
position: "absolute",
left: 0,
top: 0,
padding: 0,
border: 0
};
var D = false;
F.fn.maphilight = function(P) {
P = F.extend({}, F.fn.maphilight.defaults, P);
if (F.browser.msie && !D) {
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var O = document.createStyleSheet();
var N = ["shape", "rect", "oval", "circ", "fill", "stroke", "imagedata", "group", "textbox"];
F.each(N, function() {
O.addRule("v\\:" + this, "behavior: url(#default#VML); antialias:true")
});
D = true
}
return this.each(function() {
var V, S, Z, R, U, W, Y, T, X;
V = F(this);
if (!A(this)) {
return window.setTimeout(function() {
V.maphilight(P)
}, 200)
}
Z = F.extend({}, P, F.metadata ? V.metadata() : false, V.data("maphilight"));
X = V.get(0).getAttribute("usemap");
R = F('map[name="' + X.substr(1) + '"]');
if (!(V.is("img") && X && R.size() > 0)) {
return
}
if (V.hasClass("maphilighted")) {
var Q = V.parent();
V.insertBefore(Q);
Q.remove();
F(R).unbind(".maphilight").find("area[coords]").unbind(".maphilight")
}
S = F("<div></div>").css({
display: "block",
background: "url(" + this.src + ")",
position: "relative",
padding: 0,
width: this.width,
height: this.height
});
if (Z.wrapClass) {
if (Z.wrapClass === true) {
S.addClass(F(this).attr("class"))
} else {
S.addClass(Z.wrapClass)
}
}
V.before(S).css("opacity", 0).css(I).remove();
if (F.browser.msie) {
V.css("filter", "Alpha(opacity=0)")
}
S.append(V);
U = C(this);
F(U).css(I);
U.height = this.height;
U.width = this.width;
Y = function(c) {
var a, b;
b = K(this, Z);
if (!b.neverOn && !b.alwaysOn) {
a = L(this);
J(U, a[0], a[1], b, "highlighted", ZZ(this), YY(this));
if (b.groupBy && F(this).attr(b.groupBy)) {
var d = this;
R.find("area[" + b.groupBy + "=" + F(this).attr(b.groupBy) + "]").each(function() {
if (this != d) {
var f = K(this, Z);
if (!f.neverOn && !f.alwaysOn) {
var e = L(this);
J(U, e[0], e[1], f, "highlighted", ZZ(this))
}
}
})
}
F(U).append("<v:rect></v:rect>")
}
};
F(R).bind("alwaysOn.maphilight", function() {
if (W) {
M(W)
}
if (!has_canvas) {
F(U).empty()
}
F(R).find("area[coords]").each(function() {
var a, b;
b = K(this, Z);
if (b.alwaysOn) {
if (!W && has_canvas) {
W = C(V.get());
F(W).css(I);
W.width = V.width();
W.height = V.height();
V.before(W)
}
a = L(this);
if (has_canvas) {
J(W, a[0], a[1], b, "", ZZ(this))
} else {
J(U, a[0], a[1], b, "", ZZ(this))
}
}
})
});
F(R).trigger("alwaysOn.maphilight").find("area[coords]").bind("mouseover.maphilight", Y).bind("mouseout.maphilight", function(a) {
M(U)
});
V.before(U);
V.addClass("maphilighted")
})
};
F.fn.maphilight.defaults = {
fill: true,
fillColor: "000000",
fillOpacity: 0.2,
stroke: true,
strokeColor: "ff0000",
strokeOpacity: 1,
strokeWidth: 1,
fade: true,
alwaysOn: false,
neverOn: false,
groupBy: false,
wrapClass: true
}
})(jQuery);
I basically added two new functions to return map name and title, and then this code twice (for firefox and IE), which looks up the node and then returns help text.
//DB
$.get('/xml/' + feed, function(d) {
$(d).find('area[id = "' + DB + '"]').each(function() {
var $book = $(this);
var title = $book.find("title").text();
var Helptext = $book.find('helpText').text();
$('#desc').html("<strong>Information:</strong><p>" + title + "</p><p>" + Helptext.toString() + "</p>");
});
});
//END
Two issues I could do with help, I want to remove the ID atribute from the xml and just search for the title node which will be unique. This means when people are updating xml its easier and they dont have to waste space with repeating data.
Also, and not so important. This is instantaneous in IE but takes about 1 sec to display text in firefox. Any ideas.
Sorry for my long winded post and i hope someone can help.
Thanks Dave