Creating a Completely Customized Google Map Plugin for jQuery

Last week I briefly touched on the customization possibilities of Google Maps, this week we'll be taking a more in depth look at what exactly you can customize. The options available include customization for all aspects of the map such as: Roads Points of Interest e.g. Schools, Parks and Hospitals Methods of Transport Water Landscape features e.g. Man made or Natural This covers not only custom colors, but the icons and text associated with each element. Getting Started ... This tutorial is a follow...

Adding a custom icon to a Google Maps Marker

I've used the Google Maps API a few times over the last while and one thing that I've never really touched on is it's fantastic customization options. You can pretty much style or customize everything. In this quick post I'll show you how to change the default marker (or pin) to something else. This is handy if you want to display your company logo or some other icon on the map. I'll also detail the other configurable options that you can change in the google.maps.Marker class. Getting Started ... We saw earlier...

HTML5 Geo-location API and Google Maps API

In this weeks tutorial we'll be creating a jQuery plugin that serves as an introduction to the HTML5 Geo-location API to request your current location. Once we have the location, we will then draw a route from there to Dublin, Ireland (or wherever you tell it to) using the Google Maps API. This could be used in a HTML5 web application or on a site to tell your customers how to get to you. Getting Started ... First of all we'll need to create our jQuery plugin wrapper. The $.extend function will allow us to provide...

Adding custom next/previous post buttons to WordPress using Font Awesome

The default WordPress theme (TwentyTwelve) comes with a pretty standard previous/next post function for the theme. I don't particularly like the links as they feel a little forgotten about and they could easily be so much more. This snippet will show you how to create a custom navigation function and we'll be using Font Awesome to add some icons. Adding Font Awesome ... Font Awesome is quite literally awesome. It's a collection of over 360 icons presented as a font. This means you can easily add it to any...

Automatically generating a table of contents with a smooth scroll effect

Ever written a long article worthy of a table of contents and decided not to do it because it's just too much hassle? This week we'll be writing a jQuery plugin that will automatically search for your headings and create a table of contents based on them for your blog post. We'll also be adding a smooth scroll effect, so that when a user clicks on an entry they are brought to the right section. I know a table of contents is a bit of an unusual topic for a tutorial, but if you're writing a help file for your product,...
Ever read a really long blog post or article and then had to scroll all the way up to the top of the screen to get to the menu? It can be a little frustrating. It's easy to fix, you can have a fixed menu or as you'll see here you can provide a quick and stylish way to get back to the top. Getting Started ... HTML wise all we need to do is add a "back to top" link at the bottom of the blog post <a href="#" class="back-to-top">Back to Top</a> We then need to style and position it. Here I'm setting its position...
How do you encourage users to stay on your site and how do you let them know about the rest of the great content you have on your site? If a user has read or is reading and article on your site, they may like to know about similar content. You could have a series of thumbnails or related articles, but why not give a specific post a little more priority? In this tutorial we'll be using jQuery to detect when the user has scrolled to or near the bottom of the article. Once they are near it, we'll display a small overlay...

Customizing the WordPress footer by adding widgets

The footer is often overlooked when it comes to designing a site, but it's a great way to find contact details or other important pieces of information. People have been trained to look there since the days of letter writing. Even today if you look at any correspondence, utility bill or company letterhead you'll find important information. On websites it's an can be an important navigation tool, it can give you quick access to commonly needed pages that are not core to a site. In this quick tutorial we'll...

A WordPress slider template (with CSS3 animations and minimal jQuery)

Almost every site you see these days has an image slider on the front page. They come in all sizes and depending on who you ask, they have limited benefit to a sites traffic or navigation compared to the amount of space they take up. But they look pretty and when used correctly can be fairly effective. This tutorial aims to create a simple WordPress page template with a slider that allows you to include a few posts that have been added to a slider category. To make it more interesting, we're going to make it book-markable,...
Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns