jQuery, Internet Explorer, and another dumb Object Expected Error

Ran into another frustration today and thought I would share.

I have been using jQuery, but needed MooTools also.  Added MooTools, but didn’t realize that my contact form hadn’t been working for a week!  In a panic, I quickly reviewed all the changed I had made in the past week, especially those that would have had any affect on my contact form.  I remembered MooTools.  That was it.  I had to change the namespace for jQuery so MooTools and jQuery wouldn’t fight each other.

I did that by simply adding the following code after my jQuery and MooTools includes:

<script type=”text/javascript”>
var $j = jQuery.noConflict();
</script>
Now, instead of making jQuery calls with just $, I had to use $j.  No big deal.
But now, I noticed another error I was getting that I must not have seen before.  In Internet Explorer, I was getting a wonderful, glorious, object expected error.  I enabled Script Debugger and it pointed me to Character 3 of a jQuery call.
$j(……
In my case, would have been an open parentheses.  What the heck?!
After much searching on Google, I finally ran across a blog that led me to the answer: http://www.scriptingblog.com/javascript-and-ajax/jquery/object-expected-error-in-ie6-ie7-and-ie8/78
I was including my jQuery like this:
<script type=”text/javascript” src=”/jquery.js” />
I changed it to this:
<script type=”text/javascript” src=”/jquery.js”></script>
Refreshed Internet Explorer, made this post, and went to bed.
Hopefully someone else sleeps well tonight now.
Advertisements

Link image buttons with CSS

Works with Chrome, Internet Explorer 8, Firefox, Safari

I couldn’t find a good tutorial online to do this with, so I finally sat down and figured it out myself. I wanted a way to easily add an image background to my links to make them look like image buttons, but I didn’t want to use forms and I didn’t want to have a static image. I wanted a button that would expand correctly if I had longer text .

Step by Step

First things first, open up you html page and put the following text in the <body> tag somewhere:
<a href=”www.allebrum.com” class=”blueButton”>Learn More</a>
Next, download these three images and upload them to your “images” directory. (Right-click and “Save As…”)  
Now add the following CSS to the <head> tag of your html file.

<style type=”text/css”>

.blueButton {
display:inline-block;
height:24px;
background:url(“/images/blue-button_02.png”) repeat-x;
position:relative;
}
.blueButton:before{
display:block;
height:24px;
width:11px;
position:absolute;
left:-11px;
top:0px;
background:url(“/images/blue-button_01.png”) no-repeat;
content:’ ‘;
}
.blueButton:after{
display:block;
height:24px;
width:11px;
position:absolute;
right:-11px;
top:0px;
background:url(“/images/blue-button_03.png”) no-repeat;
content:’ ‘;
}

</style>

Your html page should look like this now:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS Image Buttons</title>

<style type=”text/css”>

.blueButton {
display:inline-block;
height:24px;
background:url(“/images/blue-button_02.png”) repeat-x;
position:relative;
}
.blueButton:before{
display:block;
height:24px;
width:11px;
position:absolute;
left:-11px;
top:0px;
background:url(“/images/blue-button_01.png”) no-repeat;
content:’ ‘;
}
.blueButton:after{
display:block;
height:24px;
width:11px;
position:absolute;
right:-11px;
top:0px;
background:url(“/images/blue-button_03.png”) no-repeat;
content:’ ‘;
}

</style>

</head>
<body>

<a href=”www.allebrum.com” class=”blueButton”>Learn More</a>

</body>
</html>

You should get something that looks like this: 

And that’s how you do it.  Now everytime you assign to a link with the class=”blueButton”, it has a nice button image background.