View Example Here

This is one of the first small scripts I wrote with jQuery way back when. It has been slightly modified over time, but the basis of how it works is the same.

The method for this requires slightly specific HTML. The “trigger” should be placed before the “container” to open in the DOM. Here is the HTML from my example:

<a class="trigger" href="#">July</a>
<ul>
	<li><a href="#">Post 1</a></li>
	<li><a href="#">Post 2</a></li>
	<li><a href="#">Post 3</a></li>
	<li><a href="#">Post 4</a></li>
	<li><a href="#">Post 5</a></li>
	<li><a href="#">Post 6</a></li>
</ul>

My example also includes class names on the UL tags. But this is only for styling and is not required for the script to work. Here is the javascript from the example:

$(document).ready(function(){
	$("a.trigger").click(function () {
		$(this).next().animate({
			 height: 'toggle', opacity: 'toggle'
		}, "slow");
		$(this).toggleClass("opened");
	});
	return false;
});

And that’s it in a nutshell. My example shows multiple levels done with this script. But remember that this is only a starting point for more of your own custom scripts. I just wanted to get you thinking. Enjoy!

Finally, it’s done.  This is proof that I haven’t been completely ignoring the blog.  It has taken quite a bit of time to finish version 2 of the site, and now that it’s done I can get back to writing more content. 

I plan to write about all the plugins and scripts I used in the new build.  Including all the personal tweaks I had to make to WordPress in the process and all the additions to the site in general.  I learned some interesting things that I can share. There is also the whole re-design aspect to talk about which will probably be kept separate from the technical side.

Anywho, it’s done….mostly.  There are actually some additions I already have planned.  But it’s just not time for those things yet.  Feel free to celebrate with me by leaving a comment.

If you haven’t yet, you should go check out the 2008 exhibition from Desktopography. It’s a great package to refresh your desktop collection. They have a few in there that look great on dual monitors as well.

So, it has been four months since my last post. Since then, this site has actually gone through a lot. It was hacked (always upgrade your WordPress), went through a long process of “getting things back online”(please leave comments if there are still broken links) and bombarded by spam comments(which is just plain annoying).

The four months has also consisted of good things though. I’ve been busy with side work. And I have been working on a new design for this blog which I hope to have finished soon.

That’s about it. It’s good to write a post again. Now I just need to make myself keep doing it. It’s all about discipline.

There was an interesting article I found about a new possible trend in web design.  The author calls this trend, which is based on designs that incorporate design elements of space and/or nebula-ish light effects,  ”out of this world.”  Here is a short quote:

“The last theme I noticed a lot of designers implementing was a wood grain theme, where the background would be some sort of wood texture and often you would see the text over rectangles with lowered opacity. This theme is still all over the place, but now I’m starting to see a lot of websites with this space theme.”

Check out the article for yourself.  It is a good read, with plenty of pretty pictures.  Err, I mean, examples. Enjoy.

“As a series of 100 mini-tests, Acid3 has already been found to expose flaws in all tested browsers, including Internet Explorer, Firefox, Opera, and Safari. WaSP hopes that Acid3 will prove useful to browser makers during the development of future versions of their products.”

Now I’m wondering how IE8 will handle it after their big announcement about passing Acid2. Maybe we will find out soon…

“Our initial thinking for IE8 involved showing pages requesting “Standards” mode in an IE7’s “Standards” mode, and requiring developers to ask for IE8’s actual “Standards” mode separately. We made this decision, informed by discussions with some leading web experts, with compatibility at the top of mind.

In light of the Interoperability Principles, as well as feedback from the community, we’re choosing differently. Now, IE8 will show pages requesting “Standards” mode in IE8’s Standards mode. Developers who want their pages shown using IE8’s “IE7 Standards mode” will need to request that explicitly”

In case you havent been keeping up, many people disagreed with the “initial thinking” by the IE8 team(including myself). This new direction, in my opinion, is the correct one. Read on for yourself, and feel free to leave your thoughts/comments below.

• Windows XP - Firefox 2.0.0.12
• Windows XP - IE 7
• Windows XP - IE6 (standalone version)
• Mac OS X (10.4.11) - Firefox 2.0.0.12
• Mac OS X (10.4.11) - Safari 3.0.4

Let me make one thing clear before I show the code and give an example: I believe that if you reach a point where you need to “hack” Safari, then there is something wrong with your code, not with Safari.  With that said, we have all had those late nights before something is due and need a quick fix.  And thus, I give you the new Safari CSS hack:

#tester:first-of-type { background:green }

Now, I know what you’re thinking, but even though it says first-of-type it will apply to all elements of a given class name, not only the first one.  On a sad note, it is only a matter of time until all other browsers support this pseudo-class.  So for those of you who want a little extra insurance on your hack, feel free to mix it with the previous Safari CSS hack I have posted like so:

/*/*/html*#tester:first-of-type {background:green;}/* */

As always, please leave a comment with your browser and OS versions along with your result to the test example. Thanks.

View Example Here