This is another post on web development that you may find interesting.
As you may know, many of our location descriptions include external links. For example, a restaurant posted might contain a link to that restaurant’s website. Here is an example of a location with a link.
Until recently, clicking on those links would cause the web page to load within the iframe that contains the location information. This was a problem because the iframe is only 500 and change in pixel width, and most pages want to be 800 pixels in width. So, we finally got around to changing it.
When you have a link from within an iframe, say <a href=’newPage.php’>, the new page will automatically load within the iframe. In order to make it open up a new browser window, write <a href=’newPage.php’ target=’_blank’> and in order to navigate away from the main Stickymap page, write <a href=’newPage.php’ target=’_parent’>.
Now those 2 options present us with an interesting choice. Do we want external links on locations to open up a new browser window or simply navigate away. Many sites choose to open up a new window in order to prevent users from navigating away from their page. However, this practice is considered by some to be annoying and even spammy. However, I chose to do it that way because when I’m browsing Stickymap, I often want to know information about many different locations. Therefore, it would help me to be able to click on those locations, and have all the company websites open at once without closing my map. I’d like to get some feedback from you, our users, on this: do you agree with this decision, or would you rather just see a link navigate you away from Stickymap.com?
Another point of interest is how we implemented this change. All external links from these pages have no target attribute. In other words, they all look like this: <a href=’newPage.php’>. When the description is loaded into the page, is there a way to change the target attributes of all the links? Fortunately, there is, and I’ve used a special javascript library called jquery (website) to make it easier. I surrounded the description in an html <span> element, and gave that element a class of “fix_links”, so the html looks like this: <span class=’fix_links’> ….wiki description in here…. </span>.
Now, in order to change the target attribute of all links within that span, all I had to do was execute the following javascript, which is nice and concise thanks to the jquery javascript library.
$(‘.fix_links a’).attr(“target”, “_blank”);
Max