3

All right, something REALLY frustrating and weird is going on. I have JQuery installed on my server, and I know it's imported correctly because when I run a simple...

$(function() { alert('hello') });

It alerts "hello." However, when I try to use a css selector...

$(".image").css("border","3px solid red");

It does not work! Yes, I'm 100% sure there is something with that class name in the file. Here's the real kicker, when I COPY PASTED my code into a jsFiddle it worked just fine. What gives?!

Vidya Sagar
  • 1,677
  • 3
  • 15
  • 27
Allenph
  • 1,575
  • 23
  • 42
  • are you sure that there is no conflicts of jquery? – Varada Jul 02 '13 at 04:21
  • 1
    Where did you put your code? In a DOM ready? Window load? bottom of the page? In narnia? Im pretty sure it work on the fiddle because it put it in a window load by default. – Karl-André Gagnon Jul 02 '13 at 04:21
  • any error in the browser console – Arun P Johny Jul 02 '13 at 04:22
  • Are you loading jQuery on your page at your site? Does it load? You need something like `` in the head of your page – mplungjan Jul 02 '13 at 04:22
  • check console for error – Ankush Jain Jul 02 '13 at 04:29
  • I'm using `` to import my code, its my understanding that with hTML5 you do not have to add `type="text/javascript"` as Javascript is the default code. I have redownloaded the JQuery file three times, it's being imported inside the two `` tags, where its supposed to go. I've tried running the script inside the body tag, in the head tag, I've tried running it from an external Javascript file, still nothing. – Allenph Jul 02 '13 at 04:29
  • Need to see "your" code, in addition to the jsfiddle, to help you debug (notice how many answers/comments are guessing to some degree? – dmayo Jul 02 '13 at 04:41

3 Answers3

7

Your jsFiddle is set for onload in the upper left of the jsFiddle window. If you set it to "No Wrap - in Head" which simulates code in the <head> tag, then your jsFiddle no longer works.

The onload setting means that jsFiddle doesn't run your javascript until the page has been loaded.

In your real page, you are probably running the javascript too soon before the page has been loaded.

You can either fix that by putting your javascript in it's own .ready() function:

$(document).ready(function(){
    $(".image").css("border","3px solid red");
});

Or, you can make sure the javascript isn't loaded/run until right before the </body> tag which is a simple way to make sure the content of your page is loaded before the script runs.

<body>
Your HTML content here

<script>
// your script here that runs after all of the DOM is parsed
$(".image").css("border","3px solid red");
</script>

</body>

See this answer for more details on placing the <script> tag appropriately.

Community
  • 1
  • 1
jfriend00
  • 580,699
  • 78
  • 809
  • 825
0

Have you test adding inside $(document).ready(function(){}); ?

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
    $(document).ready(function(){
        $(".image").css("border","3px solid red");
    });
</script>
yeyene
  • 7,103
  • 1
  • 18
  • 29
  • Uh, if `$(".image").css("border","3px solid red");` Does not work, then it cannot be used to test the readiness of the file. However, if I use `$(function() { alert('hello') });` inside, yes I do get the alert. – Allenph Jul 02 '13 at 04:34
  • ^ I take that back. It worked. If that worked why can't I just put ` $(".image").css("border","3px solid red");`? That still does not work. – Allenph Jul 02 '13 at 04:38
  • Does not work? pls see here...http://jsfiddle.net/yeyene/mfLt7/2/ – yeyene Jul 02 '13 at 04:40
-2
if u have a internet connection following link useful for you 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

above link put inside a body or before write a script and please verify jquery js file.