Posted on

rgbaColorPicker now up on GitHub

Earlier this week I needed a color picker, but not just any color picker, I needed one with alpha level transparency support. After searching for a while and finding nothing I decided to create my own. Outside of just doing alpha it also supports colors names and converts colors using tinycolors.js.

Instead of going over the code like I usually do I decided just to put it up on github (rgbaColorPicker on GitHub), that way if anybody can make changes and they can be reintegrated into the master branch. There are some examples of the script up on this site, you can view them here:

You can use the rgbaColorPicker by including the require files (rgbacolorpicker.js and tinycolor-min.js) and either including the seperate stylesheet or adding the styles from it to your existing stylesheet. Then, create an input element and give it the class color picker, the script will do the rest.

As you select a color it will return the value to the input, either as the html color name, the the Hex value, or if there is an alpha as rgba.

This version is pretty basic, but future plans include making it only require a single fine, and giving more options, any suggestion can be posted here, or you can fork the github project and add them yourself and I’ll integrate them if you’d like. For those not interested in the whole github thing, you can get a direct download of the script GitHub rgbaColorPicker Download page.

Posted on

Flexible site layout with resize detection

As phone sand tablets become more popular it’s becoming more common to see sites that can dynamically handle them, as well as notmal users, without having to load a special “mobile version”. There are several way to create such fluid sites, but today I’ll be talking about one I made not to long ago.

WordPress twentlyeleven, the new theme with wordpress 3.2, is a fluid width site, as you shrink your window the relative sizes get smaller, eventually breaking down into a single column site for mobile devices. They do this with CSS3 @media conditions, and while this is a perfectly usable method I found it left a little to be desired. First it bloats your stylesheet with all it’s extra group and if your using something that deletes comments, like the CSS color changer I posted last week, those group will get removed and the site will no longer be fluid (in fact it will probably be broken to boot). The second this I dislike about the @media method is the lag. Whenever  it changed between sizes the browser pauses for a moment while it figures everything out. I know this is probably a minor concern to most people but it annoyed me to no end, I wanted quick, fluid changes. For those reasons I wrote a short little jQuery javascript to do the dynamic changing.

Snipplr: http://snipplr.com/view/59044/flexible-site-layout-with-resize-detection/

The script adds a style to every element in the selector variable, which is anything that jQuery would understand as a selector (in the example it’s several different divs separated by commas, but I’ve done it with various other selectors). The classes that are added, as well as the sizes they are added at, are controlled by the if statement. In the example, the sizes “tiny_screen”, “small_screen”, “medium_screen”, and “large_screen” where added if the window was under 320px, between 321px and 768px, between 769px and 1024px, and anything larget that 1024px respectively. Those sized are all easily changeable (reducible or expandable if you want more or less steps). Using an if statement to control the sizes isn’t the most efficient way sure, but if your under 5 size options it’s just as fact as any other method, possible even faster if your number of levels is low. That said, if anybody wants to use more and notices it being problematic let me know and I’ll remake it using another method.

Settings up default styles, for those people without javascript enabled, can be done in two ways. First is to use the cascade effect of stylesheets, so say if one of your elements is the #main tag, you can give the normal #main the styles you want, like width:800px;, then give #main.small_screen a different style, the one you want on a small screen, say width:400px. Because #main.small_screen is more detailed that #main, it’s rules will override #main’s rules and it’ll give you the smaller, updated width. This methods does have the disadvantage of making some thing more difficult to adjust in the style sheet later (because you have to hunt it down and look between them all). I suggest simply giving those items a default class. I figure most people with javascript turned off are using medium screens, so in that case my html code would include both an id of main and a class of medium_screen, the script will adjust that ass soon as the page loads if it’s bigger or smaller assuming it can run and if not they should be able to use the site just fine.

I’ve got an example of this right on the resizer example page  so you can see it in action. If you have any questions/comments/criticisms post them below, as well as if you use this in a project or improve upon it and I’ll update with that information included as well.

Posted on

Working with the Google Maps API (v2/v3)

Update: The javascript version in the post no longer works due to a change on googles side, I’ve created a new version, that also includes multiple points and styling the map, please check that post here:

The new google maps API is a great improvement over some earlier versions, and the documentation explains all the new options in great detail (usually with examples) but tends to be a bit overkill if your only trying to get a simple map of a location output. After wading through it and finding all the options I needed I decided to make a post with a more streamlined approach to getting maps on your site. First you have to decided what type of map your going for, the original static image maps (that haven’t changed in quite a while) or the new javascript interactive maps. For simplicity I’ll talk about the static maps first.

