Negin Nicki
Negin Nicki

Reputation: 143

how to include java script when you have ajax and css?

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"/>

Upvotes: 2

Views: 138

Answers (4)

Samuel Edwin Ward
Samuel Edwin Ward

Reputation: 6695

Traditionally you would reference both the jQuery javascript file and your own javascript file from the HTML file. Putting an HTML script tag inside your javascript file is not going to work correctly.

If you really want to only include one script element in the HTML file, it should be possible to use this code to inject the jquery code from that file:

document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>');

However, this technique does not have much to recommend it in this case.

Upvotes: 1

edhedges
edhedges

Reputation: 2718

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.

Upvotes: 3

sedran
sedran

Reputation: 3566

you can't write tag inside a .js file. you should call jquery inside index.html, too.

Upvotes: 2

Austin
Austin

Reputation: 6034

You do not need to wrap your js in <script> tags if it is in a .js file.

Also, you cannot use html tags in your javascript file. This script tag belongs on your html file, ordered like so:

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

JS files have only js

Upvotes: 1

Related Questions