A moan, a groan, my life story and how me, a technically minded person just can't seem to fit in with anybody.

Archive for the 'JavaScript' Category

Google Maps API Javascript V3 – Place Km/Mile radius/circle around point

So Google has released V3 of their Google Maps API and it appears that they have stripped out a number of useful functions that I’ve found myself using in V2. Apparently these functions have been stripped out to make a more lightweight and compact API for better performance for mobile devices. This is great but now you have to write your own function that Google has taken out.

So would you like to draw a radius around on a point on a Google map? Well I do and I managed it in the V2 API using a Google function called distanceFrom() and some custom code but now that function has been stripped out in v3. Anyway I’ve rewritten my code to do this in the V3 API. Take a look:

This requires the Google Maps API and also the latlong JS script from Movable Type. To use simply call the function drawCircle() sending your Google longitude and latitude cords and the mile radius. If you want to use Km then comment out or delete the bit of code highlighted.

Oh and you can send some other variables too if you don’t like the default colours and settings.

Example usage:

Javascript Same Height Div’s Update

A while back I posted a way of making same height div’s but came across an issue when padding was involved. Well I’ve modified my code to take into account padding. Now the obvious thing to do would be to be to check padding on a div and subtract it from the height, but it’s not that easy. You would have to check three things: padding, paddingTop and paddingBottom. For some reason when I was checking padding I couldn’t get a value from JavaScript, this had me really stumped but after a nights sleep I came up with a better and more simpler way of sorting the padding issue. This is to let the code run and let it re-height the div’s and let the padding mess things up then run the same thing again and check for height differences from last time we checked. Oooohhh look the height has gone up 10px from last time thanks to a padding of 5px on the div. Now we know there is 10px of padding lets remove it. Sorted!

JavaScript Code:
function sameHeight(divs) // Bring in an array of your divs
var highest = 0;
var heighttu = 0;
for(i = 0; i < divs.length; i++) // Loop through the divs { // Check to see if this div is the highest? if(document.getElementById(divs[i]).offsetHeight > highest)
// Yes its the highest so set the highest value to this div’s height
highest = document.getElementById(divs[i]).offsetHeight;
// Loop through divs and set their hieght all the same
for(i = 0; i < divs.length; i++) { document.getElementById(divs[i]).style.height = highest+"px"; } // now get offset hieght again and we may found we have gone higher this is because of padding if(document.getElementById(divs[0]).offsetHeight > highest)
// correct the height
highest = highest – (document.getElementById(divs[0]).offsetHeight – highest);
// Correct divs
for(i = 0; i < divs.length; i++) { document.getElementById(divs[i]).style.height = highest+”px”; } } }[/js]

Javascript Same Height Div’s

Recently I had to make some divs the same height. Usually I would just pad the bottom of a div with page breaks but I couldn’t do that this time round as the page content is dynamic and the height of the divs could change.

First thing I did was look online for answers and sure enough there were solutions but looking at them they seemed over complicated so I decided to write my own solution.

Javascript Code:

Update at:

Simply pass an array of your divs to the function. Easy peasy….

Just an extra word of warning… Be aware of using padding on the blocks you pass to this function. If the paddings are different in each block then they may not end up being the same height. Although you could modify the function to check for the use of padding and alter the heights accordingly.