Jared Heinrichs

You are here: Home / Archives for Programming

By Leave a Comment

jQuery–When to use Camel-Cased values in animate?

I didn’t realize that you didn’t HAVE to use normal CSS syntax in jQuery! By default you only have to use single apostrophes when the value has hyphen in the name. If I’ve completely lost you let’s look at some code.

jQuery

image

Please note lines  3 and 4. The CSS values “margin-left” and “margin-top” are surrounded by ‘s. Most people don’t know that there is a shorthand method that I think looks much better (IMO) and saves you a few keystrokes. Using “camelCased” coding you can change the jQuery code into this:

jQuery

image

As you can see you can remove the ‘ and the – but you HAVE to uppercase the second word’s first initial. I like using this because not only does it save keystrokes I also find it also helps me with closing the ‘s! Hopefully this trick will help you with jQuery’s most versatile function.

As a bonus I figured I through in another example:

jQuery

image

This time you cane see that I used “paddingLeft” instead of “padding-left”. This code basically will take the paragraph element and slide it to the right 200px when you hover over it. It will slide back to it’s original spot when you take the mouse off.

By Leave a Comment

z-index background issues

This post will cover how I worked around some z-index background issues I was having. In a recent project I was working on I wanted to use a “div” underneath a bunch of list items/anchor tags. I wanted to see the “div” above the rest of the items but below List items. While it’s pretty trivial doing it if NON of the items in the DOM tree have a background applied to them, I needed to use a background color.

*NOTE* – Before I go any further you might be asking why I didn’t just us a background color using CSS for each item. I couldn’t use the easy way because I eventually I wanted to slide the “highlight” from the left to where ever the person was holding their mouse.

Here’s an example of what I wanted to make:

image

Unfortunately I kept getting something like this:

image

Let’s look at the code to see how this issue can be resolved quite simply.

XHTML

z-index background issue 01

CSS (That didn’t work)

z-index background issue 02

CSS (That did work. I’ve highlighted the line that fixed the issue)

z-index background issue 03

So basically I always thought the z-index on HTML elements was “0”/Or not set. This doesn’t seem to be the case. It looks like they are always set to 1. Another really important thing to include is the “position: relative”. If you were to excluded that from the code it wouldn’t work either.

Filed Under: CSS

By 1 Comment

Firebug warning Unexpected token in attribute selector: ‘!’

Much like the error: “unknown pseudo-class or pseudo-element ‘sizzle’” this error: “Unexpected token in attribute selector: ‘!’” is caused by NOT having jQuery 1.4.2 loaded. This error started when you started using jQuery 1.4.4

image

Again. If you go back to version 1.4.2 you won’t see the error “Unexpected token in attribute selector: ‘!” anymore.

Hope this helps.

By Leave a Comment

Firebug warning unknown pseudo-class or pseudo-element ‘sizzle’

This is the issue with open source that pisses me off. I was running 1.4.2 of jQuery  and then upgraded to 1.4.3. Well it turns out versions 1.4.3 makes Firefox through these errors. The jQuery guys are blaming the FireFox guys. The FireFox Guys are blaming the jQuery guys.

image

image

If you are getting the error: “unknown pseudo-class or pseudo-element ‘sizzle’” then just revert back to jQuery 1.4.2!

Please note this has NOT been corrected in jQuery 1.4.4. The error in 1.4.4 is:

Unexpected token in attribute selector: ‘!’.

By Leave a Comment

How console.log can cause issues in Internet Explorer

This post will cover why you should never leave console.log in your html coding.

I use console.log when I use FireBug. I didn’t realize how amazing the program is for troubleshooting until I started using it on a daily bases. With it you can quietly tell the browser what the variable values are etc. Internet Explorer however does not like console.log unless you are using FireBug Lite (a javascript version of FireBug).

If you are getting weird results on your page and you know you used console.log to troubleshoot them, go through the html code and look for console.log. You might just find that the problem happens because you left a line in your code.

Here’s an example where I left console.log in the code and the effect ended up failing in Internet Explorer.

How to use a variable with CSS and jQuery

Try searching this site!