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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 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,527
    Mentioned
    84 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 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,527
    Mentioned
    84 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 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
  •