The static maps are generated via a simple URL you place in an img elements src tag. Heres how the url’s are formatted:

http://maps.googleapis.com/maps/api/staticmap?zoom=zoom&size=widthxheight&maptype=type&markers=address&sensor=sensor
zoom: The zoom level of the map, from 0-22;
width: Image width in pixels;
height: Image height in pixels;
type: The type of map, either roadmap (default), satellite, terrain, or hybrid.
address: The address point centered and marked.
sensor: determins if the API will use ny sensor input data, not used for these examples.

Using that format you can get a final URL that looks like this:
http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=400x300&maptype=road&markers=219+4th+Ave+N,+Seattle,+WA+98109&sensor=false

Those are just the basics needed to get a map out, there are a ton more options from multiple markers with custom icons, to paths and polygon areas. If anybody is interested I’ll make a post about them as well, but it seems that simple maps are used for more often. You can check out the full documentation at the Google Static Maps API Documentation Page. I have an example of the different levels of zoom on my Google Maps API example page as well, depending on what your doing you can change the zoom level to whatever you want, but I think 14 works best for single point location maps.

Now that the static maps are out of the way it’s time to talk about the interactive maps. Naturally there a bit more complex but there still incredibly simple. First, we need to get an API key as the one used in the examples will only work at this domain. You can get your API at the Google Maps API Key SignUp Page. Once you have that we need to include the API script:

Snipplr: http://snipplr.com/view/57428/google-maps-api3-made-simple/

Simply swap out your API key for mine. Once again the sensor is for telling the API if it needs to load location data, and we won’t be using it for this example. I also use jquery for the example, but it’s simple enough to not use it in lieu or traditional javascript or another library. After thats out of the way we can start on the scripting. Unlike the static maps API we can’t just plug an address directly in, we need to use the geocaching API first to get the lat/long of the location. This is probably a good time to mention that the geocaching API results differ from the normal google map search results, and terms that may work in the google search and pull a good address may not return anything from the geocacher. It’s best to use a actual address as it seems to have no problem getting those right. Anyway with that in mind where is the javascript:

Snipplr: http://snipplr.com/view/57428/google-maps-api3-made-simple/

The first part of that should be self explanatory, it runs the maps initialize() function once the document loads. The functions declares a few variables right off the bat, lat/lng ia needed so we can store the latitude and longitude somewhere. The address is encoded before transmission to prevent any potential problems on that front. Then we use $.getJSON() to get the information needed from the geocaching API. remember to change the key out with the one you got earlier at the top of this post. The the callback function prevents the Allow-Access-Control problem that cross domain calls can generate, and rest of the request URL is normal (were not using the sensor, we need json back). After we get the results from the JSON request to drive down through the object till we get to the variables we want (the latitude and longitude, which seems backwards to me).

Then we declare an options object, this is really for simplicity (and because it’s how google demos the API in their documentation), In the example were starting at zoom level 14, with a center at the address we got earlier. Not that you can’t just give it lat/long, you have to declare a new google.maps.LatLng for the script to use. The final option is the mayTypeId, again in this case its a roadmap. This time however the options for that are roadmap, satellite, hybrid, and terrain.

Then all we have to do is declare a new map object on an element ID. The element should be a div, and the dimensions you give it will be the dimensions of the map, in the case of the example, I used this:

Snipplr: http://snipplr.com/view/57428/google-maps-api3-made-simple/

Once we’ve done that we should have a map up and running, draggable and zoomable. But a map is only so useful without a point of reference. That is where the last little bit of code comes in. We have to declare one last thing, a new google.maps.Marker object. In this case we reuse the lat/lng from the maps center point, and attach it to the proper map. Since we called out map “map” (when we created the new map object on your div) it’s simple map : map and were done, obviously you’ll want to be a little more creative if your using more than one map per page.

There a lot more this API can do, you can read it all at the Google Maps Javascript API V3 Documentation Page. If anybody wants something else demoed I can easily add it to the post. I also have an example over at the Google Maps API example page as well. The Google maps API is incredibly versatile and can seemingly do anything you want with a little reading. I also looked into the Bing maps API, it seems just as versatile aut not as easy to implement. Also the UI was pretty tacky (but perhaps I was looking at an older version). Comments, Questions, Criticisms, Concerns, post ’em in the comments below.