jQuery, Internet Explorer, and another dumb Object Expected Error

01 Mar 2010 8 Comments

by senica in Javascript, jQuery Tags: , , , ,

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.

Link image buttons with CSS

01 Mar 2010 Leave a comment

by senica in CSS Tags: , , , , ,

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;
<html xmlns=”http://www.w3.org/1999/xhtml”&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.