Jump to content




Recent Status Updates

  • Photo
      15 Nov
    duzamucha

    Hi, I am final year Interior Design Student from University of Huddersfield. I am currently working on my final major project which is going to be linked to coding. I was hoping that you could help me with my research. I have prepared a short survey, it would be a massive help if you could fill it in for me. It takes less than 2 minutes to complete, I promise. Here is the link: https://www.surveymonkey.com/s/73XLJKK Thank you so much in advance!

View All Updates

Developed by TechBiz Xccelerator
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,526 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.






Powered by binpress