Convert <address> tag to Google Maps embed automatically with jQuery

Converting an <address> tag into a Google maps link is something I’ve written about in the past, but user “Moose” was wondering if you can do the same thing, but transform it into an embedded map. Quick answer: Yes!

Using jQuery, we search the document for <address> tags,  create some HTML to embed the map with the current address inserted in it, then write that HTML out into the current spot.

Welcome to JS Bin

jQuery List sorting plugin

In the standard course of programming for my job and school, I have occasionally come to the need of a simple function or plugin to numerically sort UL list items.  In the spirit of sharing with the community, here is a jQuery plugin that I wrote to accomplish this. It’s quite simple — just does what it does.

Demo

 

jQuery math finally solved

Web designers have long struggled with some of the more advanced aspects of computation and mathematics. Sometime ago, a Stack Overflow question asked

I’ve got a number in my JavaScript variable! Now how do I add another number to it? Please

A few well meaning answers point to using jQuery as the obvious solution. However, after a in depth search, I couldn’t find any actual jQuery plugins to do the calculations!

Well, there is a new jQuery plugin in town that aims to solve the problem of arithmetic in JavaScript: jMath!

It is incredibly easy to use in your code:

The plugin accepts the following operators:

  • ‘+’ (addition)
  • ‘-‘ (subtraction)
  • ‘*’ (multiplication)
  • ‘/’ (division)

And looking to add more in the future.

Hope that this helps in your development. Thanks!

Really Simple jQuery Tabs

Bugged by popular jQuery tab content rotators that a bulky, non semantic, to fast/slow, or can’t use custom HTML anywhere you want? Really Simple jQuery Tabs is a jQuery plugin that tries to address each one of those issues. It’s goal is to be as simple and flexible as possible. You can completely rip-out and replace the CSS with your own, changing elements position, styling, etc. It is quite small: at 844 bytes your bandwidth won’t know the difference!

And oh yeah: they rotate!

I have used several jQuery tab/content rotators/panels/things and, although each has been extensively developed and tested, am always left with the feeling that something is missing:

  • This one doesn’t let use put your own HTML in the tab-link
  • That one only supports images
  • The other one is 10,000 lines of code and you only use it once
  • This one cycles too fast/slow

The purpose of Really Simple jQuery Tabs is to be really simple and really flexible.

You can:

  • Add HTML to your semantically correct list item tab-links
  • Panes are regular DIVS – put images, text, AJAX loaded content, etc. up in that DIV
  • Specify (down to milliseconds) how fast to cycle, if you want to cycle at all
  • bonus feature: only 844 bytes!
  • Completely customize the CSS to affect layout, coloring, etc…

Before you get too far: Check out a simply -styled DEMO 

Or, see it in action at: weber.edu/getintoweber

Implement it like this:

And the markup looks like this:

Notice that semantic markup? Yeah, me too. It was written to be as flexible and extensible as possible.

Now download the source and do your thing!