Print

[siteFEEDS]

Banner Code Displayer Thing
3 August 2009, 3:45 am

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.

 

View Demo   Download Example

 

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 element (as a rel attribute. This way our JavaScript will have access to it easily.

Choose

Graphic Size:



125 x 125

300 x 250

465 x 55

768 x 90

120 x 240

318 x 54

50 x 50

Code:

<a href="http://aremysitesup.com/aff/xxxxx"><img src="http://css-tricks.com/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a>

Just copy and paste the above text into your website. Your affiliate code has already been included!

Example:

Example graphic may be scaled down above, but won't be placed on your own page.

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.





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.

 

View Demo   Download Example

 

Get your hot and fresh design and development links at Script & Style!





Source: CSS-Tricks