littled.net » javascript

How to close a jQuery dialog box by clicking outside of it

David — Mon, 30 Nov 2009 15:34:58 +0000

JQuery gives you a very simple way to create dialog overlays with the dialog() event. So, by clicking an HTML element you can activate a “stay-on-the-page” overlay dialog box.

Traditionally one might use dialog boxes to ask the user a question to which she must respond (e.g. with an “Ok” or “Cancel”) but their use can extend beyond this. For instance I’ve used a dialog to show a mega drop-down menu; i.e. clicking a link opens a dialog box with a list of categorised links.

JQuery’s default behaviour for closing dialog boxes is not unreasonable: the user must click on the “Close” button (e.g. in the form of text or an “x”) or hit the escape key. However it’s possible you may want to provide more options for your users to close a box by simply clicking outside it.

I puzzled over this and didn’t get very far with Googling but came up with the following solution which seems to work.

When your dialog is created, a div with the class “ui-widget-overlay” is also created which “greys out” the background allowing the user to fully focus on the dialog. You can use this as a hook to add your dialog closing code, e.g.

$(".ui-widget-overlay").live("click", function() { $("#quick-links-modal").dialog("close"); } );

In this case my dialog has the ID “quick-links-modal”. NB you need to use the “live” event (rather than “click” etc.) in order to bind the event to your dialog before the dialog has been initiated.

“Internet Explorer cannot open the Internet site” error

David — Fri, 01 Aug 2008 15:33:30 +0000

So, Internet Explorer 6 has just claimed another hour and a half of my life by refusing to act like a decent browser and demanding its own specific hack.

The problem in question has been well-documented but most of the references I found to the solution linked to a website that is now defunct, so I thought I’d include my own solution below in case it’s of any use.

I’m running a Google Map on a page. The Google Map script is referenced in my page’s as is my own script which generates a map and then does things with it. Pretty standard stuff.

However, in Internet Explorer 6 when you access the page you get the following message alert,”Internet Explorer cannot open the Internet site – operation aborted” and then you see a “Page cannot be displayed” message. The reasons for this are outlined in Nirmal’s post, How to Fix “Internet Explorer Cannot Open the Internet Site- Operation Aborted” Error.

I fixed it by moving both the call to the Google Maps Javascript and my own Javascript file to the end of the page, just before the closing tag. I also threw in a defer=”defer” attribute to my own script reference just for extra safety. This will prevent IE from executing the script until the page has completed loading.

KML overlays in Google Maps in two minutes

David — Sat, 23 Jun 2007 13:22:12 +0000

Following on from the Google Developer Day a few weeks back, in which we were all encouraged to encode our geographical data in KML format (Google can index data encoded in KML), I thought I’d have a play around with KML overlays in Google Maps. KML is used mainly to mark up overlays in Google Earth, but a subset of it is available for use in Google Maps.

The title of this post is a little misleading — show me anything you can do in Google Maps in two minutes and I’ll buy you a bun. By the time you’ve worked out the longitude and latitude references for your map and its placemarks you’ve probably lost a couple of hours at least but we’ll brush over that for now.

However, using KML overlays for maps can save you a bit of time fiddling around with the API when creating your markers and setting the event listeners and the like. Encode your data in a KML file, point your maps script at it and much of the work is done. It’s not quite as flexible as using the API, but for a basic map it will save you some time. What’s more, you can use your KML file on the Google Maps site, export it for use in Google Earth and get your data indexed on Google.

I’ve created a basic example which plots three points of interest in Greenwich, London. The references may not be very accurate but I don’t care, it’s a demonstration. First create your KML file. This is a XML file with a .kml extension:




A small map of Greenwich

A very basic map of Greenwich,
 SE10 made to demonstrate KML
overlays

 The National Maritime
Museum





]]-->








 -0.003747,51.481154,-1

Then create your Javascript file. Create an instance of GGeoXML and give it the location of your KML file. Then use the overlay method of GMap2 to overlay it on your map. Be warned that your KML files will be cached by Google Maps which can be a tad frustrating when you’re trying to debug your file. To avoid caching, add a query string parameter to your file name with a value of the date and time (this will change every second which should be enough for you). E.g.

url_end = "?nocache=" + (new Date()).valueOf();
myKML = "http://www.myserver.com/kml.file" + url_end
var map = new GMap2(document.getElementById("map"));
// Add controls

map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

geoxml = new GGeoXml(myKML);

map.addOverlay(geoxml);

That’s about it.

If you want to play with the code yourself, don’t forget you’ll need to substitute my maps API key for yours.

A couple of things to look out for

Make sure you keep the CDATA sections in the placemark description tag, otherwise you’ll need to escape your html with entities.

Don’t bother putting class names into the HTML in your KML file’s description tags as these will be stripped by Google Maps. Google Maps uses inline styles instead. Ouch. To get round this problem you can build some styles in your map page stylesheet. As a default Firefox will display the text of the name element of your placemark in bold, although Internet Explorer 7 won’t. I got round this problem thus:

#map div { font-weight:bold;}

#map #iwsw p { font-weight:normal !important;}

The iwsw id is what appears to be generated around your placemark window, so you can use this to cascade your styles down.

If you make a syntax error in your KML file, you won’t get any warnings — it just won’t display. It may be best to edit your file as .xml file in your editor of choice and then save it out as .kml.