In this article I’m going to give you a very short overview of the three technologies, to help you know the difference.
CSS3
CSS—or cascading stylesheets—is a specification under development. Many features are already supported by modern browsers such as Safari, Firefox, and Chrome (and soon to come: IE9). Let’s have a glance at the W3C’s (those guys who work on developing standards) description of what CSS is:
“CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts.”
Okay, so it’s got something to do with layout. What can you do with CSS? Well, you can style HTML elements. You can animate them. It’s awesome. But it’s not HTML5! I feel tempted to, once again, quote W3C:
“The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.”
For me, that settles it. In case it doesn’t for you, separation is the keyword here. We’re separating structure (HTML) from presentation (CSS). Structure. And presentation. Not the same. But equally important.
Even though CSS3 is not HTML5, it doesn’t mean that it isn’t cool. You can do all sorts of amazing stuff with CSS3. So many people have created lists of stunning CSS3 effects, and I’m not going to attempt to do it over again, ’cause they’re all really good.
To learn more about CSS3 and what it does, check out CSS3.info.
JavaScript Frameworks
JavaScript frameworks/libraries/whatever are might popular these days. With relatively few lines of code it’s possible to do Ajax interactions, animations, and a bunch of other stuff. Popular frameworks include jQuery, Prototype, and MooTools—and they all share the same thing: it’s JavaScript. And JavaScript is not HTML5.
You can use JavaScript to enable HTML5 elements in older browsers (check out Modernizr), or you can use it to develop incredible web applications. JavaScript is amazing. Being able to do modifications on a website without reloading it is great. But it isn’t HTML5.
HTML5
“HTML is the language for describing the structure of Web pages.”
Yeah, I’m quoting W3C again. HTML5 is an emerging standard to take over HTML 4 and XHTML 1.1. With focus on structural elements and web application features, HTML5 really is going to be the next big thing. Recently, Apple launched their “HTML5” showcase. What’s funny is, that most examples are actually showcasing CSS3 and JavaScript. And as you all might remember—neither CSS3 nor JavaScript is HTML5.
It seems that HTML5 is becoming the generic term for “cool stuff you can do on the Internet”. I feel sorry for HTML5. It deserves to be recognized for what it is, and what it’s good at. As do CSS3. As do JavaScript. This confusion of concept isn’t doing good for anyone. Few years from now I fear my clients saying: “The design is a little bit boring. Maybe if you add some HTML5 effects…”.
So please, help spread the word: CSS3 is not HTML5. Neither is JavaScript.
Related posts:
]]>Inspiration
Fonts
As you can see in many of the designs above, calligraphic fonts are often used in wedding invitations. Be careful when choosing your font—your want your guest to be able to read the text. There’s no reason not to mix font. For instance, you can use a calligraphic font for your names and a serif font for the rest of the text. The possibilities are endless. Here are some free fonts you can use in your wedding invitation designs.
Also, be sure to check out the ampersand in Baskerville Italic (which you probably have on your computer).
Brushes and Patterns
Ornaments and florals are often seen in wedding invitations. Here are some Photoshop brushes and patterns to use in your designs.
I hope you enjoyed the post, and found some great inspiration and resources for your wedding invitation project. Be sure to post a link to your wedding invitation in the comments.
Related posts:
]]>First, check out the demo to see what we’re creating in the demo.
We’re going to start with an HTML5 document (why not?), and include a stylesheet, as shown below:
<h1>Messy List</h1> <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Messy List</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header> <h1>Messy List</h1> </header> <section> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Duis aute irure dolor in reprehenderit.</li> <li>Excepteur sint occaecat cupidatat.</li> <li>Ut enim ad minim veniam.</li> </ul> </section> <footer> <p>Copyright © 2010</p> </footer> </body> </html>
That’s a pretty simple HTML document—and of course the most important part is the list. Next, here’s the stylesheet (with an HTML5 CSS reset in it as well). You can get the background from SeamlessTextures. I’ve modified it in color and size, so you can also just get my version.
/* HTML 5 Reset */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } body { line-height: 1; } table { border-collapse: collapse; border-spacing: 0; } section, article, aside, header, footer, nav, dialog, figure { display:block; } body { background: url(background.png); width:600px; margin: 40px auto 0; font-family: Georgia, serif; color: #333333; } h1 { font-size: 3em; margin-bottom:1em; } ul { list-style: none; } ul li { padding: 8px 15px; margin: 10px 0; } ul li:nth-child(odd) { background: rgba(50,50,50,0.1); } ul li:nth-child(odd):hover { background: rgba(50,50,50,0.3); } ul li:nth-child(even) { background: rgba(50,50,50,0.3); } ul li:nth-child(even):hover { background: rgba(50,50,50,0.5); } ul li:nth-child(3n+1) { -webkit-transform:rotate(-0.6deg); -moz-transform:rotate(-0.6deg); transform:rotate(-0.6deg); } ul li:nth-child(3n+2) { -webkit-transform:rotate(0.5deg); -moz-transform:rotate(0.5deg); transform:rotate(0.5deg); } ul li:nth-child(3n+3) { -webkit-transform:rotate(0.2deg); -moz-transform:rotate(0.2deg); transform:rotate(0.2deg); }
I guess there’s not much new for you here, but let’s break it down a bit anyway. First, we define the width of our body to be 600px. Also, we include the aforementioned background, specify font and color, and add a top margin. Next, we define the size of our H1. And now comes the fun part.
We remove the dots from our list with list-style: none;, and add a little padding to our list elements. We’ll look at the nth-child selectors in bits. Check out the first one:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ul li:nth-child(odd) { background: rgba(50,50,50,0.1); } ul li:nth-child(odd):hover { background: rgba(50,50,50,0.3); } ul li:nth-child(even) { background: rgba(50,50,50,0.3); } ul li:nth-child(even):hover { background: rgba(50,50,50,0.5); } |
We choose every second li element, and add a background to it. In this case, we choose a dark gray, and set the opacity to 0.1 (RGBA is new in CSS3), so we can see the background through the li elements. We do exactly the same for our even elements, with the opacity set to 0.3. This is just basic zebra striping. You can add several selectors to an element, so we also add a hover background color a little darker than the original element.
Next, we target 3n+1—that is, every third element, starting with the first.
1 2 3 4 5 | ul li:nth-child(3n+1) { -webkit-transform:rotate(-0.6deg); -moz-transform:rotate(-0.6deg); transform:rotate(-0.6deg); } |
We rotate the list element by -0.6 degrees. We do the same thing for both 3n+2 (every third element, starting with the second) and 3n+3 (you get the idea). By rotating every third element, and doing zebra striping with every second element, the list seems sort of random, which, I think, is a really cool effect.
If you use Safari, Firefox or Chrome, this is what you should have:
UPDATE: You can target Opera with the following (thanks to ToMzorz):
1 | -o-transform:rotate(-0.6deg); |
You can also check out the demo again, or download the source code.
Thanks for reading.
Related posts:
]]>But should they be? This post is in not an answer, it is an introduction to discussion—and hopefully reflection.
So, which comment fields do we see in comment forms today?
Name
Name is pretty obvious. We need a name to know who writes the comment.
Is the e-mail field necessary? Well, many websites uses an e-mail field in the fight against spam. But is that really necessary? Most spam bots can figure out how to put an ‘@’ between two words in order to cheat. Still, it’s better to have a little security than none at all.
Website
In this field, the user can put the URL to their website—if they have one. Most people that visit my website don’t have a website—at least they don’t write the URL in the website field.
Comment
This field is of course obvious, as it is the comment itself.
So, these four fields are the basics of a standard comment form. But what could we else be needing? Let’s look at where we might be able to improve.
Headlines
Why not give your users the possibility to give their comment a headline? It, of course, depends on each website, but headlines can be a good way to summarize a comment, and help people find the comment they are looking for a lot faster.
Age
Depending on your site’s topic, age might be a good field to add. It might even replace the name field in case the site is based on the anonymity of the user.
Gender
Like with age, a site allowing you to be anonymous would be a good place to use a gender field in your comment section.
Social media
Social media is here to stay. Whether it’s Facebook, Twitter, Flickr, etc., social media connects people. And even though the primary function of a comment section on a website is not to connect people, I don’t see why we can’t add to social media by letting our users link to their social media accounts in a comment form.
Let your users write the URL to their Facebook account, their Flickr user name, their Last.fm account, whatever! Still, you shouldn’t let it get too clumsy by filling the comments up with way too much information. If there’s no need to let them write it, don’t give them the option.
If those reading the comment find one comment particularily interesting, it is very easy to get in touch with the person who wrote it, as the e-mail address isn’t public.
Category
You might want your users to give different categories of comments, such as review, support, criticism, etc. The comments can be styled in different colors or within tabs. A great example of this is The Idea Shower, as seen in the picture below.
Final Thoughts
Remember, before everything, that you shouldn’t add a field if there is no use for them. The most important part of the comment is the comment itself—don’t confuse your visitors with too much information; you still want your comments to be readable.
This was my thoughts about adding new fields to a comment form. What do you think? Do you think it should stay the way it is or should we take advantage of being able to make every comment form different? Please write you comment in the standard comment form below…
Related posts:
]]>But before that, here’s how it looks when it is done:
Because of the size at the page here the infobox gets a scroll bar, but just ensure to make your map large enough, then it will not happen.
Overview
What's New?
Since my last article a couple of new features have been added to the API, as you can also read about in the changelog. The most important, in my opinion, is of course the support of directions, and that's the only function I will discuss here. Worthy to note, though — you do not have to use an API code anymore.
The support for directions is possible via two new classes, DirectionsRenderer and DirectionsService. DirectionsRenderer… Well… Renders the directions, and DirectionsService computes the actual directions. But the big question is — how do we use them?
Corrections
Before we rush into the new code, we should make some corrections in our excisting code. If you haven't read my article Adding Custom Google Maps to Your Website, do yourself a favor and do so before continuing on this one.
Next, look in your code where you define your markers and ensure that your values follow these rules:
1 2 3 4 5 6 7 8 | var companyImage = new google.maps.MarkerImage(’images/logo.png’, new google.maps.Size(100,50), // (width, height) new google.maps.Point(0,0), new google.maps.Point(50,50) // (width/2, height) ); var companyShadow = new google.maps.MarkerImage(’images/logo_shadow.png’, new google.maps.Size(130,50), // (width, height) new google.maps.Point(0,0), new google.maps.Point(65,50) // (width/2, height) ); |
Dividing the image's width by 2 ensures that it's the bottom center point of the image that'll be used for the marker. Thanks to JM for this solution.
The Directions
So, first we have to call the DirectionsService constructor. Before your initialize(), create a new variable:
1 | var directionsService = new google.maps.DirectionsService(); |
Next, we have to create the renderer. Right before the variable you just created, define a new variable directionDisplay. This variable is going to contain the renderer.
1 | var directionDisplay; |
In your initialize() function, right after the latLng variable, set the directionDisplay variable to this:
1 | directionsDisplay = new google.maps.DirectionsRenderer(); |
Further down in your code, find the map variable (right after the settings variable. Write this:
1 | directionsDisplay.setMap(map); |
This renders the marker on the specified map, which in this case is map. Next, let's define what we want to write in our infobox by expanding the contentString variable:
1 2 3 4 5 6 7 8 9 10 11 12 | var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+ '<div id="bodyContent">'+ '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+ '<p>Find your way here from:</p>'+ '<form action="index.html" onsubmit="calcRoute();return false;">'+ '<input type="text" id="start" value="prinsensgade 5, 9000">'+ '<input type="submit" value="Find directions"></form>'+ '</div>'+ '</div>'; |
Let's look a bit into the form used to ask the user for an address:
1 2 3 | '<form action="index.html" onsubmit="calcRoute();return false;">'+ '<input type="text" id="start" value="prinsensgade 5, 9000">'+ '<input type="submit" value="Find directions"></form>'+ |
First, we write "index.html" in our action attribute. This path should be to the file where your map is placed. In onsubmit we call the function calcRoute() (which we will define later), and next we write return false to prevent the site from reloading when the user submits the form. The next two lines should be pretty self-explainable. If you want the user to be able to enter both addresses, you can just add an extra input field called end. The value of the start field can be empty or you can write a pre-defined address.
Calculating the Route
At the very end of the initialize() function, write the following:
In the form we called the function calcRoute(). That's the one we are defining here. The first thing to do is define the two variables start and end. If you inserted an extra input field before write document.getElementById("end").value; in end instead of the coordinates.
Next, define the variable request. The attributes of this one are fairly logical, but let's explain them just in case. We define the origin of the route to our variable start, and the destination to end. Also, we define a travelmode —. This can be either DRIVING or WALKING.
Lastly, insert this code:
1
2
3
4
5
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
This issues the actual search request, and completes the initialize() function.
Conclusion
With very little effort you can show your visitor how to get to your address directly from your website, instead of sending them to Google Maps or some other place. I hope you enjoyed the tutorial — please let me know if you have questions or suggestions. You are of course free to download the source files.
While you are here, why don't you follow me on Twitter or subscribe to the RSS feed?
Related posts:
]]>BuySellAds
BuySellAds is a very popular ad network that helps advertisers and publishers communicate. They have some very simple rules to follow to ensure the quality of the sites the ads are placed. First of all, the service evolves around design and tech sites with more than 100.000 impressions per month, which narrows it down a bit. Also, your website has to be in English. Many popular websites, such as the Tuts+ Network, use this network.
Visit BuySellAds
Google AdSense
Google AdSense is by far the most popular ad network in the world. It is very easy to setup &emdash; in less than 5 minutes, you will have working ads on your website. It takes a lot of visitors to make real money out of this, but it is definitely possible. You can use AdSense both to place ads on your website, in your e-mail newsletters, in your search results, and in your feeds.
Visit Google AdSense
TradeDoubler
TradeDoubler was founded in Sweden in 1999, and since then, it has grown to a very large marketing company. When you sign up, you will have to get your website accepted, and when you want to place ads, the companies will also have to accept your site as relevant for their products. Even though this might seem like a huge process, it can be well worth it. Some large companies, such as Apple and Dell, sell their ads here.
Visit TradeDoubler
Amazon
Amazon.com Associates puts Amazon products on your website, and allows you to make money from it. When people buy after following a link from your blog, you will get up to 15 %.
Visit Amazon.com Associates
Donations
If you’d like you can also ask your users for donation. That can be a great idea if you give away lots of free stuff. Most people won’t give you anything, but others will gladly spare a dime to help you out. For this purpose, you can use for instance PayPal. Instead of money, you can also ask for a beer.
I hope this article has given you a short glimpse into some different methods of earning money with your blog. Which services do you use, if any? Please share in the comments.
Related posts:
]]>
OS X Creative Zen Vison M Icons
75 Black Translucent Drive Icons (scroll down on the page)
Mac mini LaCie mini Hard Drive & Hub
Boxdrive (scroll down on the page)
Classic Cameras – Vintage Camera Icons
Memory Card Icon
And that’s a wrap! Hope you like the icons, and be sure to read the licenses.
Related posts:
]]>Basically, you have two main options; You can use Flash, or you can use jQuery. What you prefer is entirely up to you, but I’d like to show you some of the possibilities within each technology.
Open Flash Chart
An example of a bar chart made with Open Flash Chart
Open Flash Chart is—as the name states—a Flash chart. If you run a WordPress blog, you might know it from the WordPress.com Stats Plugin. It is open source, and there are lots of customization options. You can make almost any kind of chart you can imagine, and it’s fairly easy to setup if you just follow the tutorials on the Open Flash Chart website. With the new Open Flash Chart 2, you can even use it with jQuery and save your graphs as images. To see examples, and to read the tutorials, visit the Open Flash Chart website.
Flot
An example of a Flot graph
Next up is Flot, a jQuery based method for implementing graphs. It is hosted at Google Code, and it works in all the major browsers (including IE6). It comes with a great bunch of examples, but the documentation could be better. The output of Flot will be a static image.
jQuery Visualize Plugin
An example of the jQuery Visualize Plugin.
This jQuery plugin helps you implement dynamic charts into your website without using Flash. Using the HTML5 canvas element it is possible to create great-looking charts without using even images. There’s a very thorough tutorial at the site that helps you set it all up. Also, it works in every major browser.
jQuery SVG
An example of a bar graph made using jQuery SVG
This is yet another jQuery plugin called jQuery SVG. It uses SVG, a language “for describing two-dimensional graphics in XML”. SVG is supported in most browsers. Actually, it is not only a graphing plugin. You can use it to create advanced graphics on your website such as text paths. Still, for graphs it is very usable.
Google Chart API
An example of a map chart made with Google Chart API
The last method is Google’s own Chart API. It is very simple, and all you get is static images. But the static images are cool. You can easily create world maps with selected countries colored in your choice of color. As with almost every Google project, the documentation is awesome. You’ll get some very fine looking graphs with little effort, and everything is customizable.
Conclusion
Now to the big question: Which method is the best? I don’t know. I guess it’s all about taste and what you need it for. But similar for the five mentioned methods is that you have some very great, free resources that easily lets you implement graphs into your website.
Related posts:
]]>Before we start, check out what we are going to create:
Now, here is an overview:
Overview
- Google Maps API
- Getting the Coordinates
- Adding the Map to Your Website
- Adding Markers
- Customizing the Markers
- Adding Infoboxes
- Download
Google Maps API
The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and for beautifying—a little CSS. Version 3 of the Google Maps API has just been released, and of course, that is what we will be using here. You can read the entire documentation over at Google Labs, and while you are there, be sure to get an API key.
Getting the Coordinates
As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you know the exact address, you can put it in an URL of this form:
http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key
When you enter this in your address bar, you will see this:
The coordinates of Apple's head quarter in Cupertino
The first number is the status code, and 200 means that everything is okay. The second number shows how accurate the address is—in this case the number is 8, which is good. The last two numbers are latitudes and longitudes, which are the numbers we need.
Adding the Map to Your Website
There’s no need to hesitate – let’s add that map to your website! Open your favorite HTML editor and create a standard HTML file with UTF-8 encoding. First of all, we have to create the viewport and tell our HTML file to get the JavaScript file from Google Code. Add these lines between <head> and </head>:
1 2 | <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> |
After the URL, you will notice sensor=false. As we do not use any sensor, such as a GPS, to locate the location, this is set to false.
Just below what we have just inserted, write the following:
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(57.0442, 9.9116); var settings = { zoom: 15, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, mapTypeId: google.maps.MapTypeId.ROADMAP }; |
Let’s split this up to ensure that we understand it fully. In line 2 we create the function initialize(). Inside this function we are going to define the basic settings of the map. In line 3 we create a new variable, latlng. latlng stands for latitudes and longitudes. The variable contains the coordinates we’re going to use as the center of our map.
After that, we create the variable settings. You have a lot of options here.
zoom specifies—you guessed it—how far the map will be zoomed in. Play around with the number to get it to fit your location.
center specifies our center. By writing latlng, we refer to the variable we created earlier, and the coordinate inside that will be used.
The last code changes the layout of the map to a bit more minimalistic look in my opinion. The controls in the upper right corner (Map, Satellite, Terrain) are changed to a drop down menu, and the scaling/navigation controls in the left size are changed to small controls.
mapTypeId: google.maps.MapTypeId.ROADMAP defines that our map should be of the type ROADMAP – you can change this to either SATELLITE, HYBRID or TERRAIN.
Below the previous code, write this:
1 | var map = new google.maps.Map(document.getElementById("map_canvas"), settings); |
This code creates the variable map, and defines that the map should use the settings we just created.
Write
1 2 | }
</script> |
to end the function, and move to <body>, and write this:
1 2 3 | <body onload="initialize()"> <div id="map_canvas" style="width:800px; height:500px"></div> </body> |
By doing this we are telling our site to execute the initialize() function when the site is loaded, and insert a <div> with the size we want our map to be.
Try to view your site now. Cool, isn’t it?
Adding Markers
Now we have to add some markers. Let’s start by creating a standard marker—we’ll customize it in a moment.
Right below
1 | var map = new google.maps.Map(document.getElementById("map_canvas"), settings); |
insert the following code:
1 2 3 4 5 6 | var companyPos = new google.maps.LatLng(57.0442, 9.9116); var companyMarker = new google.maps.Marker({ position: companyPos, map: map, title:"Some title" }); |
Try to update your page, and watch the magic. So, what have we done?
First, we create the variable companyPos, where we specify the position of the marker. Next, we create the marker itself using the variable companyMarker. You can add more settings than these, but we will get to that later. These settings are fairly logical, so I won’t go into more depth with them.
Customizing the Markers
Even though this could be enough to show your customer how to find you, we can still make it a lot nicer. Create an image in Photoshop with the size 100×50 pixels, and create something similar to this:
Create your logo
Next, create a shadow for your image:
The logo shadow
To add these images as a marker instead of the standard marker, change the marker code to this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var companyLogo = new google.maps.MarkerImage('images/logo.png', new google.maps.Size(100,50), new google.maps.Point(0,0), new google.maps.Point(50,50) ); var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png', new google.maps.Size(130,50), new google.maps.Point(0,0), new google.maps.Point(65, 50) ); var companyPos = new google.maps.LatLng(57.0442, 9.9116); var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyLogo, shadow: companyShadow, title:"Company Title" }); |
What we have done here is also really simple. The variable companyImage points to the name of the logo image. Then it defines the size of the image, the origin of the image, and the tip of the image (where the image will be attached to the coordinate). Next, we do the exact same thing for the shadow in the variable companyShadow. In our companyMarker variable we add icon and shadow, and that is basically it.
Now, if you refresh your site, you will se that the marker has changed into your own logo with an added shadow to it as well. To add more markers, you just follow the same method (remember to change the names of the variables).
If you have two markers very close to each other, you might want to add some z-index. The marker with the highest z-index, is the one on top:
Adding zIndex allows you to choose which marker should be on top
1 2 3 4 5 6 7 8 | var companyMarker = new google.maps.Marker({ position: companyPos, map: map, icon: companyImage, shadow: companyShadow, title:"Høgenhaug", zIndex: 4 }); |
Adding Infoboxes
To add a description of your company when the visitor clicks on the logo we can add a infobox. With the Google Maps API it’s peace of cake.
Clicking your company logo will bring up an infobox
Paste this code right after you define the map variable:
1 2 3 4 5 6 7 8 9 10 11 12 | var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+ '<div id="bodyContent">'+ '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); |
The code here is fairly straight-forward, and you are of course not limited to headlines and paragraphs – there is room for images as well. To make the infobox appear when your logo is clicked, simply add this code right before the last } in the initialize() function:
1 2 3 | google.maps.event.addListener(companyMarker, 'click', function() { infowindow.open(map,companyMarker); }); |
To make the infobox just a little more pretty, add some styles in your stylesheet file:
1 2 3 4 | body { font-family: Helvetica, Arial, sans-serif; font-size:10pt; } |
And there you have it. One piece of fine-looking Google Map to include on your company website, your travel blog, etc.
Download
If you’d like to download the sample files, you can get ‘em right here. Be sure to leave a comment!
Related posts:
]]>I’m sure there’s many other apps with cool icons out there, and if you like one in particular, please let me know in the comments.
Espresso ($78)
Now, this icon really makes me wanna lick the screen… The steam from the cup is so delicious! Espresso is MacRabbit’s web development software, and it’s not only the icon that’s nice.
Bodega (free)
Bodega is created by IDFusion Software and Centrix.ca. It is the iPhone App Store for Mac apps. It comes with a stunning interface, and it seems to be growing incredibly fast. And, oh yeah–the icon is great!
ForkLift ($19.95)
Are you as tired of Cyberduck as I am? Then you should try ForkLift. It is an advanced FTP client that is fast, and has all the features you’ll ever need from a FTP client. The interface is beautiful and so is the icon.
MindNode (free)
MindNode is a really cool piece of software. It helps you organize and structure your ideas in really neat mind maps. The icon is nothing I’ve seen before–I love the way the plant comes out of the frame.
QuickTime Player X (free)
With Snow Leopard Apple released QuickTime Player X with an entirely new interface and some cool new features (and unfortunately without some of the very useful features from QuickTime Player 7). Nevertheless, the icon got a complete redesign, and I don’t think I’m the only one who thinks they got pretty well away with it.
Times ($30)
Acrylic has tried to reinvent the RSS reader with their app Times, and I think they succeeded, although for me $30 is a bit too much to spend on a RSS reader. However, the app does feature a beautiful icon.
Coda ($99)
Coda is Panic’s web development client, and has for a long time been the by far most popular web development client as well. Now that Espresso’s out, let’s see what happens. Even though I actually never really understood why the icon is a leaf, I still think it’s a very beautiful icon.
Billings ($56)
Billings is really popular these days. It is a feature packed invoicing app with time billing and it’s very easy to use.
Related posts:
]]>