Posts Tagged ‘javascript’

Google Maps V3 GeoCoding Example

July 24, 2011

Today I was working on a real estate search wrapper idea and trying to integrate Google Maps. I wanted to use there Javascript API for mapping but needing to translate the addresses to longitude and latitude aka GeoCoding. Turns out Google of course has an API for this but I didn’t find a straight forward example right away so I figured I would post one. Minor disclaimer on this, its the SIMPLEST possible example to just take one address and turn it into a longitude and latitude (visit here if you need more info on the API). Hopefully this is helpful to folks.

Script Include

Before using the below code you’ll want to add a script include within the head element of your HTML page first.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

The Code

 

1:  var geocoder = new google.maps.Geocoder();  
2:  var results = geocoder.geocode(  
3:    {  
4:      address: "Duke University Durham, NC 27708"  
5:    },   
6:    function callback(results){  
7:      alert(results[0].geometry.location);  
8:    }  
9:  );  
Advertisements

WYSIWYG Needs Help

April 3, 2010

WYSIWYG editors (what you see is what you get) have always bothered me a little bit because what you see isn’t always what you get. Because you’re not seeing the content within the context of you entire page theme (in most cases), you could see differences in line wrapping due to page width, styling, and other minor issues. The biggest issue though is that you simply don’t see how your content looks with the rest of the page content.

I have found a pattern to fit this though! I’ll call it the “active preview” pattern in honor of the WordPress plugin I just created with this pattern. Basically you enable a preview window to be opened up and hook it up to receive updates from the WYSIWYG editor (or just text area). That way you can view your changes as you make them without having to hit the preview button each time you make a change and want to see if it fits. In its simplest form it would just be pure javascript (which I’ll show below). But if you needed to pass the text through some back-end processing first to do something like render some business specific tagging or something else you could expand this to some Comet work (maybe you could pull it off with just plain old AJAX though).

Here is how it would look roughly in javascript using jQuery and a tinyMCE WYSIWYG editor

//Hook into your preview button or link's onclick.
var activelink = jQuery('#yourpreivewbuttonorlinkselector');
activelink.click(function (e) {
e.preventDefault();
//Open up the window but keep a reference in the windows DOM.
window.communicator = window.open(this.href,'activepreview','menubar=yes,scrollbars=yes,copyhistory=yes,resizable=yes');
//We need to hook into onKeyUp to catch key strokes.
//If your not using tinyMCE change this to hook into the input in question.
tinyMCE.activeEditor.onKeyUp.add(function (ed, l) {
var jcommunicator = jQuery(window.communicator.document);
var post = jcommunicator.find('selector to get the content area changing');
//Update the content area on the preview page with the data entered into the editor.
post.html(ed.getBody().innerHTML);
});
return false;
});

This pattern works pretty well hopefully you can see how this would change if you weren’t using tinyMCE.

There are two scenarios where this isn’t going to work (at least without some more work)…

  • When content has to be sent through some processing before being displayed on the page. ¬†With some more work on the server side you could work through this issue though.
  • When you cannot reliably identify the area on the rendered page that is being changed.

In the right situation this solution provides a true WYSIWYG experience for users.

Trading Clicks for Keystrokes

March 22, 2010

There is a saying out there which goes something like ‘Reducing the amount of clicks to do an action is good’. I know that’s a gross paraphrase and I’m sure you could find exceptions to the rule, but generally I prescribe to this idea of reducing clicks. In many cases though there is only so much click reduction you can do. An alternative to think about though when you think you have reached your limit on reducing clicks is to explorer some non-standard browser functionality with hooking into keystroke events.

Providing short cuts to search functionality, help functionality, or maybe an ‘alt+tab’ type functionality to allow the user to shift through the previously visited pages, are all interesting ways to integrate keystroke events into a webapp. In then end most of the integrations of the keystrokes will GREATLY very from application to application. So I’ll show you a quick sample of hooking in with jQuery and then let your mind run free.

Here is an example of listening for a user who hits ‘Ctrl’ and ‘F’ at the same time (or in sequence) using jQuery. I wanted to make sure to provide something to used a two key combination because you probably don’t want a user to accidentally type ‘F’ and cause an action or interface to popup.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js&#8221; type=”text/javascript”/>
<script>
var wasControlPressed = false;
$(document).ready(function(){
$(window).keydown(function (event) {
if(event.keyCode == 17) {
wasControlPressed = true;
} else {
if(event.keyCode == 70 && wasControlPressed) {
//Allow this path if ctrl was pressed.
alert(‘This sequence was met’);
} else {
//Reset because the sequence wasn’t met.
wasControlPressed = false;
}
}
});
});
</script>

I only tested this in Chrome and Firefox. I presume jQuery will take care of IE as well. Entirely probable that you’ll need to worry about ‘charCode’ there instead of ‘keyCode’ if jQuery doesn’t take care of it for you.¬† Here is a good site in case you need details on that http://www.quirksmode.org/js/keys.html.