Jquery not working - webmaster?


First-time web designer here, just set up a site for my music, zircona.net with ipage as the hosting company. I wrote some jquery for my site (mouseover and mouseleave for the buttons), but it’s not working. I contacted ipage about it, and this was their response:

“The issue is causing due to script. The css file is working fine. I have copied the index files to a test folder and have changed the the background color in ‘index.css’ file. The changes can be seen in http://zircona.net/test/ . I would request you to please contact your webmaster and further verify the issue.”

How do I find out who my webmaster is?

Hi there,

The reason it’s not working is that you have not included the jQuery library anywhere on the page you link to.
Try adding this before your index.js file:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

BTW, your web master is the person who made the page or who looks after and runs the site. In this case it’s probably you.

OK, I put it at the top of my index.js file but the buttons still aren’t changing color - what did I do wrong?

What it seems that you did wrong is to put HTML code in to the JavaScript file.

Hi Paul,

Where are you seeing this?
I was looking at the page http://zircona.net/test/, which when I load it still throws the following error:

Uncaught ReferenceError: $ is not defined

Aha, it takes a bit of creativity to see that, in what he said.

It seems that his test page hasn’t been updated to reflect what he is trying to do.

Doh! I see what you mean now.
It’s early here.

OK, I removed it from my js file and put it in my HTML file - still not working. Do I need to remove one of the links from the HTML page?

(BTW, I am looking at zircona.net, not zircona.net/test)

Hi there,

You currently have (whitespace intentional):

  <link rel="stylesheet" href="index.css" />
  <script type="text/javascript" src="index.js">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">    


Change it to:

  <link rel="stylesheet" href="index.css" />
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="index.js">

See what that does.

The page is blank now - there’s nothing on it.

Oh dear!

I just had a look at the page.
You haven’t closed the second script tag.

Change this:

<script type="text/javascript" src="index.js">

into this:

<script type="text/javascript" src="index.js"></script>

and see if that does the trick.

BINGO. It’s working now, thanks for your help!

No problem. Happy to help :slight_smile:

Now that it’s working, I wanted to make a couple of suggestions regarding the code.

  1. You don’t need multiple $(document).ready calls
  2. You can combine your selectors and reduce the amount of code.

I took the liberty of rewriting index.js:

function getGreeting(date){  var today = date;
  var h = today.getHours();
  if (h > 0 && h < 12){
    message = "Good Morning!";
  }  else if (h >= 12 && h < 17){
    message = "Good Afternoon!";
  }  else {
    message = "Good Evening!";
  return message;

$(document).ready(function() {
  var date = new Date();
  document.getElementById("greeting").innerHTML = getGreeting(date);
  $('.buttons li, .contact, .facebook, .rn').mouseenter(function() {
    $(this).fadeTo('fast', 0.5);
  $('.buttons li, .contact, .facebook, .rn').mouseleave(function() {
    $(this).fadeTo('fast', 1);

Thanks, I’m just using what I’ve learned from Codecademy so far. :slight_smile: