Hello Rocket Scientists.
Chapter 1 - page 10... Ready Bake Code.
Typed the code in as directed (NOTEPAD) looks good - feeling pleased. Saved as html - no sweat. Opened in IE8 - nothing. What ???
Is that what it's supposed to do - nothing?
Am I missing something or have I not paid enough (£30.99 for the book) to glimps some secret ingredient?
What can I say: it's not working for me because???
Please fill in the missing words.
Cheers: In the dark as ever.
jquery goes to DOM-village - code below.
<!DOCTYPE html>
<html><head> <title>jquery goes to DOM-village</title>
<style>
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;}
#move_up #move_down #color #disappear {
padding: 5px;}
<style>
<script src=scripts/jquery-1.5.2.min.js></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Colour</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make Me Do Stuff!</div>
<script>
$(document).ready(function() {
$("#move_up").click(function() {
$("#change_me").animate({top:30},200);
});//end move up
$("#move_down").click(function() {
$("#change_me").animate({top:500},2000);
});//end move down
$("#color").click(function() {
$("#change_me").css("color", "purple");
});//end color
$("#disappear").click(function() {
$("#change_me").toggle("slow");
});//end disappear
});//end doc ready
</script>
</body>
</html>
O'Reilly Forums: Chapter 1 - What Now? - O'Reilly Forums
Page 1 of 1
Chapter 1 - What Now? Code good - results bad
#1
Shell Shocked 
- New Member
-
- Group: Members
- Posts: 2
- Joined: 18-November 11
Posted 19 November 2011 - 10:36 AM
#2
djphinesse
- New Member
-
- Group: Members
- Posts: 7
- Joined: 10-February 10
Posted 19 November 2011 - 06:06 PM
Hi! Just looked at your code and the style tag is not closed. That shouldn't have an affect on the jQuery but I would run through and make sure there are no other errors in the code.
Shell Shocked, on 19 November 2011 - 10:36 AM, said:
Hello Rocket Scientists.
Chapter 1 - page 10... Ready Bake Code.
Typed the code in as directed (NOTEPAD) looks good - feeling pleased. Saved as html - no sweat. Opened in IE8 - nothing. What ???
Is that what it's supposed to do - nothing?
Am I missing something or have I not paid enough (£30.99 for the book) to glimps some secret ingredient?
What can I say: it's not working for me because???
Please fill in the missing words.
Cheers: In the dark as ever.
jquery goes to DOM-village - code below.
<!DOCTYPE html>
<html><head> <title>jquery goes to DOM-village</title>
<style>
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;}
#move_up #move_down #color #disappear {
padding: 5px;}
<style>
<script src=scripts/jquery-1.5.2.min.js></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Colour</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make Me Do Stuff!</div>
<script>
$(document).ready(function() {
$("#move_up").click(function() {
$("#change_me").animate({top:30},200);
});//end move up
$("#move_down").click(function() {
$("#change_me").animate({top:500},2000);
});//end move down
$("#color").click(function() {
$("#change_me").css("color", "purple");
});//end color
$("#disappear").click(function() {
$("#change_me").toggle("slow");
});//end disappear
});//end doc ready
</script>
</body>
</html>
Chapter 1 - page 10... Ready Bake Code.
Typed the code in as directed (NOTEPAD) looks good - feeling pleased. Saved as html - no sweat. Opened in IE8 - nothing. What ???
Is that what it's supposed to do - nothing?
Am I missing something or have I not paid enough (£30.99 for the book) to glimps some secret ingredient?
What can I say: it's not working for me because???
Please fill in the missing words.
Cheers: In the dark as ever.
jquery goes to DOM-village - code below.
<!DOCTYPE html>
<html><head> <title>jquery goes to DOM-village</title>
<style>
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;}
#move_up #move_down #color #disappear {
padding: 5px;}
<style>
<script src=scripts/jquery-1.5.2.min.js></script>
</head>
<body>
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="color">Change Colour</button>
<button id="disappear">Disappear/Re-appear</button>
<div id="change_me">Make Me Do Stuff!</div>
<script>
$(document).ready(function() {
$("#move_up").click(function() {
$("#change_me").animate({top:30},200);
});//end move up
$("#move_down").click(function() {
$("#change_me").animate({top:500},2000);
});//end move down
$("#color").click(function() {
$("#change_me").css("color", "purple");
});//end color
$("#disappear").click(function() {
$("#change_me").toggle("slow");
});//end disappear
});//end doc ready
</script>
</body>
</html>
This post has been edited by djphinesse: 19 November 2011 - 06:13 PM
#3
Shell Shocked
- New Member
-
- Group: Members
- Posts: 2
- Joined: 18-November 11
Posted 20 November 2011 - 03:48 AM
Hello dj - thanks for your input. I'm going blind from looking at that piece of code and I certainly didn't spot that. It's actually worked. It's amazing how something so small can spoil a whole bloody day.
Thank you very much bro! Nice one.
Thank you very much bro! Nice one.
#4
LongLiveCHIEF
- Active Member
-
- Group: Members
- Posts: 19
- Joined: 20-July 10
Posted 21 February 2012 - 06:59 PM
Shell Shocked, on 20 November 2011 - 03:48 AM, said:
Hello dj - thanks for your input. I'm going blind from looking at that piece of code and I certainly didn't spot that. It's actually worked. It's amazing how something so small can spoil a whole bloody day.
Thank you very much bro! Nice one.
Thank you very much bro! Nice one.
That wouldn't have caused the jQuery to stop. My best guess is that you didn't have the jQuery library loaded in a folder path relational to where you were storing your file.
The book examples use the downloaded version of jQuery for every chapter, but you can also link to Google hosted version of jQuery. Go here for that: http://code.google.com/apis/libraries/
Share this topic:
Page 1 of 1
