CODEWITHSUNDEEP
javascripthtmlcss
James
James

Reputation: 1925

Why isnt my javascript working?

All my code seems to work except my javascript am I doing something wrong? Thanks Im only a beginner!

I am trying to make the background change when the mouse goes over the 'Tags' tab but it wont do it? What is going on?

HTML:

<html>
<head>
<script language="JavaScript" type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");  
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});


// This changes color when clicked, removed old color box. 
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});-->
</script>
<link href="arg.css" rel="stylesheet" type="text/css" />

</head>
<body>


<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>

</body> 
</html>

CSS:

.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}

.tab-mouseover {
background: #bdbdbd;
}

.tab-selected {
background: #c0c0c0; 
}

Thanks!

James

Upvotes: 1

Views: 217

Answers (4)

Some Guy
Some Guy

Reputation: 16210

You haven't added your library (jQuery, I think) as a source here. Add it like this:

<script src='http://foo.com/bar/library.js'></script>

If you are, indeed using jQuery, you can directly add the following code to make it work:

<script src='http://code.jquery.com/jquery-1.6.4.js'></script>

Note that the above means you are depending on the availability of the jQuery website and not your own.

As per James' comment on this, yes, you can scrap the jQuery completely, but I'd recommend you to learn JavaScript yourself instead of copying code from a website. If you want to change the background color of the field onmouseover, use code like this:

<div onmouseover="this.style.backgroundColor='#bdbdbd';" onmouseout="this.style.backgroundColor='white';">Search</div>

Or

<div onmouseover='this.className="tab-mouseover"' onmouseout='this.className=""'>Search</div>

Or without JavaScript and just simple CSS:

<style>
.tab-mouseover:hover{
background: #bdbdbd;
}
</style>
<div class='tab-mouseover'>Search</div>

I can't answer the latter part, because I don't understand the use of deleting and then adding the same class to an element onclick.

Upvotes: 3

Gazillion
Gazillion

Reputation: 4812

Try this:

$('.tab-item').hover(
    function() {
        $(this).addClass('tab-mouseover');
    },
    function() {
        $(this).removeClass('tab-mouseover');
    }
);

$('.tab-item').click(function() {
    $('.tab-selected').removeClass('tab-selected');
    $(this).addClass('tab-selected');
});

http://jsfiddle.net/7dDTv/1/

Upvotes: 0

Dancrumb
Dancrumb

Reputation: 27539

Well, first, you haven't included a link to the jQuery library in your code. As a result, your code won't work, wherever you put it.

Second, since your code is in a script element at the head of the document, it will execute before the body of the document has been rendered. You need to put it in a 

$(document).ready(function() {

    /*
     * Your code here
     */
});

block.

Upvotes: 1

Andy
Andy

Reputation: 30135

You're using jQuery but haven't included it. You also need to put your jquery code into the jquery ready event:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// This changes color on mouseover, leaves existing color box.

$(function(){
    $('.tab-item').mouseover(function() {
        $(this).addClass("tab-mouseover");  
    }).mouseout(function() {
        $(this).removeClass("tab-mouseover");
    });


// This changes color when clicked, removed old color box. 
    $('.tab-item').click(function() {
        $('.tab-item').removeClass("tab-selected");
        $(this).addClass("tab-selected");
    });
});
-->
</script>

Upvotes: 4

Related Questions