Jquery not working - webmaster?

**zircona1** · Mar 28, 2013 12:52

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?

**Pullo** · Mar 28, 2013 14:50

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:

HTML Code:

<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.

**zircona1** · Mar 28, 2013 20:11

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?

**paul_wilkins** · Mar 28, 2013 21:17

Originally Posted by zircona1

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.

**Pullo** · Mar 29, 2013 00:18

Hi Paul,

Originally Posted by paul_wilkins

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

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:

Code:

Uncaught ReferenceError: $ is not defined

**paul_wilkins** · Mar 29, 2013 00:20

Originally Posted by Pullo

Where are you seeing this?

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

Originally Posted by zircona1

I put it at the top of my index.js file

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

**Pullo** · Mar 29, 2013 00:25

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

**zircona1** · Mar 29, 2013 08:36

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)

**Pullo** · Mar 29, 2013 08:38

Hi there,

You currently have (whitespace intentional):

HTML Code:

<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:

HTML Code:

<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.

**zircona1** · Mar 29, 2013 09:40

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

**Pullo** · Mar 29, 2013 13:00

Originally Posted by zircona1

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:

Code JavaScript:

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

into this:

Code JavaScript:

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

and see if that does the trick.

**zircona1** · Mar 29, 2013 13:24

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

**Pullo** · Mar 29, 2013 13:35

No problem. Happy to help

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

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

I took the liberty of rewriting index.js:

Code JavaScript:

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

**zircona1** · Mar 29, 2013 15:30

Thanks, I'm just using what I've learned from Codecademy so far.

User Tag List

Thread: Jquery not working - webmaster?

Thread Tools

Display

Jquery not working - webmaster?

Bookmarks

Bookmarks

Posting Permissions