It’s that time of the year again, the A List Apart 2008 Survey is out.It is amazing how fast these weeks have been flying by. I have a couple of “real” blog posts that I have been working on, and I need to finish them up and get them published. Here are a few things that I found interesting in the last week:
After watching the Aurora concept videos, it is great to see something similar already be in development.
Using categories and tags effectively is an integral part to information organization on blogs.
I love that we are comparing presidential candidates based on their websites. Obama wins.
After just redesigning our company website, Jonathan Snook brings up an interesting question on the shelf life of technology.
Ah, long weekends are the best. I got a lot of freelance work done, and I’m hoping to finish up the couple of projects I am working on so that I can redesign my site. Here is what I found interesting this week:
This is a list showing how some nice design decisions have helped these e-commerce sites.
When award-winning design firms design their website, they should let their work be the focus of the site.
Aaron Rester discusses a new way of thinking when developing a site in Mapping Memory: Web Designer as Information Cartographer, and Dave Shea shows us how to add a little “flair” to CSS Sprites with jQuery in CSS Sprites2 – It’s JavaScript Time.
Spam is obviously one of the biggest issues on the web, but are we attacking it incorrectly with captcha? Some think we are: Matt Mullenweg’s answer is to focus on the content rather than the user.
Hopefully I am getting down to the last month of so of doing these weekly round-ups. On my new site, I plan on having an aside section for posting a link and a short blurb. Here are a few links that I found interesting this week:
While there is an abundance of Facebook Apps (and a lot of annoying ones), this is a nice tutorial about creating them.
Dave Shea describes his technique of source control. While using an USB key may not be the most elegant solution, it works for him. Source control is a major issue, and I think we will see more and more elegant solutions in the future.
This is kind of like my post about The 6 Most Important CSS Techniques You Need To Know. So much so that a part of the article was even included.
It seems like more and more these days, JavaScript tabbed interfaces are being used. There are plenty of scripts out there, but I think it is important to be able to do things yourself. A lot of JavaScript “plugins” that you will find online will give you way more than you really need, and you may understand how to use it, but you will not really understand what it is really doing.
First, I thought I would walk through creating a tabbed navigation script with jQuery, and then modifying it so that it works without JavaScript.
If you want to skip ahead, take a look at the sample jQuery tabbed interface.
I’m going to set this up using classes so that it is possible to use this multiple times on a page. There are two different pieces to the markup: the navigation and the actual content for the tabs.
<ul class="tabNav">
<li class="current"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a></li>
</ul>
Pretty straightforward, just an un-ordered list. The JavaScript will accommodate any number of tabs. Notice that the first tab has a class of current. This will be the class to style to show the active tab.
<div class="tabContainer">
<div class="tab current">
…Content for Tab 1…
</div>
<div class="tab">
…Content for Tab 2…
</div>
<div class="tab">
…Content for Tab 3…
</div>
<div class="tab">
…Content for Tab 4…
</div>
<div class="tab">
…Content for Tab 5…
</div>
</div>
Again, pretty straightforward: a container and a div for each of the tabs’ content. A couple of things to note: the first tab content also has a class of current, and the tabs’ content divs need to appear in the same order as the navigation.
I’m not going to explain how I completely style my example, but I will highlight the necessary styles for the tabs to work.
To highlight the active tab, this is what you want to style:
ul.tabNav li.current a { … }
In order to hide all of the tabs’ contents except for the active tab, these are the styles that are necessary:
div.tabContainer div.tab { display: none; }
div.tabContainer div.current { display: block; }
Ok, this is definitely the meat of the post. Since I wanted this to be as generic and simple as possible, I made heavy use of the parent and children selectors.
So to start, we want to add onclick events to the tabs:
$(document).ready(function(){
$('ul.tabNav a').click(function() {
…
return false;
});
});
When each tab is clicked, we want to see which tab was clicked on so that we can show the appropriate content. So we count the previous number of siblings of the parent (the list item) and store it in the curChildIndex variable:
$(document).ready(function(){
$('ul.tabNav a').click(function() {
<strong>var curChildIndex = $(this).parent().prevAll().length + 1;</strong>
…
return false;
});
});
Next, we want to remove the class of current from the currently selected tab, and add the class of current to the tab we just clicked:
$(document).ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
<strong>$(this).parent().parent().children('.current').removeClass('current');
$(this).parent().addClass('current');</strong>
…
return false;
});
});
The final step is to hide the tab content that is currently showing and to show the tab content that matches the tab that was just clicked on. This is where we will make use of the curChildIndex variable and the nth Child Selector:
$(document).ready(function(){
$('ul.tabNav a').click(function() {
var curChildIndex = $(this).parent().prevAll().length + 1;
$(this).parent().parent().children('.current').removeClass('current');
$(this).parent().addClass('current');
<strong>$(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() {
$(this).removeClass('current');
$(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() {
$(this).addClass('current');
});
});</strong>
return false;
});
});
The previous snippet of the code is traversing from the clicked tab ,(this), to the current content that has a class of current, sliding that up, and removing the class of current. Once that is complete, we are selecting the tab content that matches the tab clicked, sliding it down, and adding the class of current.
Take a look at the sample jQuery tabbed interface to see it in action.
Now, that works great, but what about people who don’t have JavaScript enabled? Sure it’s a very small number, but we still want to account for those people.
Most other JavaScript tab scripts use JavaScript to hide the non-active tab content sections or to write in the tabbed navigation, but then you get that flash of changing content. My idea is to use CSS to hide the non active tab content (which I discussed earlier) and pass a parameter into the URL to select which tab to show.
Below is the new code for the tab navigation:
<ul class="tabNav">
<li<?php if(!isset($_GET['tab'])) echo ' class="current"';?>><a href="">Tab 1</a></li>
<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 2) echo ' class="current"';?>><a href="?tab=2">Tab 2</a></li>
<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 3) echo ' class="current"';?>><a href="?tab=3">Tab 3</a></li>
<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 4) echo ' class="current"';?>><a href="?tab=4">Tab 4</a></li>
<li<?php if(isset($_GET['tab']) && $_GET['tab'] == 5) echo ' class="current"';?>><a href="?tab=5">Tab 5</a></li>
</ul>
Basically, I am checking to see if the variable tab is set in the URL, and determining the value of it. I also use the same logic for the tab content. This is the example page with tab 3 displaying. So basically, if the user does not have JavaScript, it would reload the entire page and display the correct tab.
This was just a simple example of jQuery, and the possibilities are endless. Instead of being so quick to use a plugin or someone’s code, try to do it yourself. You will become a much better programmer because of it. Even if you aren’t doing things as efficiently as possible, you will learn something new every time.
";s:10:"bodyBlocks";a:0:{}}i:4;a:6:{s:5:"title";s:24:"Weekly Link Round-Up #44";s:4:"slug";s:23:"weekly-link-round-up-44";s:2:"id";s:3:"192";s:10:"typeHandle";s:4:"blog";s:4:"body";s:908:"Another busy week with freelance, but hopefully I’ll be able to finish them up shortly so I can work more on my redesign/realign. My hope is to finish it before I go to An Event Apart Chicago in October. Just a few interesting things I found this week:
This is an interesting article describing the process of creating the CMS Firerift. Firerift looks interesting, but the website unfortunately doesn’t give enough details.
As Dan has discussed before, you should always use the best possible ampersand. He gives a nice collection of great looking ampersands.
It’s hard to believe that it’s already the middle of August. This week was a bit crazy: managing two freelance projects and getting my company website launched. My CEO agreed that if we got the site launched by Friday, she would send myself and my fellow Front-End Developers to An Event Apart Chicago. So yeah, that’s going to be awesome. Now, here is what I found interesting this week:
Adaptive Path created videos for the Mozilla Labs concept browser series. This whole series was really cool, but I think that the user interaction is a long time from showing up. I also wonder how “non-technical” users would respond to an interface like this.
I posed this very simple question last week, and there was some great discussion that ended up happening.
And this is why I will never be a graphic designer. How do you even do that? So amazing.
I think these are definitely costs that are not really considered when deciding whether to power your site by a CMS, and which CMS to use.
This is an excellent point that Michael brings up. On Twitter, if someone chooses to follow you, but you do not follow them, there is this sense of rejection from the person who decided to follow you. But honestly, they have no idea what your life is like. Maybe you are just so busy, that you only care to follow your closest friends. I think this is something that Twitter and other social networking sites should seriously consider.
When they were writing the specifications for CSS, why didn’t they allow things to be floated center?
I was looking through an old site at work this week, that was developed long before me, and I saw someone tried to do this: float: center. So that got me thinking, why would they include the specification to float left and right, but not center?
Imagine the posibilities…the following are just a couple of simple examples of what could be possible, they are not meant to be used in a production environment.
In this example, I just floated the image to the right, and gave it a -100px right margin (half the width of the image). Then I just added an empty div to the right hand column, floated it left, and gave it a height and width.
This one is really hacky. I absolutely positioned the image, chose a monospaced font, and then added non-breaking spaces so that the image was no longer covering the text.
I think being able to float something in the center could really make pages more interesting. I would be curious to know if there was any specific explanation for why you cannot float to the center.
";s:10:"bodyBlocks";a:0:{}}i:7;a:6:{s:5:"title";s:35:"Hiring Web Designers and Developers";s:4:"slug";s:35:"hiring-web-designers-and-developers";s:2:"id";s:3:"195";s:10:"typeHandle";s:4:"blog";s:4:"body";s:514:"My company, Matrix Group International, is currently looking to hire Web Designers, Web Developers, Python Software Engineers, a Product Manager, and an Executive Assistant to the CEO.
We are located just outside of Old Town Alexandria, VA. We are having an Open House on Friday from 4-7pm. So if you or anyone you know could fill those spots, come join us on Friday.
";s:10:"bodyBlocks";a:0:{}}i:8;a:6:{s:5:"title";s:24:"Weekly Link Round-Up #42";s:4:"slug";s:23:"weekly-link-round-up-42";s:2:"id";s:3:"196";s:10:"typeHandle";s:4:"blog";s:4:"body";s:1086:"I just found out today that if we get our company website launched by Wednesday, our company is going to send myself and the other Front-End Developers to An Event Apart Chicago, so that’s pretty awesome. Just a few links from this week:
After an article last week discussing some of the findings from a survey of the 50 most popular blogs, Smashing Magazine reveals more.
Great collection of web design patterns.
I definitely agree with what Kenny has to say. I feel like there was this huge push for standards a few years ago, and it has really started to slow down. We should not be satisfied! There is still so much more to do.
It’s that time of the year again, the A List Apart 2008 Survey is out.
It only takes a few minutes to fill out, and the data compiled at the end is awesome. I look forward to seeing the results in the next few weeks.
";s:10:"bodyBlocks";a:0:{}}}s:5:"total";i:270;}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.70573500 1736501960";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.67537500 1713205687";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.12493100 1740236466";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.36746500 1735923287";}s:8:"reusable";b:0;}}