solution1368
asked on
div close
I have below codes in one of the js file, and I just want to create "x" on the right top corner, and once the "x" is clicked, it will close the div. how can I do that?
Thanks
Thanks
var myOptions = {
content: '<div class="infobox"><div class="image"><img src="http://xxx/imag.png" alt=""></div><div class="title"><a href="detail.html">' + unescape(location[3]) + '<br>' + unescape(location[5]) + ', ' + unescape(location[6]) + '</a></div><div class="area"><span class="key">Phone No.:</span><span class="value">' + unescape(location[7]) + '</span></div><div class="price">' + unescape(location[8]) + '</div><div class="link"><a href="detail.html">View more</a></div></div>',
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-146, -190),
zIndex: null,
closeBoxURL: "",
infoBoxClearance: new google.maps.Size(1, 1),
position: new google.maps.LatLng(location[0], location[1]),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
ASKER
I can't post the entire js file here for u. But below is exactly what I have for this <div></div>
section. I added <span>x</span>
so when the x is clicked, infobox div is closed.
That is all I need.
content: '<div class="infobox"><div><span class=close>x</span></div> <div class="image"><img src="xxx/property-tiny-1.p ng" alt=""></div><div class="title"><a href="detail.html">' + unescape(location[3]) + '<br>' + unescape(location[5]) + ', ' + unescape(location[6]) + '</a></div><div class="area"><span class="key">Phone No.:</span><span class="value">' + unescape(location[7]) + '</span></div><div class="price">' + unescape(location[8]) + '</div><div class="link"><a href="detail.html">View more</a></div></div>',
section. I added <span>x</span>
so when the x is clicked, infobox div is closed.
That is all I need.
content: '<div class="infobox"><div><span
If you looked at my sample, it is right here
// When you click the X, hide it
$('.close').click(function(){
$('.open').hide();
// show the button
$('.openbox').show();
});
You can convert the above sample to meet your needs as below. // When you click the X, hide it
$('.close').click(function(){
$('.infobox').hide();
});
You will want to make sure jquery is loaded first and also wrap the code in a ready function
$(function() {
// Handler for .ready() called.
$('.close').click(function(){
$('.infobox').hide();
})
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thank. You are right. It is dynamic called by wcf. and .on does work
You did not post enough code for me to understand exactly what you are doing. I have a simple example you can use in your own way. http://jsbin.com/aQIJEpi/1/edit?html,css,js,output
The code for the jsbin I posted is below. I also noticed you have some open questions that would be nice to close out before we get too deep into this one.
Open in new window
Open in new window
Open in new window