Authentic Jobs is a long-running, respected, and successful web design/development job board. I’m sure a lot of that success is due to the beautiful, minimal, and thoughtful design by owner and proprietor Cameron Moll. There is also a generous affiliate program, the screens for which share the thoughtful UI of the rest of the site. Take a look below at the screen for approved affiliates:
I thought this was a clever way to handle delivering graphics and code snippets to users who may not be HTML nerds, but likely know enough to copy and paste. This is the screen I’ll being doing a demo for, using jQuery for the functionality.
When creating the affiliate program for Are My Sites Up, I wanted to offer essentially the same thing: Copy-and-Paste code and a choice of hosted graphics. I borrowed heavily from the Authentic Jobs system. So for this example I’ll combine the functionality I wrote for the AMSU system with styling similar to the Authentic Jobs page.
Schematics
Functionality:
- Three major elements: Size Selector, Code Box, Example Area
- Default is 125×125 graphic, with code and example to match
- When new selection is chosen from the Size Selector, the Code Box and Example Area dynamically update to show the new code and new example.
The HTML Markup
We should stop and think a little bit about what actually “changes” when a new selection is chosen from the dropdown. The code changes, but the only thing that changes is the file name of the graphic chosen. Then the “example” area is literally exactly the same as the code, only it’s real code that we need to render, not show in a textarea. So the only information we need to dynamically update both these areas is the file name. Let’s be smart then, and include this valuable information in the markup associated with each <option> element (as a rel attribute. This way our JavaScript will have access to it easily.
<fieldset>
<legend>Choose</legend>
<form action="#" class="code-selector">
<div>
<label for="type-size">Graphic Size: </label>
<select name="type-size" id="type-size">
<option selected="selected" rel="AMSU_Ad_125x125v2.png">125 x 125</option>
<option rel="AMSU_Ad_300x250v2.png">300 x 250</option>
<option rel="AMSU_Ad_465v2.png">465 x 55</option>
<option rel="AMSU_Ad_768x90v2.png">768 x 90</option>
<option rel="AMSU_Ad_120x240.png">120 x 240</option>
<option rel="AMSU_Ad_318x54.png">318 x 54</option>
<option rel="AMSU_Ad_50x50.png">50 x 50</option>
</select>
</div>
<div>
<label for="code-example">Code: </label>
<textarea rows="10" cols="25" id="code-box"><a href="http://aremysitesup.com/aff/xxxxx"><img src="//css-tricks.com/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a></textarea>
<p class="note">Just copy and paste the above text into your website. Your affiliate code has already been included!</p>
</div>
</form>
<label>Example: </label>
<div class="example-area" id="graphic-example-area">
<a href="http://aremysitesup.com/aff/xxxxx"><img src="//css-tricks.com/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a>
</div>
<p class="note">Example graphic may be scaled down above, but won't be placed on your own page.</p>
</fieldset>
The CSS
There is nothing very important/interesting in the CSS, and I include it here pretty much because of the name of this site =). Perhaps a few things of note… The whole internal layout is accomplished pretty much by making those labels block level and floating them to the left with a set width. The outside frame is done with the classic fieldset/legend combo, which is quite nice and semantically appropriate being as this is technically a form.
* { margin: 0; padding: 0; }
body { background: #eee; font: 12px Georgia, Serif; color: #2d2d2d; }
#page-wrap { width: 600px; margin: 20px auto; }
a img { border: 0; }
h3 { font-size: 24px; font-weight: normal; margin: 0 0 25px 0; }
fieldset { border: 1px solid #666; padding: 15px; }
legend { border: 1px solid #666; text-transform: uppercase; padding: 2px 6px; }
.code-selector div { clear: both; margin: 0 0 25px 0; }
label { font-size: 14px; display: block; width: 120px; float: left; text-align: right; padding: 2px 6px; }
.code-selector select { border: 1px solid #666; padding: 2px 2px 2px 6px; }
.code-selector option { padding: 0 12px; }
.code-selector textarea { border: 1px solid #7d7858; padding: 10px; width: 375px; height: 80px; }
.note { font-size: 11px; width: 300px; margin: 0 0 0 130px; color: #666; }
.example-area { margin-left: 130px; width: 375px; text-align: center; border: 1px solid #7d7858; padding: 10px; }
.example-area img { max-width: 100%; }
That last line down there ensures that graphics wider than the example area are scaled down to fit inside the Example Area. If this is mission critical, be aware that max-width doesn’t work in older browsers and you may need to come up with an alternate technique.
The jQuery JavaScript
I’m going to show the code below in full context, from including the jQuery library on the page to the code itself. I do this because I think it confuses people sometimes to see snippets of code shown and they don’t understand where those snippets go or how to use them. In a “real” environment, of course you’d be smarter to move the actual code to an externally reference file rather than having it in your HTML like this.
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
$("#type-size").change(function() {
var graphicFileName = $("#type-size option:selected").attr("rel");
var newCode = '<a href="http://aremysitesup.com/aff/xxxxx"><img src="//css-tricks.com/amsu/' + graphicFileName + '" alt="Are My Sites Up?" /></a>';
$("#code-box").text(newCode);
$("#graphic-example-area").html(newCode);
});
});
</script>
The most important word above is change, which is a native jQuery function that will fire when a new selection is made from our dropdown box. When this happens, we are able to assertain which option was selected by using the :selected selector in jQuery. We do this in first line of the change function, and set a variable pulling that elements rel attribute that we smartly set to the the new file name of the graphic.
The next thing we do is create a new string, which is the literally the new HTML code. This string will do double duty. We’ll replace it as text inside the textarea, and we’ll replace it as html in the example area. Beautiful, we have new copy-and-pasteable code, and we are guaranteeing that it will work because that same exact code is being used to show the graphic below.
Accessibility
As it is, this will only work if JavaScript is enabled. A non-JS user would see the 125×125 code and example, but nothing would happen when they select a new element. So I think I’ll leave this one up to you guys to jump in with the best accessibility solution.
I think this is what I would do:
- Put a submit button on the form (hide with JS)
- Have the form submit to itself (via action url) as a POST
- When loading page, check for POST variables, in which you could see which option was selected.
- Depending on which option selected, display the appropriate code/example.
Thanks for the post Chris, I really enjoyed the simplicity of it, and the final outcome looked great! – I’ll definitely go off and have a little play aboput with that, see what I can come up with! :D
Lovely work Chris. I am about to start work on an affiliate type link click through, and this is perfect.
Thanks for sharing the code, keep up the great work mate.
Hey did you update the Leave Comment area?
Hey Chris,
Great tutorial! I’m looking to add something like this to a site I’m working on shortly, so perfect timing.
One tiny tip: For better improvement, chance .text() for .val() for write in textarea. is better for FF 3.0
Nice article, but I have a question..shouldn’t var newCode include the anchor tag as well? something like:
var newCode = '';
Accessibility: You could place a submit-button on the form as you say, and then hide it with an unobtrusive javascript (through document.ready in jQuery, right?).
Personally, I’d like to see a radio button-solution; where each button has the appropriate picture. It’s easier to see all seven options at once, instead of having to select one at a time.
correction:
var newCode = '<a href="http://aremysitesup.com/aff/xxxxx"><img src="https://css-tricks.com/amsu/' + graphicFileName + '" alt="Are My Sites Up?" />';</a>
The anchor is actually there, but it looks like Chris’s code highlighter is not showing it properly. The img tag is actually a clickable link.
Great title. ;)
really nice work.
JS sounds like the most straight forward, but just as a mind excercise I was thinking it is possibly even better to use CSS for a menu.
If the page load would allow, you could load all the options in the page, hide all of them and show the correct one through css
Nice script. It’s nice touches like this that really add to the user experience of a site. Clever use of JQuery and I like your method for working round whether JavaScript is enabled.
JQuery is something, which I plan this year to become more involved in.
That is nice,I am a freshman on web design,Would you please write something on Jquery’s Ajax or extending.thanks!
Nice work (as usual–I love what you do, Chris), but why did you choose to store the file names in the rel attribute rather than the value attribute of the option elements? Especially if you’re considering a server-side solution for accessibility, the value of those rel attributes will not be passed to the server as part of a form submission. In the absence of a value attribute, the server would receive the text of the selected option (e.g., “300 x 250”). While this might be OK, wouldn’t it be easier if the server received the name of the file?
Yes, that would be way smarter =)
Why a rel attribute and not a value one? Is there a reason to use rel instead of value?
I liked it and will try to improve and integrate into a community site that i’m helping to build (i hope you don’t mind … I can’t belive since i first came to your site I’ve learnt so much! Thanks for everything :)
Exactly what I am looking for.
Thanks!
I’m curious as to why the fieldset was used to contain the form. Is there an advantage?
I like this method for displaying options. Thanks for sharing the idea.
I think that someone looking for jobs for designing sites or having a site and using the system to know whether his site is down would have JavaScript enabled. It’s highly unlikely that you’d come across a browser with no JavaScript.