Setting Rules with JavaScript

Blog

by Bobby Whitman

close twitter facebook

dynamIt often runs into the following problem with users of our CMS: Organization X
has a website that provides information to its members. On this website they frequently
link to other sites on the internet . They need some way to display a disclaimer and warn
their users that they are leaving the official web site of Organization X and traveling
to a foreign site. The person using the CMS is likely not the most tech savvy person
and therefore does not understand how to add simple JavaScript to their link to display
this disclaimer.

The solution: do what we call “setting rules” with JavaScript.

First, consider to which HTML elements this rule will apply. In our example
this is easy, it will apply to all links or tags. jQuery makes it simple to
retrieve all of these elements

$(“a”)

Thanks to jQuery we can make our search for tags even more specific. jQuery allows
us to test attributes of the element. In this example we want to find all tags in
which the href attribute starts with ‘http://’.

$(“a[href^='http://']“)

Now that we have found all such links in the page, we need a way to loop through them.
JavaScript has the standard loop structures, however jQuery make this even easier. After
we have selected the right links with jQuery we can loop through using the jQuery
each() function. The each() takes one parameter, that is a function which will
be executed in the context of each element.

$(“a[href^='http://']“).each(function() {

});

Inside this function we refer to the current iteration’s link element as $(this).
We now use jQuery to manipulate the link and warn the user that they our leaving our site.
Also, we need all of this JavaScript to happen automatically, again jQuery comes in
handy here with the ready event.

$(document).ready(function() {

$(“a[href^='http://']“).each(function() {

var myhref = $(this).attr(‘href’);

$(this).attr(‘href’, ‘#’).attr(‘link’, myhref).click(function() {
if(confirm(‘Warning this link will take you to another site.<br />Are you sure you wish to leave?’)) {
location.href = $(this).attr(‘link’);
}
});
});
});

You see will here, that when the user now clicks on the link it will run JavaScript’s built-in
confirm command that will popup a system dialog asking the user to continue.
If the end-user clicks ‘Ok’, the confirm will return true and it will redirect
the user to the location of the original link. For more information on the JavaScript
confirm box, click here: http://www.w3schools.com/js/js_popup.asp.

Twitter

Fact vs. Fiction: What Usability is Not, http://t.co/aDAdJLa4

Posted on Tue, Feb 7
by phil_franks

Twitter

an oldie, but a goodie // Death to design by committee // via @Boagworld http://t.co/6Mo1Vxyl

Posted on Mon, Feb 6
by pomajp

Twitter

The Myth Of The Sophisticated User http://t.co/Mlr7M20r (via Instapaper)

Posted on Mon, Feb 6
by pomajp

Blog

Web/Graphic Designer Position Available

by Gary Moneysmith

close twitter facebook

Dynamit was honored as one of the “Best Places to Work” in 2010 & 2011 by Columbus Business First newspaper and Interactive Agency of the Year. Times are even better in 2012 and we’re hiring a Web/Graphic Designer for our aggressively growing team.

This is an exciting opportunity to work on cutting edge projects for well-known brands in a dynamic, entrepreneurial and highly creative environment. Please email resumes/cover letters and portfolio information (documents or links to online examples) to Gary Moneysmith via gmoney@dynamit.us.

A web/graphic designer on the Dynamit team will:

Be well versed with Adobe Creative Suite: Strong knowledge of Photoshop, experience with Illustrator and InDesign.
Have a strong understanding of Usability & Web Trends: Experience with user interface design, knowledge of best practices & examples of this in a portfolio or live site/application design. They will also be up-to-date on web trends and design tactics with examples.
Have experience in user experience design (UXD) designing application and system interfaces. This experience is crucial for this position.
Have Basic Programming Knowledge: We’re not looking for a developer here, but the designer should have the ability to design for web with a knowledge of the boundaries and how to design for execution by a programmer.
Have a Strong Portfolio: We’d like to see much more web work than print.
Be eager to learn, with a passion for design & the web. The designer should have a strong internal drive for industry knowledge and be committed to furthering the craft.

Experience is important, but personality is key. Our culture is what drives us, and we’re looking to build our team with someone who both fits and contributes to it.

The position is full time at our office in the Arena District in Columbus, Ohio. We offer a competitive salary and benefits package as well as a fun, high-energy, intellectually-stimulating work environment.

Benefits Include

Competitive salary (compensation will be based on skills and experience)
Fully paid medical/dental insurance for employees
Paid parking
Unlimited vacation time (within reason)
Office bar + climbing wall — not recommended together

Don’t sit back. If you want to work in a fast paced work environment with great people who love what they do, apply today.

About Dynamit
Dynamit is a digital agency based in the Arena District in Columbus, Ohio. We work with clients and brands on digital initiatives that include strategy, design, user experience and development. We influence communication and commerce. Client work includes Hilton Worldwide, Charley's Grilled Subs, McGraw-Hill, British Broadcasting Corporation (BBC), E-Z-GO, American Electric Power (AEP), Columbus College of Art & Design and the Ohio State Medical Center (OSUMC) to name but a few.

dynamit

Blog