Lateral Code » html

Working with Addresses? Use the new Google Maps API!

Karthik Viswanathan — Mon, 12 Jul 2010 23:10:25 +0000

Would you like to travel to Paris? Maybe Singapore? How about Hawaii? Many people love to travel to discover new places, meet family, or just have a great time. In order to get from place to place, they often use maps. Indeed, maps are a vital part of traveling, providing directions to new, exciting locations.

With the new technology age, maps have moved from tangible paper to the virtual world, allowing anyone to access them with a simple visit to Google Maps. More importantly, with the new Google Maps API Version 3, it’s simple to integrate these maps into any website.

In the following article, I’ll be explaining how to get started with the new API and embrace the technology from the folks at Google.

Focus

We’re going to focus on creating a static map, which is just an image of a location. This is in contrast to a dynamic map, which enables the user to move and zoom. In a follow-up article, which will be posted later this week, we’ll tackle a dynamic map using JavaScript.

Static Map

The static map only requires an image tag and a few configuration options:

It looks a bit daunting at first, but, when broken down, it’s much easier to understand. Note that all the magic happens in the src attribute:

http://maps.google.com/maps/api/staticmap? – the base URL which we pass configuration options to.
center=Chicago,IL – the center of the map, which, in this case, is Chicago, Illinois. Note that this can be any address.
zoom=8 – the amount to zoom in. This value was determined purely by experimentation.
size=512x512 – the size of the map in pixels. In this case, it’s 512px by 512px.
maptype=roadmap – the type of the map. Possible values are roadmap, terrain, satellite, and hybrid.
sensor=false – tells Google Maps whether we are trying to sense the user’s location. In this case, we aren’t.

The above code produces the following image:

We can play around with the options a bit to produce a much different map:

These new configuration options yield the following map:

When creating maps, it’s also necessary to mark important locations, whether they be destinations or areas to avoid. To do so, we can use the markers parameter:

Notice the new parameter:

markers=Chicago,IL

This will create the following marked map:

We can add in more configuration options to the marker parameter, including a color and a label. For example:

markers=color:blue|Chicago,IL

Notice the pipe operator (|) which separates the color from the location. This change will edit the marker color, yielding the following map:

As you can see, the blue marker still has a dot representing the location. When working with multiple locations, you might want to change this dot to a number or letter in order to differentiate between locations:

markers=color:blue|label:A|Chicago,IL

Instead of the dot, the image now has the letter A:

To add multiple markers, just add in another markers parameter:

Now there are two markers: one for Chicago, Illinois and another for Hammond, Indiana:

This is accomplished using the following marker code:

markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN

Finally, when specifying the markers attribute, note that the center and zoom parameters are no longer required. If we omit these, we get the following code:

And the corresponding map:

As shown in the image, Google Maps will automatically use a fitting center and zoom in order to display the two locations.

Conclusion

As you can see, we’ve created multiple static maps all through the new Google Maps API. With no needed API key (which was previously required) and some simple URL manipulation, Google makes it near effortless to integrate a map into any website.

Are you interested in the Google Maps API? Do you have any questions or comments? Did you stumble upon more useful features for static maps? Leave a comment below and a share your thoughts!

Don’t forget that we’ll be creating dynamic maps with the JavaScript API later this week!

Adding Tooltips to Option Tags

Karthik Viswanathan — Thu, 19 Mar 2009 12:00:20 +0000

A short while back, Abhilash SR commented on our poll with a question that he had:

Is there any way to show the select box text as [a] tool tip when user moves the mouse down the list?

In other words, Abhilash would like to know whether it’s possible to add tooltips to option tags. Luckily, the answer is yes!

Title Attribute

There are many complicated ways of adding tooltips to the option tag, but the simplest one is accomplished by using the title attribute.

Why do I recommend using the title attribute?

It is supported by Internet Explorer.
No JavaScript or CSS is required!
It only needs a short amount of code.

Thus, adding a tooltip is as easy as:

Automating the Process

But, we at Lateral Code want to make this a bit more interesting. In Abhilash’s case, the text that is inside the option tag is exactly what should be used as the tooltip.

As many of us don’t like to waste time copy-pasting this text into the title attribute, why don’t we write a script to do it for us?

Let’s use jQuery to make this very straightforward. Our JavaScript will go through each select element. It will add a title attribute to every option tag inside the given element.

Our algorithm is as follows:

