Convert < address > tags into Google Map link using jQuery

Relevant Stack Overflow Question

While designing a page template for a University today, I realized that there were many areas of the future pages that would include street addresses: buildings, conferences, offices, ect..  I thought, “Wouldn’t it be nice if these addresses were links to Google Maps?” Then people could easily find directions or set their phone GPS whilst driving (at a red light of course).

However, I quickly realized that in such a large institution as I am, that no faculty member would take the time to include a maps link.  As always, such wondering is the stuff of inspiration.  With a little bit of thought, I began writing a little jQuery function that could fulfill my dream.


The function scans the entire webpage for instances of the <Address> tag:

And surrounds the address with a link to Google Maps:

Here is the jQuery Function:

Update: 11/27/2012 – Bug fix and code prettyfication.

100% Height Div with 2 lines of code

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here

EDIT: This post has several code-blocks of JavaScript to keep two divs at an equal height. I recommend the last method, if you are using jQuery — It seems to be more adaptive to different div content, working in more situations.

Check out the DEMO first, to see if this is what you want

The problem: Creating a div that auto-expands to 100% height of its container. The most common occurrence would be creating a two column layout for a menu, sidebar ads, etc…

The solution that never actually works:

“Since divs automatically inherit the height of their parent, if your parent doesn’t have height set, you cant get 100% of nothing. Set the parents height and it will work.”  Pshaw, I say.  While this may be the accepted standards mantra, I have never seen it actually work in a modern browser.

100 Percent Div Tutorial
Div! Y U NO Expand?!?

The Easy Solution (in 2 lines of code):

Working Demo on jsfiddle

Well, that’s actually 4 lines, if you include the script tag… But just 2 lines of JavaScript.

If you would like to keep the expanding div from collapsing too far, or expanding to much, simply add a conditional statement around the second line, like so:

Short Explanation:

Line 1 creates a new variable “h” and assigns this variable the height of an element found. This does not return the “height:” as specified in CSS, it returns the actual height of the document as it is displayed on the screen.

Line 2 fills the “height:” style value of the other, shorter, element with the variable h + “px”

Put this code near the end of your document, probably right before the body tag, and it will run right when the page loads. You could also wrap this in a jquery $(window).load, or even a $(document).ready. As it is, though, there is no library dependency – just plain-old-JavaScript!

Or, do it with jQuery instead:

Commenter Ivan couldn’t get this code working for him, so he rewrote it using jQuery. I have further rewritten his original code to be a bit shorter, and activate when the content of both divs has fully loaded. I recommend this method — if you are already loading jQuery — as it seems to work much better with dynamically loaded content.

Working jQuery demo


Edit #2 — There is a jQuery plugin called equalHeight that accomplishes this pretty easily

Check out my post 100% height using jQuery for more information about it.

Hacking MyMathLab (a case study in software security best-practices)

This article details an experience I had while using the software MyMathLab, and overviews software security best practices. There is no information in this article that would allow students to alter their grades or cheat in any way, but details minor exploits in the software and security infrastructure related to “locking down” a workstation. This post was written for educational purposes relating to software development and security.  

In keeping with security best practices, the software vulnerabilities were immediately show to both a math faculty member and a campus IT employee sometime before being published in this article.

MyMathLab is a software product, owned by Pearson (one of the largest textbook publishers in the US), including:

The Art Institute of  Houston, ASU, Baker College, Boise State University, Bossier Parish Community College, Cabrini College, Central Texas College, Chicago State University, Cleveland State Community College, Coastline Community College, College of the Sequoias, DeVry University, Florence Dablington Technical College, Florida State College at Jacksonville, Front Range Community College, Henry Ford Community College, Hillsborough Community College, Houston Community College, I State, Ivy Tech Community College, Jackson State Community College, Kapi’Olani Community College, Lone Star College Montgomery, LSU, Memorial University, Mesa Community College, Mississippi State University, Norwalk Community College, Odessa College, Quinsigamond Community College, Reading Area Community COllege, Riverside Community College, Rock Valley College, Sait Polytechnic, South Suburban College, Southern Illinois University, The University of Alabama in Huntsvilee, Triton College, Umpqua Community College, University at Albany, UHD, University of Idaho, UIC, The University of Mississippi, UT, The University of Toledo, University of Wisconsin-Stout, Volunteer State Community College, and Yavapie College

Why I Tried:

During the first-day-of-class-reading-of-the-syllabus my professor came to this line: “Do not use the computers in the classroom or math lab to use email, or use any other non-math website.” “Actually,” he said, “I’m pretty sure that the computer department locked down all of the computers, so why don’t you try, if you can actually get anywhere I’ll be pretty surprised, but come and show me.”

Challenge accepted!

MyMathLab Opening Screen

During my first glance around the software, I gathered some basic information:

  • MyMathLab is a web-application that allows students to
  1. read from an e-text (a pdf)
  2. watch video examples (in quicktime)
  3. do homework in a flash application
  4. watch math presentations (powerpoint)
  • MyMathLab runs in a stripped down version of Internet Explorer.
  • The entire computer seems to be under the control of some type of user-access control system. Attempts to click on the start-bar or the windows time are met with an “Unauthorized Function!” dialog box. I seem to be completely sand-boxed in.
  • There is no physical tower, or box powering my monitor, keyboard, or mouse. I seem to be using a terminal that connects to a MyMathLab server somewhere else on campus.

Thinking back to my experience at a highly micro-managed yet highly incompetent call-center, I remembered that my first, and probably easiest route to escape would be to find a dialog box that I could hijack and turn into a make-shift explorer window. From there I could navigate to anywhere I had permissions.

Failure 1: The weakest point in any system is the reliance on any third-party controls or software to perform a critical function.

Administrators will perform their due-diligence in locking-down any user access that they have created, but often fail to check, or even understand third-party systems that they give rights to — assuming that the third-party system will always behave.

This route of attack was remarkably simple, yet yielded a remarkable amount of access.

Step 1: find a dialog box

While the quicktime tutorials and the pdf e-text both opened in a custom reader, or at-least a custom shell of a known reader, the slides opened up right in a fully-featured Powerpoint session. I was a little surprised! I first went for the “open” button, which led to a “Unauthorized Function!” message. Good Job, guys. Open Recent and Save As were both dead-ends too.

“Let’s get creative,” I thought, and created a new document. That worked!  I noticed that more of the ribbon appeared — I must have been looking at a read-only version of the math slides. Now I see more font control, as well as some shapes, as well as more buttons along the ribbon: Insert, Design, Animation, Slide Show, Review, View, and Format.

The Insert tabs looked like a gold mine: insert videos, images, objects(ole I’m assuming), etc.  Inserting an image finally led to my dialog box!

Step 2: Explore Access.

I held back my hopes as the Image dialog box opened for me.  A couple things could still go wrong at this point: I might only have access to my sessions Documents and Settings Folder or the file-type could be restricted to images only. I held my breath and click on My Computer on the left of the dialog box…

Oh. My. Word.

  • C:/MyMathLabServer
  • Network Places

To test out my permissions, I right-clicked, created a new text file, and then proceeded to delete that file. Success.

Failure 2: Giving the user write permissions to system critical files.

Now for a look around: C:/ had all the normal stuff: program files, windows, documents and settings.

The most I dared to do was to open one the the DLL files in program files/mymathlab with notepad and make a small change in a comment section, save it, and then change it back after checking to see if it worked. It did.  I also had access to the host-file entries that prohibited any access servers other than mymathlab.  Probably the most damning however, was my ability to open the command prompt, which allows nearly unrestricted access to the inner workings of the local network, as well as the local workstation.

Failure 3: The workstation user account had access to the command prompt.

After class, however, my inner white-hat prevailed, and I ended up telling my professor what I had found, who then nearly sprinted up to the CS support lab and dragged a tech down for me to walk through my simple exploit. And seeing as I gave CS support adequate warning about the exploit, I now have no qualms about sharing my story, because I’m sure its fixed by now!

The moral of my story? Don’t be a bad programmer, don’t rely on third-party software/controls for essential functions, and most of all: don’t try and lock-down students, it just makes them curious.

Tutorial: Opening a Pop-up window in

There are many reasons that a user would want to open up a new window from your ASP site. Maybe the clicked on a button or a link, maybe the current page just isn’t doing if for them.  Maybe their current page has self-esteem

issues, or weight issues.  Maybe their current page is getting a little thin on top, or doesn’t really do to well in the bedroom.

Back to maybe they clicked on a button.

Opening a new window from current page is actually quite simple! and can be accomplished in three steps:

  1. Create a control on the page that can handle and “onClick” event. This could be a plain HTML button, an anchor tag, an image, whatever…
  2. Double clicking on the control will open the code for the new HTML control. It should look like this:

function Button1_onclick() { }


Look what I made at School!!

Remember, for this to work you’ve got to use a plain HTML control, not a “runat=server” .net control. These are found in the HTML Tab on the left.

And finally, the code that goes inside is:

The parameters are (the url of the new window, the title of the new page, size stuff)

View the page, click on the button/link/whatever and Whala! a new window opens.

Tutorial: Pass data between pages in

You have created the perfect webpage. Beautifully formed HTML, poetic CSS, artistic JavaScript, and cunning jQuery. And suddenly — a link — and all user data is lost!

By far, the simplest way to pass data between pages is by using URL variables. These little nuggets act quite a bit like two pages playing catch:

  • the first page throws some variables along with the URL
  • the second page must catch them

the throw

Get the data, save it as a string like this:

then send the data to a page like this

Thats it!

And now for a little explanation of part one:

the “?” after the url means “hey server, get ready… Im about to pass you some data.”

“name=” this is what im going to be passing you.

and “strName”… Here’s the data!

