Question

when I run my javascript in my index.html it works properly but I wanted to seperate it as a js file
so I created aram.js and then I added my code to it
I also included this line to index:

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

aram.js:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

            $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'115px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });

I think the problem is that It can’t find the css I have style.css in a css folder which is included in index.html like this line:

  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

Answer 1

You need to have the script tag to include jquery above your javascript include file. These two includes should be in your html.

Like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="aram.js"></script>

This will then load jquery first so your javascript (which uses jquery) can be executed.