tags:

views:

576

answers:

6
Q: 

<h2> background-color is not changing with Jquery?

I have an h2 element with an id of title and I have the following script:

<script type="text/javascript">
$(document).ready(function(){

   $("#title").css("background-color","red");   

)};
</script>

The background-color is not changing though and I can't figure out why?

<html>
<head>
<title>Table Sorter</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablsorter.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$("#title").css("background-color","red");  

)};
</script>
</head>

<body>
<h2 id="title">Table Sorter</h2>
</body>
</html>

<script type="text/javascript">
$(document).ready(function()
{
    $("#title").css("background-color","red");
    $("#myTable").tablesorter();
}
);
</script>
+1  A: 

Can you get it working without jQuery? Try:

document.getElementById("title").style.backgroundColor = "#F00";

instead of your current script. If this does not work, check that you have well-formed HTML.

UPDATE: now that you've posted your HTML, I can see that you need to use a script tag instead of a link tag to import jQuery

Eric Wendelin  2009-03-18 18:25:58
I changed it to script but it still does not work.
Xaisoft  2009-03-18 18:28:33
My folder structure is the html file is in a folder called Jquery and the Jquery file is int a subfolder called js under the Jquery folder.
Xaisoft  2009-03-18 18:29:09
Ah, then you need to remove the beginning slash in the src attribute if your jquery import script.
Eric Wendelin  2009-03-18 18:31:48
I just removed teh started slash, but is still not changing the background-color
Xaisoft  2009-03-18 18:32:39
Well my best advice then is to find out the path to jquery really is. I'm guessing that it is not being loaded
Eric Wendelin  2009-03-18 18:41:11
it worked after i removed the other script tag, but I am not sure why I can't have two script tags
Xaisoft  2009-03-18 18:42:30
I'm guessing that something in the tablesorter is overridding something in jQuery.
Eric Wendelin  2009-03-18 19:03:49
hmm, it's weird because there is a sample right on the tablesorter.com website.
Xaisoft  2009-03-18 20:06:42
Does the sample also use jQuery 1.3.2?
Eric Wendelin  2009-03-18 21:08:22
+1  A: 

Replace

<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>

with

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"/>
Chetan Sastry  2009-03-18 18:29:17
Tried that, but it still not working.
Xaisoft  2009-03-18 18:29:48
Are you getting a javascript error?
Chetan Sastry  2009-03-18 18:34:16
I am getting no javascript errors.
Xaisoft  2009-03-18 18:35:49
@Chetan — Not all browsers allow self-closing script tags. You need to use "<script …></script>" instead.
Ben Blank  2009-03-18 18:40:59
Ben Blank is right. Self-closing script tags are the devil. http://tiny.cc/U6dXa
Josh Stodola  2009-03-18 23:28:50
+6  A: 

Replace

<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>

with

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

You also have a syntax error in your jQuery function at the closing brackets. They should be

$(document).ready(function(){
  $("#title").css("background-color","red");
});

If that still does not fix your problem, then put an alert in there like this...

$(document).ready(function(){
  alert("Howdy!");
});

If you do not see the alert message, then your jQuery script is not loaded, which means the relative path in the SRC attribute is incorrect.

Josh Stodola  2009-03-18 18:34:08
I put the </script> and that didn't work and I changed the bracket order and that didn't work.
Xaisoft  2009-03-18 18:37:23
@Xiasoft: then your jquery is not loaded.
SilentGhost  2009-03-18 18:39:32
Gah, beaten to it. >_<
strager  2009-03-18 18:41:02
A: 

Ok, I figured it out and I don't know why it is was happening. Below the JQuery script tag, I had another script tag:

<script type="text/javascript" src="/js/jquery.tablsorter.min.js"/>

When I removed the above, it worked. But I don't know why?

Xaisoft  2009-03-18 18:39:58
Please edit your original question. Do not make an answer to post and update. Thanks.
strager  2009-03-18 18:41:34
because code in tablesorter produced an error, I guess
SilentGhost  2009-03-18 18:41:47
The reason it worked when you removed that <script> tag is because your browser does not recognize you are closing the <script> tag. It reads the rest of your document up until the </script> as if it were Javascript code IF the document (in src) didn't load (which it probably did, which is
strager  2009-03-18 18:43:04
hmm, I just downloaded tablesorter from tablsorter.com
Xaisoft  2009-03-18 18:43:26
likely the reason you didn't get any Javascript errors with it included). Simply add a </script> to the end and remove the / in /> to fix it.
strager  2009-03-18 18:43:52
strager, I just removed /> and replaced it with </script> and it still didn't work.
Xaisoft  2009-03-18 18:47:59
@Xaisoft, That's odd. Do you have a live copy of your site which can be examined (or a full HTML example)?
strager  2009-03-18 18:49:14
I will update the html on my original question.
Xaisoft  2009-03-18 18:49:52
Update the html.
Xaisoft  2009-03-18 18:52:19
Ok, removing the starting slash now made it work.
Xaisoft  2009-03-18 19:16:40
+2  A: 

Here you go. Other people have pointed out some small problems you had, such as using a link tag where you need a script tag, etc. This code works for me:

<html>
  <head>
    <title>Table Sorter</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#title").css("background-color","red");
      });
    </script>
  </head>
  <body>
    <h2 id="title">Table Sorter</h2>
  </body>
</html>

It looks like there was a typo in your code at the end of your $(document).ready section where you had )}; instead of });. If you use Firefox you can open up the error console and view any Javascript errors or warnings.

nascent.cognition  2009-03-18 18:43:07
Thanks, I got it working by removing the other script tag.
Xaisoft  2009-03-18 18:46:37
+2  A: 

It seems you've made another typo:

<title>Table Sorter</table>
                     ^^^^^

Replace table with title:

<title>Table Sorter</title>
strager  2009-03-18 18:54:58
I changed that, can't believe it missed that, but it still is not giving the h2 a background color. It only gives it a background color when I remove the other script tag.
Xaisoft  2009-03-18 18:57:20
@Xaisoft, Then something is wrong with your script. Post the URL of the script so we can investigate.
strager  2009-03-18 18:58:11
I downloaded the plugin from here : http://tablesorter.com/docs/
Xaisoft  2009-03-18 18:59:23
@Xaisoft, I am unable to reproduce the bug: http://liranuna.com/strager/b/h2-so.html
strager  2009-03-18 19:09:36
I got it to color by doing removing the beginning slash, but I can't get the table to sort that is provided on the webpage. Maybe I am doing the Jquery script wrong, I will update the script portion.
Xaisoft  2009-03-18 19:19:58

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript