Archive for the ‘Uncategorized’ Category

Tutorial – CSS And jQuery/Ext Trap Door Navigation

Thursday, January 27th, 2011
Tutorial – CSS And jQuery/Ext Trap Door Navigation

Dual library action

I’ll be showing you how to do a trap door navigation, which I’m sure has been done before. But I’ll be showing you how to do it in jQuery AND Ext. Why? Because I had to do it in both at work. A trap door navigation is basically a two image system where the ‘li’ gets one image, and the ‘a’ tag gets another so that as the link expands, the image grows with it. When you rollover each navigation item, the images then change.

Why thought can’t you do this with just CSS? You could try like I did using something like ‘li:hover’, but the problem occurs on when the images actually change on rollover. There are issues with the ‘li’ image changing because the ‘a’ tag is on top and that is what you are rolling over. Javascript is used then to correct the issue. Check out the result:

View Demo

(more…)

Sass Rocks! Over Complicating Your CSS Doesn’t

Tuesday, October 19th, 2010
Sass Rocks! Over Complicating Your CSS Doesn’t

Unless you are careful of course

So I’m in the middle of redesigning/rebuilding my main site, as you would know if you are keeping up with me here, and I am using Sass (SCSS syntax). I love it so far. There is a lot you can do to save you time during the build. There is also the “This new crap I’m using is awesome! I’m going to do this and this and this…”, which can get you in trouble. What kind of trouble you ask? The kind that over complicates your CSS of course. Stop talking and read please! Jeez, I’ll tell you how you can easily do that.

Think before you leap

A day after starting my build using this awesome technology, and no it isn’t new, but it is still fairly new to me. Syntactically Awesome Stylesheets has some cool features that you immediately want to dive into. Variables are the easiest, and it is kind of hard to abuse those. Mixins though, that is where I got into trouble. A good example, which you might have seen in my last post is a mixin I was using for ‘font’. Seemed like a great idea at the time! Let’s shorten that CSS so that I only have to type in the properties that will feed the mixin. What could be wrong with that? Well, technically nothing, but it also wasn’t helping me and I was just adding to the confusion with a completely stupid mixin (at least in this case). Here is what I am talking about:

(more…)

The Basics of CSS3 Transitions and Transforms

Thursday, October 7th, 2010
The Basics of CSS3 Transitions and Transforms

Let’s talk about support

First off, we know for a fact that Safari and Chrome support Transitions, because we’ve all been using one of them to see the cool crap people have been doing. FireFox 4 will support it and they keep adding to it all the time. IE9, as of what I have read, will not. They are still missing a lot of other things, so this is not surprising. But since it is still too early to tell, who knows what the final product will have. The main thing to know is, if you haven’t started getting your CSS3 chops down, you should start. It won’t be long before we are using it on a regular basis. Personally, I use quite a few, but transitions is one that I have stayed away from.

(more…)

Firefox 4 Beta Review – A quick look

Wednesday, August 18th, 2010
Firefox 4 Beta Review – A quick look

Spooooooon!

If you are not using Spoon, well…you should. It’s what I use to test in any freakin’ browser. I’ve wrote about it before, so go check it out. Anyway, Spoon’s Browser Sandbox added Firefox 4 Beta, IE9 Preview, and Chrome 6 Beta to its list. I had to take a look at FF4 Beta just to see what all the hype was about. Let’s talk about what I was able to see, shall we?

(more…)