It’s pretty simple to pass multiple values too: just put an & symbol between variables, like this:

Be sure to put this inside of some sort of event in the code behind, like a button or linkbutton click.

the catch

This part is almost as simple to implement as the throw. The basic steps are:

  • get the variable from the url, if it is there
  • the store it, or use it right then

As your page is loading, your want to let the server know that you are expecting some data, and store it if there.

this is done by using:

Then you are free to do any ifs, fors, dos, or other whathaveyous on your string that you would like.

For example: Im expecting a username, but since i didn’t get one, send them back home:

6 ways to ensure your visitors never, ever come back

As one of the web designers here at MyMark, I spend quite a bit of time with my head in code. In fact,  “System.out.print()” makes a lot more sense to me than “Quoth the Raven.”  However, in my travels around the web, I have noticed many things that you can do to drive away pesky visitors.  Six of the most popular are:

6. If a feature exists, use it.

As a web designer, I remember a time when people just weren’t afraid to use every tool for every job.  There seems to have fallen a shroud of arrogance where we are too good for all the features the web makes available to us.

This individual has put together a really nice example of what a website should look like:

When this website opens, our senses are immediately greeted, not only with three separate background colors, but a page title that scrolls back and forth. We then are amused by an animated background that looks like little bubbles on the page.  These are only to be topped, however, by a wonderful blast from the speakers of the William Tell Overture — played in full MIDI glory.

There are so many options the web has given to us over the last 15 years:

  • Blinking text
  • Scrolling headlines
  • Auto-Playing Sound and Video
  • Pop-up advertising

Why not use them all?

5. Spelling and Grammars takes too much time.

We won’t spent much time with this because it’s relatively simple:

Churning out content takes a lot of time, and any time we can cut from the process is well worth the cost.  After all, our goal isn;t to make it perfectly readable, just readable enough to get them to click on the ads.

4. More color equals better.

Time and history have consistently proven that more color equals better.

See? Better.

Like most aspects of our physical world, this principal translates quite well into the online world. When designing your site always try to include as much color as possible. These colors may be complimentary, tertiary, binary, obfuscatory, etc. The important thing to keep in mind is just to get as much color in there as possible.

One website the makes excellent use of this principle is

Colorful Christian Website

This website really goes above and beyond! Not only do they manage to get ALL the colors in on one page, they somehow manage to scroll them across the screen at a high rate of speed — which ties into the next tip:

3. Rely on flash, images, and animation.

When that writers block hits — and it eventually will — nothing can mask it better that using  more graphics to spice up your content. These will distract your readers from the lack of meaningful content, and distract them until their eyes skim to the next part of the page.  The thoughts sound a bit like this: “Nice banner, hmm… menu. Oh, nice picture! words, words, words, and here’s the link I was looking for.”

Keep in mind that these images don’t necessarily need to be related to your post, just mildly interesting. For example:

  • A young child blowing on a dandelion
  • An attractive business woman
  • A portrait of a smiling family with the sun behind them.
  • An older dog, usually in sepia tone

This technique also works well for non-static imagery, like a GIF animation, or small flash object.

Let’s do a case study:

Company XZY knows they need a website — in fact they have been hearing about them for years.  After getting together the momentum and resources, they purchase a domain name and hosting space with a pre-installed web template. After typing in thier mission statement, “XYZ’s Mission is to scout profitable growth opportunities in relationships, both internally and externally, in emerging, mission inclusive markets, and explore new paradigms and then filter and communicate and evangelize the findings,” XYZ company realized their site needed a little more “POP” to it.

How could we help XZY company?  Instead of plain text “XZY Co.” and their logo, this could fly-in from the left of the page, and screech to a halt just before the right margin.  To spruce up their mission statement, we could insert a photo of a multi-ethnic business team standing in a large glass rotunda. We could also have chosen a rotating globe with their employees silhouettes in the foreground.

If these techniques do not immediately work, there’s always the “funny-picture-of-a-cat-with-a-badly-misspelled-caption” trick. This is nearly guaranteed to work.

2. Buzzwords are the key to good content.

It is generally well known that the purpose of text on a website is to provide search engines something to find you by.  Therefore, thorough and repetitive placement of industry relevant buzzwords greatly enhances the SEO (search engine optimization) of your particular web page, and will launch tagging you into the blogosphere of our post Web 2.0 world.  Note, however that these keywords do RSS not  have to be particularly relevant to your industry — any hip industry will do.

Any finally, the best way to ensure your visitors never come back:

1. Meet your needs, not theirs.

Its is Your website after all! When writing your content, it is important to ask yourself the following questions:

  1. How will this make me look?
  2. What can this post do for me?
  3. What would be the popular thing to write?

Be very careful not to consider these questions:

  1. What is relevant to my readers?
  2. Can I solve a readers problem?
  3. Is there a pressing issue or concern I can help with?

These later questions can steer you away from your true goal: to meet your own needs.