•  09-07-2023
  •  | 
  •  

سؤال

I'm new to html, just started doing it at school, and I'm trying to make this website just to test a few things. For some reason, it only works on JSFiddle. I am just trying to make the button glow on click. Here is the code:

<!DOCTYPE html>
<head>
<style media="screen" type="text/css">
    img {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    div#info_box {
        height: 221px;
        width: 221px;
    }
</style>
<title>Test</title>
</head>
<body background="http://fc07.deviantart.net/fs70/f/2014/113/f/b/rain_by_matt74997-d7fn2e1.gif">
<div id="trigger">
    <img src="http://i.imgur.com/8QLgeGP.png" onmouseover="this.src='http://i.imgur.com/BmjwX9A.png'" onmouseout="this.src='http://i.imgur.com/8QLgeGP.png'" />
</div>
<div id="info_box" style="display:none">
     <img src="http://i.imgur.com/b3Holdt.png" alt="glow" height="221" width="221">
     <span class="custom info">
</span>

</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('div#trigger').click(function() {
            //Get info_box
            var info = $('div#info_box');
            //Fade the box in during 1 sec, show it for 5, and let it fade out again
            info.fadeIn(1000).delay(10).fadeOut(1000);
        });
    });
</script>

I tried using google chrome, internet explorer, looking through other answers, but I'm still not sure how to get it to work.

Google chrome says Uncaught Reference Error: $ is not defined but I'm not sure what to do with that.

If more information could help please ask which and I'll put it up.

هل كانت مفيدة؟

المحلول

Please include Jquery to the top of the scripts as many plugin use it.

http://jquery.com/download/

نصائح أخرى

Add this link to <head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

You need jquery reference when using $

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top