Find the total number of option tags to loop through.
Loop through each tag.
Set the title attribute of the tag to it’s inner HTML.

This yields:

var total = $('select option').length;
var cur;
for ( var i = 0; i < total; i++ )
{
	cur = $('select option:eq(' + i + ')');
	cur.attr( 'title', cur.html() );
}

Remember to import jQuery:

Good luck!

Placing Links In Images

Karthik Viswanathan — Fri, 30 Jan 2009 04:53:36 +0000

Many of us love to use vivid, clean images to enhance a website design. Unfortunately, it may be necessary to embed links into such an image, which can be a hassle.

In this article, we will present a quick and easy way to add links to your images using a small amount of HTML markup and CSS.

To begin, we must initialize our HTML. For this example, we will use the logo presented by Patrick Lin in his previous article:

It contains the following HTML:


	Sample Logo

and CSS:

#logo {
    background: url(path_to_banner.jpg);
    width: 718px;
    height: 66px;
    padding-left: 62px;
    padding-top: 34px;
}

#logo:hover {
    background-position: 0 -100px;
}

#logo h1 a span {
    display: none;
}

Notice that Patrick uses a span element to mask the text that would normally appear. This method is vital in order to place a well-positioned link in the image.

To begin, let’s add properties to the link element inside the #logo div:

#logo h1 a {
    display: block;
}

This line is key for our link. By displaying the link element as a block, we are able to give it a width and height. Note that by doing so, it is possible to place this link in an area that covers the sample text in our logo.

Next we need to add some dimensions:

#logo h1 a {
    display: block;
    width: 172px;
    height: 44px;
}

Using this width and height, we are able to make the link reside in the correct area for our logo image.

Now that the basics have been presented, let’s move on to one main exception: Internet Explorer.

If you place two or more of these block links on the same image, IE7 and below seem to remove the link attribute. This has been the case with our RSS link in the logo image.

To solve this problem, we have noticed a peculiar case. If we place a background color or image for the link, it seems to work fine. For example:

#logo h1 a {
    display:block;
    width:172px;
    height:44px;
    background: #fff;
}

With two block links or more, the above code solves the problem. Unfortunately, having a white background completely hides the actual RSS image. The trick is to use opacity. By setting the opacity to 0, we are able to remove the background color but still maintain the link:

#logo h1 a {
    display: block;
    width: 172px;
    height: 44px;
    background: #fff;
    filter: alpha(opacity = 0);
}

The opacity for IE is defined in an odd fashion that causes the CSS not to validate.

By placing the last line of code in an ie-only css file, you can still maintain valid CSS in your template.

Creating Clever Logo Banners

Patrick Lin — Tue, 27 Jan 2009 07:04:24 +0000

Good designs are always clever. They need something to help them stand out from the rest. Here’s how to create a clever logo banner that looks good and is SEO Friendly, like the one Lateral Code uses, using an image and some clever CSS.

The first step is to create the banner. For demonstration purposes, the following banner will be used:

This is the markup involved:



	Sample Logo

with the following CSS:


#logo {
    background:url(path_to_banner.jpg);
    width:780px;
    height:100px;
}

That part is easy enough. The next step is a little bit of clever CSS and some measurements.

In this example, the Logo runs from 62px to 234px horizontally, and 34px to 78px vertically, or 172x44px, so we add the following CSS:


#logo h1 a {
    display:block;
    width:172px;
    height:44px;
}

And to position it, we add to #logo:


#logo {
    background:url(path_to_banner.jpg);
    width:718px;
    height:66px;
    padding-left:62px;
    padding-top:34px;
}

Notice that I have shrunk the width and the height. This is because of how the CSS Box Model works – the actual width is the specified width added to the padding.

Now we are stuck with a problem: the text from the HTML overlays the text in the image, making it look unappealing. The reason we wrap the text in a span is so we can hide it, like so:


#logo h1 a span {
    display:none;
}

And it looks great.

As a bonus tip, you can increase interactivity by having the image show a friendly tip on hover – which, unfortunately, does not work in Internet Explorer 6.

We do this using a technique known as CSS Spriting – putting two images in one and only displaying part of it at a time. Here, I duplicate the image vertically and put an extra tidbit on the second one.

Because we set #logo to a specified height, the part below what we want to show gets hidden. Then we add the hover effect:


#logo:hover {
    background-position:0 -100px;
}

Then, when the user hovers over logo, it shifts the background position and shows the second image, that has the tip.

So the final CSS is:


#logo {
    background:url(path_to_banner.jpg);
    width:718px;
    height:66px;
    padding-left:62px;
    padding-top:34px;
}
#logo:hover {
    background-position:0 -100px;
}
#logo h1 a {
    display:block;
    width:172px;
    height:44px;
}
#logo h1 a span {
    display:none;
}

To create the effect.

Of course, to make it work in Internet Explorer 6, it is possible to use jQuery to add the hover effect that CSS isn’t able to:


$(function() {
    $("#logo").hover(function() {
        $(this).css("backgroundPosition", "0 -100px");
    },
    function() {
        $(this).css("backgroundPosition","0 0");
    });
});

And there you have it.

5 Simple CSS Tricks

Karthik Viswanathan — Sat, 24 Jan 2009 07:19:47 +0000

CSS can be the key to make or break a site design. To enable you to create and edit your own template, we have decided to present 5 Simple CSS tricks. Please feel free to directly use the code shown here in your own site.

Reset Values
Many web browsers have default CSS settings for HTML elements. Unfortunately, these settings differ across each browser. In order to maintain a similar look of your site in multiple browsers, resetting these values is a must. Here is a quick reset snippet commonly used:
```
* {
     margin: 0;
     padding: 0;
}
```
For more in-depth and thorough code, you may visit CSS Tools.
CSS Hover Pseudo Class
Creating nice hover effects can greatly help out your visitors. Many websites create a basic effect that changes the text color, border, or background when the mouse hovers over a link. This enables visitors to easily identify these elements and follow them to access your content.
```
a:hover {
     border-bottom: 1px solid black;
}
```
This sample piece of code adds a 1 pixel wide bottom border when the user hovers over a link.

Many web designers only use the hover pseudo class while dealing with links. Note that it can be used much more often. For example:
```
input {
     background-color: #e7e7e7;
}

input:hover {
     background-color: #fff;
}
```
This changes the background of a hovered input box to signify that the user may type in it.
Image Display
Search engines are only able to understand the words that you place into your HTML markup. Flash content or images are not directly identifiable.

A problem may arise when you create a logo image. If you want to have actual words on the logo image (as we have done in our site’s logo), you are not expressing this content to the search engines. For example, let’s say you wanted to integrate your logo image:
```
#logo {
     width: 960px;
     height: 150px;
     background: #fff url(your-image-name.jpg) no-repeat;
}
```
As you can see, there is no content in your logo div. Search engines will not be able to understand any text placed in your image. This is where an easy CSS trick comes in handy.

Let’s say that you placed your site’s name, which we will represent with “Site Name”, directly into your image. It is possible to do the following:
```
#logo {
     width: 960px;
     height: 150px;
     background: #fff url(your-image-name.jpg) no-repeat;
}

#logo h1 {
     display: none;
}


     Site Name
```
By adding this invisible text, the search engine is able to see the words you placed on your logo without them actually appearing on your site twice.
Fixed Width Wrapper
Many sites use a fixed width design. The common values for such a design are 780px and 960px.

Some web designers make the mistake of restating this width every time they create a new element. For example:
```
#logo {
     width: 960px;
     height: 150px;
     margin: 0 auto;
     background: #fff url(some-image.jpg) no-repeat;
}

#menu {
     width: 960px;
     height: 50px;
     margin: 0 auto;
}

#content {
     width: 960px;
     margin: 0 auto;
     background: #fff;
}
```
Definitions can easily become messy and out of shape when creating a fixed width design like this. A simple way to combat this problem is by creating a wrapper div that contains all other elements:
```
#wrapper {
     width: 960px;
     margin: 0 auto;
}

#logo {
     height: 150px;
     background: #fff url(some-image.jpg) no-repeat;
}

#menu {
     height: 50px;
}

#content {
     background: #fff;
}
```
This produces clean, efficient code that takes advantage of the CSS cascading property.
Vertical Alignment
Many beginning CSS users have trouble making an element vertically aligned in a container. For example, given the following HTML and CSS:
```
#logo {
     width: 960px;
     height: 150px;
}


     Site Name
```
A vertical alignment can be created using absolute positioning. By giving the logo a position style of relative, the header can be placed in the dead center of the container”
```
#logo {
     position: relative;
     width: 960px;
     height: 150px;
}

#logo h1 {
     position: absolute;
     top: 50%;
}


     Site Name
```
And that is all there is to it. The text is now vertically aligned. To make it centered horizontally, add the following line to the #logo h1 definition:
```
left: 50%;
```

