bannana123 Posted January 10, 2011 Share Posted January 10, 2011 Hi! I'm very new to Javascript, but wanted to learn after seeing JQuery UI. My project is to have a map with some markers on for buildings, when a marker is clicked a dialog comes up with information about the building inside it. The popups must be dragable (moveable, and closeable) and there must be the ability to have multiple dialogs on the page. I plan to use an image of the area and place clickable map areas (Hopefully I can colour code the areas and put the title of each building there) Or I could place links on the map in defined areas ? The main issue I have is that I need these multiple boxes on the screen. So far I can click in 1 region and 1 box will come up, but clicking the other region does nothing until the open box is closed. Perhaps I am going about this the wrong way, but any help or guidance would be very helpful! I have attached a diagram to explain better. Thanks! <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.7.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script> <STYLE> #dialog { width: 500px; height: 150px; padding: 0.5em; } </STYLE> <script type="text/javascript"> function clicky() { $('#box').dialog({ position: top}); } </script> </head> <body> <div id="box" style="display:none;" > <p>Some info for a box</p> </div> <img src="../IMG00128-20100705-1647.jpg" width="700" height="525" border="0" usemap="#Map"> <map name="Map" id="showTerms"> <area shape="rect" coords="31,186,677,243" href="#" onClick="clicky();"> <area shape="rect" coords="24,16,670,73" href="#" onClick="clicky();"> </map> </body> </html> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Omirion Posted January 12, 2011 Share Posted January 12, 2011 You are going about it wrong. You are adding multiple dialogs to one DOM element. that is '#box' You need a way of passing the clicked elemnt to the clicky function Here is an example. if you intend to assigns the events in the HTML you can do this. <elemnet onclick="clicky(this)"> Now you pass the clicked element to the clicky() func Now you just need to handle the other end. function clicky(element){ $(element).dialog() } This should work in theory. I don't know if it will work with the <area> element. <a> will work <divs> will work too. Basicly you need a way of getting the clicked element. And opening a dialog for that element. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.