Jump to content




Recent Status Updates

  • Photo
      18 Aug
    KodeKool

    When faced with a wall of errors and no hope to fix them, remember the following "Programs always do what you tell them to, and seldom what you want them to, but eventually you'll run out of things that can go wrong and it'll just work. and that's the secret to good programming."

    Show comments (2)
  • Photo
      11 Aug
    Error

    Should I be practicing programming every day? I feel if I don't, I'll get instantly rusty or something.

    Show comments (4)
View All Updates

Developed by Kemal Taskin
Photo
- - - - -

Why does this very basic jQuery code not work?

jquery javascript

Best Answer moss, 06 March 2013 - 05:52 AM

Alright I figured it out. It was a css issue not a jQuery issue. The div had static positioning, therefore the 'left' property had no effect.

 

Man that took way longer to figure out than it should have. Oh well, it's a process.

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
4 replies to this topic

#1 moss

moss

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 05 March 2013 - 05:47 PM

I just started a test project to try out using jQuery. I'm building a site on my hard drive and will later transfer it onto my hosting account. I literally just started and decided I should test out some very basic code to make sure everything was working properly before getting too deep into it. So I put together a little piece of code to make a square div animate 100px to the right when clicked. Of course it didn't work. I can't figure it out. I've tested it on jsFiddle as well, but no luck there either.

 

Also I've tried putting the code in an external *.js file, in my header, and in the body.

 

I'm sure there is something very obvious I'm missing, but I'm new to jQuery and javascript.

Any help would be greatly appreciated.

 

Here is the code:

jQuery:

$(document).ready(function() {
   $('div').click(function() {
      $('div').animate({left:'+=100px'},500);
      });
});

html:

 

 

<!DOCTYPE html>
<html>
<head>

<base href="C:\xxx\html\" target="_blank" />

<!--jQuery-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--Stylesheet-->
<link rel="stylesheet" type="text/css" href="stylesheet.css" />


<script type="text/javascript">
$(document).ready(function() {
   $('div').click(function() {
      $(this).animate({left:'+=10px'},500);
      });
});
</script>
</head>
<body>
      <div></div>
</body>
</html>

css:

 

 

div {
  width:50px;
  height:50px;
  background-color:#444444;
} 


#2 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3,289 posts

Posted 05 March 2013 - 08:42 PM

I can point out a mistake in the base href declare, you need to specify it's a local address and use proper declaration, like this :

 

 
<base href="file:///C:/xxx/html/" target="_blank" />
 


#3 moss

moss

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 06 March 2013 - 04:12 AM

Thank's for pointing that out. The base tag actually worked the way it was, but I think it was causing it to slow down the loading process.



#4 moss

moss

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 06 March 2013 - 05:24 AM

Alright, I downloaded the jQuery library and pointed to that instead of the google api. Then I changed the jQuery script to:

 

 

$(document).ready(function() {
    $('div').click(function() {
      $('div').css("background-color","#880044");
    });
});

This worked, which is a good sign, but the original .animate script still doesn't work.

Any ideas why not?



#5 moss

moss

    CC Newcomer

  • Member
  • PipPip
  • 10 posts

Posted 06 March 2013 - 05:52 AM   Best Answer

Alright I figured it out. It was a css issue not a jQuery issue. The div had static positioning, therefore the 'left' property had no effect.

 

Man that took way longer to figure out than it should have. Oh well, it's a process.