Basic/Intermediate Javascript (JS) knowledge and some jQuery knowledge
A WYSIWYG editor that allows you to add custom CSS classes and id attributes to elements.
The Process
Open your WYSIWYG editor
Create a bullet list with 3 bullets
Directly below the bullet list added 3 paragraphs of content
With each paragraph add an id attribute relative to the content (usually done through a right-click)
With the UL element; add an attribute class of “tab” (usually done through a right-click).
Then wrap each text LI with an anchor (A) tag;
For each A tag; make the href (# + value of id given to a paragraph in step 4); repeat for each LI.
Utilizing the href attribute is ideal for it ensures backwards compatibility (when JS is disabled) and enhance accessibility.
Sample HTML to match the above steps
<ul class="tab">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<!-- end #tab1 -->
<div id="tab2">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<!-- end #tab2 -->
<div id="tab3">
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<!-- end #tab3 -->
Now that the HTML is in place we need to make the jQuery tools tabs solution more flexible than it is out of the box. The best way to do this it to append some JS logic to a document ready call via jQuery (which works off the DOM structure above).
Sample Document Ready JS logic
$(document).ready(function() {
//tabs
if ($("ul.tab").length > 0) {
var tab_contents = Array();
$.each($("ul.tab"),function(n,ul){
var tab_class = "tab_content_" + n;
tab_contents.push(tab_class);
//find our tab content by using the a tag's href value
$.each($(ul).find("li a"), function (i,a) {
var tmp_el = $(a).attr("href");
if (i == 0) $(a).addClass("first");
$(tmp_el).addClass(tab_class);
});
//initiate tabs
$(ul).tabs("." + tab_contents[n]);
$(ul).addClass("tabs_active" + " " + tab_contents[n]);
});
}
});
Breaking down the Document Ready Logic
First use jquery to see if any ul’s with the class of “tab” exist hence $("ul.tab").length > 0 (note: .length is required because unlike most other JS libraries jQuery returns results from the selector engine as an Array). The rest of the code assumes/executes if there is at least 1 instance of ul.tab in the DOM structure.
Next we create an JS Array variable called “tab_contents”. This variable will store a unique CSS identifier to allow multiple ul.tab instances per page. With that said, utilize the jQuery “each” function to work with all ul.tab instances.
Inside the first each create the CSS identifier text (mentioned above) "tab_content_" + n. To explain, n is the count variable of the ul instance starting at 0 (zero). Then, add that to the “tab_contents” array using the JS array push method. Finally, use a nested jQuery each to find the clickable tab content for each ul.tab instance baed on the href value of the “A” tag.
All that is left is to initiate the JQuery Tools – Tabs plugin on each ul.tab instance with $(ul).tabs("." + tab_contents[n]). Then for semantics append the tab_contents CSS identifier to the current ul instances as well as “tabs_active”. The “tabs_active” class allows for unique CSS styling when JS is enabled versus disabled.
Over the last few years I have fallen in love with Billlable to keep track of my time when working on various freelance projects and/or at work. I was excited to get an e-mail form Mike Zornack (the developer behind this great product) announcing ProfitTrain as a major update to Billable. BTW Mike it looks amazing; anyways, here is Mike’s e-mail announcement:
Billable becomes ProfitTrain
In a few weeks we will be releasing the next major version of
Billable. With this release the product is getting a new name.
It will now be known as ProfitTrain. This release is considered
ProfitTrain 2.0 and should be available soon.
ProfitTrain Open Beta
As we finalize the release we are offering an early sneak peek
via an open beta. The purpose of this beta is to help us catch
any remaining bugs and make the final release go as smoothly as
possible. If you are interested in participating there is more
info on our forums: http://forums.clickablebliss.com/viewtopic.php?id=940
When I first came across this issue a month or so ago this was a new problem with not much information out there to help figure out what was going on. As a result, I spent 3 to 4 days tracking down the problem and feel I should share my knowledge.
The Issue – Compatibility View
In short, the issue has to do with the new IE8 Compatibility View feature (the IE7 rendering engine within IE8) and users who choose the “Express Setup” option when first running IE8. The only other option to pick from is Custom Setup; thus, one can assume that 9 times out of 10 Express will be picked. Unfortunately, the PayPal issue lies with Express Setup for it enables Compatibility View by default by turning on an option called “Include updated website lists from Microsoft” (to see this option go to the Tools Menu > Compatibility View Settings); below is a screen shot of this (click the image to enlarge):
Microsoft tells developers that this option downloads monthly to each IE8 client to tell the application which websites/domains need to be rendered in Compatibility View. I located this file and opened it with Excel and it showed that PayPal made it on this list during IE8 beta testing. As a result, if (1) the aforementioned option is enabled/checked and (2) you are validating the HTTP_USER_AGENT (like you should); your customers will experience log out issues when returning from PayPal during your checkout process. Reason being, users will return from PayPal with an IE7 User Agent instead of the IE8 User Agent due to compatibility view.
The Solution
Sadly, there is no easy solution. I tried to making IE8 Emulate IE7 with no success. Knowing that most secure web applications will check the HTTP_USER_AGENT (the cause of the problem) you have to find a way to fix it. Some e-commerce solutions allow you to disable the HTTP_USER_AGENT check but in reality that makes website is less secure. The best solution is to be honest with your customer by providing a dialog (use the IE conditionals comment tags) that informs them of the issue and what they should do; for example (click the image to enlarge):
I was unsure if the dialog would work; but I can say that since adding it to a handful of the e-commerce sites I have had zero support tickets; whereas, there were daily support requests before.
Google Team Members have been working on a new open source JavaScript library called AxsJax. The intent of the library is to help web developers improve upon accessibility and usability within web2.0 projects. It does this by utilizing the new WAI-ARIA specification. Check out the tutorial/demo:
An article talking about how logos are the single biggest representation of a brand and there common placements within web design (Read the full article).