Happy Coding!

Building a contact form with HTML and PHP

Patrick Lin — Mon, 19 Jan 2009 08:19:26 +0000

A while back, my colleague Karthik posted a CSS styled form. This time, I am going to show how to build the backend of an HTML form using PHP.

To begin with, you can take the code from Karthik’s example and paste it into a file called ‘contact.php’ or a name of your own choosing.




	
	Form Styling!



	Input Form
	
		First Name: 
		
		Last Name: 

		
		E-mail: 
		
		Message:

Of course, Karthik’s form doesn’t supply a method or action, as it is just an example. Let’s add that in. For this example, we will have the method be POST, because it can handle longer messages, and have the action be blank, meaning it will call the same page.

So, let’s put some PHP into it before the Doctype.

What this does is fetch the values posted by the form if it exists, otherwise sets the variable to empty. If the variable has not been set, and we try to assign it to a variable, PHP might choke on it, so we should check before we assign just in case. The next step is to check if the person has submitted the form, or if they’ve only opened the page. If the person has submitted the form but has left certain fields, we’ll want to tell him/her. Now we’ll add a piece of PHP between the body tag and the form tag.


\n";
	if (empty($first_name)) echo "First name not entered\n";
	if (empty($last_name)) echo "Last name not entered\n";
	if (empty($e_mail) || !is_valid_email($email)) echo "Email adress not entered\n";
	if (empty($text)) echo "No message entered\n";
	echo "\n";
} elseif (isset($_POST['email'])) {
	$content = "$first_name $last_name ($ip) write:\n\n$text";
	$sent = mail("example@example.org", "Message from Mars", $content, "From: $e_mail");
	if ($sent) {
		echo "\n";
		echo "Your message has been sent\n";
		echo "\n";
	} else {
		echo "\n";
		echo "Your message could not be sent at this time. Please try again later.\n";
		echo "\n";
	}
}
?>

What this does is first check if the form has been submitted (if it has been submitted, all the variables will be set, so we can just check for one of them) and if it has, if it’s missing any one of the fields, then it will throw out an error message with a list of missing parts. You can style this how you like.

The next part checks that the form has been submitted, and since it passed the first test, everything has been filled in, so it sends an email off. The PHP mail() function takes arguments in the order: send-to address, subject, content, other headers and returns whether or not the message was sent. In the other headers, we specify the From address. Replace the email address with the one you want the emails sent to and the subject to your preferred subject. We then output a message telling the user if the message was sent.

Since the PHP segments only write out if the form has been submitted, only the form is shown. However, what if the person wrote a beautiful 5-page essay and put it in, but forgot to put in his name? Then his entire message will be gone! We can rectify this by echoing the posted variables into the form. If nothing’s been submitted, the variables will be empty and he won’t know any better. If it’s been submitted, the filled in elements will be retained.


	
		First Name: 
		
		Last Name: 
		
		E-mail: 
		
		Message: 
		<php echo $text; ?>

So, the final product:






	
	Form Styling!


\n";
	if (empty($first_name)) echo "First name not entered\n";
	if (empty($last_name)) echo "Last name not entered\n";
	if (empty($e_mail) || !is_valid_email($email)) echo "Email adress not entered\n";
	if (empty($text)) echo "No message entered\n";
	echo "\n";
} elseif (isset($_POST['email'])) {
	$content = "$first_name $last_name ($ip) writes:\n\n$text";
	$sent = mail("example@example.org", "Message from Mars", $content, "From: $e_mail");
	if ($sent) {
		echo "\n";
		echo "Your message has been sent\n";
		echo "\n";
	} else {
		echo "\n";
		echo "Your message could not be sent at this time. Please try again later.\n";
		echo "\n";
	}
}
?>
	Input Form
	
		First Name: 
		
		Last Name: 
		
		E-mail: 
		
		Message: 
		<php echo $text; ?>

And that’s it. Have fun.

Lateral Code » html

Working with Addresses? Use the new Google Maps API!

Focus

Static Map

Conclusion

Adding Tooltips to Option Tags

Title Attribute

Automating the Process

Placing Links In Images

Sample Logo

Creating Clever Logo Banners

Sample Logo

5 Simple CSS Tricks

Site Name

Site Name

Site Name

Building a contact form with HTML and PHP

Input Form

Input Form