Jquery not working - webmaster?

JavaScript
1

Hi,

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?

2

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.

3

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?

4

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

5

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
6

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.

7

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

8

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)

9

Hi there,

You currently have (whitespace intentional):

<head>
  <title>ZIRCONA.NET</title>
  <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">    


    </script>
</head>

Change it to:

<head>
  <title>ZIRCONA.NET</title>
  <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">
</head>

See what that does.

10

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

11

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.

12

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

13

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);
  });
});
14

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