SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery not working - webmaster?

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zircona1 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi Paul,

    Quote Originally Posted by paul_wilkins View Post
    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

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Where are you seeing this?
    Aha, it takes a bit of creativity to see that, in what he said.

    Quote Originally Posted by zircona1 View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Doh! I see what you mean now.
    It's early here.

  8. #8
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  10. #10
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page is blank now - there's nothing on it.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by zircona1 View Post
    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.

  12. #12
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BINGO. It's working now, thanks for your help!

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    No problem. Happy to help

    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:

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

  14. #14
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'm just using what I've learned from Codecademy so far.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •