Jump to content

brooke_theperson

Members
  • Posts

    73
  • Joined

  • Last visited

Everything posted by brooke_theperson

  1. So I am just working on this project in notepad. Where would I find error messages?
  2. So I am working on a simple client database type program. I have a clients array that stores new clients that all have a first name, last name, phone number, etc... I also want the user to be able to add notes about their clients' family. So, one of the parameters of the client function is an array called familyNotes. Here is the code for this: function client(firstName, lastName, phoneNumber, address, hireDate, frequency, cost, entry, familyNotes) { this.firstName = firstName; this.lastName = lastName; this.phoneNumber = phoneNumber; this.address = address; this.hireDate = hireDate; this.frequency = frequency; this.cost = cost; this.entry = entry; this.familyNotes - familyNotes; } var laura = new client("laura", "simmerman", "1111111111", "laura rd", "01/01/01", "weekly", "100", "garage-1111"); var jana = new client("jana", "simmerman", "2222222222", "jana rd", "01/01/01", "weekly", "100", "garage-2222"); var clients = [laura, jana]; However, I do not know if the familyNotes array is working properly. I have a function that prompts the user to add a note about the family of a client, then adds the note to the array. Here is the code for this function: function addFamilyNotes(i) { var note = prompt("Add a note about the family: "); document.getElementById("familyNotes").innerHTML += "<li>" + note + "</li>"; clients[i].familyNotes.push(note); } I later have a function that is supposed to alert the length of the familyNotes array, however it doesn't alert anything currently. Here is the code: function familyNotesAlert(i) { alert(clients[i].familyNotes.length); } Does anyone know what I am doing wrong? Why is the alert not showing, and is anything actually being added to the familyNotes array?
  3. So I fixed this. I now see that it must be ==, but now I can click the button and it switches once and won't work after the second click? This is my new uncomplete script: <script> var slide = 0; $(document).ready(function(){ $('#rightarrow').click(function(){ slide = slide + 1 if (slide == 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } if (slide == 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>gravity forms protostar</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } if (slide == 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>fusion starts and a star forms</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } }); $('#leftarrow').click(function(){ slide = slide - 1 if (slide == 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css('border', '2px solid black').css('color', 'black'); } }); }); </script>
  4. Here is my code. I have two arrows and they go to the next 'slide' and previous 'slide'. For someone reason clicking the buttons doesn't 'switch slides'. Is there anything wrong? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <style> body{ background-color: black; } h3{ color: white; font-family: corsiva; text-align: center; } .maindiv{ height: 450px; width: 800px; border: 2px solid white; margin-left: auto; margin-right: auto; margin-top: 50px; } #leftarrow{ height: 40px; width: 100px; border: 2px solid black; margin-top: 140px; margin-left: 100px; color: black; text-align: center; font-size: 20px; background-color: black; } #rightarrow{ height: 40px; width: 100px; border: 2px solid white; margin-top: -140px; margin-left: 600px; color: white; text-align: center; font-size: 20px; background-color: black; position: absolute; } #image{ height: 250px; width: 300px; border: 2px solid white; margin-top: -150px; margin-left: 250px; } #explanation{ height: 100px; width: 80%; margin-left: auto; margin-right: auto; border: 2px solid white; margin-top: 20px; } </style> <script> $(document).ready(function(){ var slide = 0; $('#rightarrow').click(function(){ slide = slide + 1; if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); $('#leftarrow').click(function(){ slide = slide - 1; if (slide = 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css("color", "black").css("border", "2px solid black"); } if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); </script> <body> <h3><u>Life Cycles of Stars</u></h3> <div class = 'maindiv'> <button id = 'leftarrow'>Previous</button> <div id = 'image'></div> <button id = 'rightarrow'>Next</button> <div id = 'explanation'>Animation</div> </div> </body> </html>
  5. So I have multiple divs each containing a list and the headers in each div, above the list are all at different y places. The lists with the most info have higher y positions and therefore are higher up on the page. How do I make it so the headers are in line with eachother? (If you copy this code, and add a heading and stuff you can open it up in firefox and see what im talking about) <style> h2{ text-decoration: underline; margin-top: -30px; } .anke{ display: inline-block; margin-left: 60px; font-family: corsiva; font-size: 20px; } .father{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .mother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .brother{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .sister{ display: inline-block; margin-left: 120px; font-family: corsiva; font-size: 20px; } .others{ display: inline-block; margin-top: 20px; margin-left: 120px; font-family: corsiva; font-size: 20px; } </style> <body> <div class = 'anke'> <h2>Anke</h2> <ul> <li>Main Character</li> <li>Doesn't fit in with family</li> <li>Isn't abused</li> <li>Isn't loved</li> <li>Loves to play volleyball</li> <li>Is smart</li> </ul> </div> <div class = 'father'> <h2>Father</h2> <ul> <li>Abusive</li> <li>Moody</li> <li>Mood Swings</li> <li>Loves his wife</li> <li>Often drunk</li> </ul> </div> <div class = 'mother'> <h2>Mother</h2> <ul> <li>Sweet Mother</li> <li>Loves her children</li> <li>Takes care of husband</li> <li>Secretly scared</li> </ul> </div> <div class = 'sister'> <h2>Sister</h2> <ul> <li>Name is Yaicha</li> <li>Older Sister</li> <li>Likes makeup</li> <li>Constantly abused</li> </ul> </div> <div class = 'brother'> <h2>Brother</h2> <ul> <li>Name is Darren</li> <li>Older Brother</li> <li>Constantly abused</li> </ul> </div> <div class = 'others'> <h2>Other Characters</h2> <ol> <li>Angelina <ul> <li>Annoying 'friend' of Anke</li> <li>Very innocent</li> <li>Doesn't have a dad</li> <li>Likes Anke's dad (as a father)</li> </ul> </li> </ol> </div> </body>
  6. Thank you so much for all of your help. The whole time I was thinking of the '.body' div as the 'homepageappend' div, when really it is the larger div in which everything is nested. Also, thanks for making me figure it out with hints. Really helped.
  7. I'm sorry but I'm still very confused. Could you fix the code and highlight what you fixed about it? I am really struggling.
  8. So I changed my code to this, and it still doesn't work? $('.body').on('mouseenter', '.aimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>"); }); $('.body').on('mouseleave', '.aimg', function(){ $('.imagesource').empty(); }); $('.body').on('mouseenter', '.bimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw</p>"); }); $('.body').on('mouseleave', '.bimg', function(){ $('.imagesource').empty(); }); $('.body').on('mouseenter', '.cimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70</p>"); }); $('.body').on('mouseleave', '.cimg', function(){ $('.imagesource').empty(); }); $('.body').on('mouseenter', '.dimg', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ</p>"); }); $('.body').on('mouseleave', '.dimg', function(){ $('.imagesource').empty(); });
  9. Is this right, or should I be using the .on() somewhere else, because it still isn't working? $('.aimg').on('mouseenter', function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>"); }); $('.aimg').on('mouseleave', function(){ $('.imagesource').empty(); });
  10. Hey so I have this code, and I start out with my homepage on the screen. If I hover over some images they glow and the source shows up beneath them. Later, if I click the homepage button on my sidebar, it shows the homepage again. This time when I hover over the images they glow, but don't show the image source. Is there something wrong with this code? Please help <script>$(document).ready(function(){ $('.homepage').click(function(){ $('.body').empty(); $('.body').append("<div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div>"); $('img').mouseenter(function(){ $(this).css('border', '2px solid yellow'); }); $('img').mouseleave(function(){ $(this).css('border', '2px solid black'); }); $('.aimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.aimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.bimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.bimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.cimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.cimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.dimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.dimg').mouseleave(function(){ $('.imagesource').empty(); }); }); $('img').mouseenter(function(){ $(this).css('border', '2px solid yellow'); }); $('img').mouseleave(function(){ $(this).css('border', '2px solid black'); }); $('.aimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC</p>"); }); $('.aimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.bimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.bimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.cimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.cimg').mouseleave(function(){ $('.imagesource').empty(); }); $('.dimg').mouseenter(function(){ $('.imagesource').append("<p style = 'font-size: 20px; font-family: corsiva; margin-left: 50px;'>Image Source: [insertimagesource]</p>"); }); $('.dimg').mouseleave(function(){ $('.imagesource').empty(); });});</style> <body> <div class = 'page'> <div class = 'header'>Hacking the School Computer System</div> <div class = 'sidebar'> <button class = 'homepage'>Homepage</button> <button class = 'page2'>Page 2</button> <button class = 'page3'>Page 3</button> <button class = 'page4'>Page 4</button> </div> <div class = 'body'> <div class = 'homepageappend'>You have the ability to hack into the school computer system. You can change people's grades. Would you change your own? Why or why not? What if you could change the grade for a basketball player who has a scholarship to play for a big university?<img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrkD_SMT5KnbOn-ZuFgCJgdndRePsPgp_wrS_CdW0mBJYThUZC' class = 'aimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTOyg8Kshr-w4NSa_mTmCbKhmGP6sZRK3Dp8HfOXMk_gk8OhwBmkw' class = 'bimg'></img><img src = 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjWRNFkzImlS4mz8J7bBefmHvNmNuRTd7Oe7gMcvVS7xDm0U70' class = 'cimg'></img><img src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRcOIwNJ1mj627ScV38Dkz_jHFHyFz9IKBa0Lnm611bUBWp_wQ' class = 'dimg'></img></div> <div class = 'imagesource'></div> </div> <div class = 'footer'>Created by Brooke Simmerman</div> </div></body>
  11. So, I do not have a specific code, but I just want to understand collision. I guess an example that I am thinking of is agar.io. I have read many examples about collision, or how in agar.io the cells eat eachother, and it just doesn't make sense. Could anybody please explain it to me, and use it in an extremely simple code. I am very much a beginner. I have learned about html, javascript, and jquery using codecademy, but I am not experienced!! Could someone please give me a simple explanation of how to make 'cells eat eachother' using a simple code. Again, I am a beginner! Thanks for any help.
  12. So, I have a code that asks a question, and if the answer in correct, it says correct in the div. If incorrect, it says incorrect. For some reason it always says incorrect even if my answer is correct. Please help, is there anything wrong with this code? //*If players 1 turn if (player == "1"){ //*Asks question var trivia = prompt(questions_obj.question); //*If answer is corerct do stuff if (trivia === questions_obj.answer){ document.getElementById('correctincorrect').innerHTML = "Correct"; $('#character1').animate({left: "+=75px"}, 500, function(){ //*If player gets to finish they win if (player1total == "8"){ var winner1 = alert("Player 1 is the winner!"); $('#character1').remove(); $('#character2').remove(); $('#character3').remove(); $('#player1score').remove(); $('#player2score').remove(); $('#player3score').remove(); $('#player1header').remove(); $('#player2header').remove(); $('#player3header').remove(); $('#player1board').remove(); $('#player2board').remove(); $('#player3board').remove(); } }); //*Adds up players score player1total = player1total + 1; document.getElementById("player1score").innerHTML = player1total; } if (trivia === questions_obj.answer2){ document.getElementById('correctincorrect').innerHTML = "Correct"; $('#character1').animate({left: "+=75px"}, 500, function(){ //*If player gets to finish they win if (player1total == "8"){ document.getElementById('correctincorrect').innerHTML = "Player 1 is the winner!"; $('#character1').remove(); $('#character2').remove(); $('#character3').remove(); $('#player1score').remove(); $('#player2score').remove(); $('#player3score').remove(); $('#player1header').remove(); $('#player2header').remove(); $('#player3header').remove(); $('#player1board').remove(); $('#player2board').remove(); $('#player3board').remove(); } }); //*Adds up players score player1total = player1total + 1; document.getElementById("player1score").innerHTML = player1total; } if (trivia != questions_obj.answer || trivia != questions_obj.answer2){ document.getElementById('correctincorrect').innerHTML = "Incorrect"; }}
  13. Hey, so I have a favor to ask. See, I learned to code on codecademy and I use the website to make my 'codebits'. Here, my code is working perfectly, but if I write the code in notepad and save it as an html, none of the jquery or javascript activates. I was wondering if someone could check out my code and figure out why. I don't think you have to go through the whole code. Just look at the script tags and the skeleton of the code, see if you can figure out why it won't work properly when saved as an html file. It would be a HUGE help! Thanks! <!DOCTYPE html><html><head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script></head><style></style><script></script><body> <div class = "insideborder"> <div class = "header"> <div id = "home">Go Home</div> <h3 class = "title">Civil War</h3> </div> <div class = "sidebar"> <button id = "before">Before</button> <button id = "during">During</button> <button id = "after">After</button> <button id = "leaders">Leaders</button> <button id = "battles">Battles</button> <button id = "soldiers">Soldiers</button> <button id = "women">Women</button> <button id = "medicine">Medicine</button> <button class = "game">Play Game</button> </div> <div class = "body"></div> <div class = "footer"></div> </div></body></html> Based on this, is there any reason why the script would not work when saved as an html file?
  14. Ok, so I know python specifically isn't taught onw3schools, but maybe somebody knows a little about it. I am trying to use raw input instead of prompts, but it isnt working, can anyone tell me why this won't work? $('#before').click(function(){ $(".body").empty(); hello = raw_input("Hello: "); }); "Hello: " never shows up on the screen. Please help
  15. I can't believe I didn't notice! It worked thank you!
  16. So I have this function that firsts asks the player, which player they are, then asks them a question. if they get it right their score increases by one, and an alert pops up that says correct. The problem is, after you answer a question, an alert pops up that says correct, and then another question pops up. No matter what your answer is nothing happens afterwards. Basically after everything happens, another question comes up but it shouldn't. Can anyone tell me if there is anything wrong with my code that might make this happen? function question(question, answer) { this.question = question; this.answer = answer;}var a = new question("What letter comes after 'a'?", "b")var b = new question("What letter comes after 'b'?", "c")var allquestions = [a, b];var player1total = 0;var player2total = 0;var player3total = 0; function ask(){ var num = Math.floor(Math.random() * allquestions.length); var questions_obj = allquestions[num]; var player = prompt("What player are you?" + " (Hint: use your player number not your name.)"); if (player = "1"){ var trivia = prompt(questions_obj.question); if (trivia === questions_obj.answer){ player1total = player1total + 1; document.getElementById("player1score").innerHTML = player1total; var correct = alert("That is correct!"); $("#character1").animate({top: "-=100px"}, 500); } else{ var incorrect = alert("That is incorrect!"); } } if (player = "2"){ var trivia = prompt(questions_obj.question); if (trivia == questions_obj.answer){ player2total = player2total + 1; document.getElementById("player2score").innerHTML = player2total; var correct = alert("That is correct!"); } else{ var incorrect = alert("That is incorrect!"); } } if (player = "3"){ var trivia = prompt(questions_obj.question); if (trivia == questions_obj.answer){ player3total = player3total + 1; document.getElementById("player3score").innerHTML = player3total; var correct = alert("That is correct!"); } else{ var incorrect = alert("That is incorrect!"); } }}
  17. Hey, so I have this code and when apple falls from a tree, if it touches a person the screen should say true, if it doesn't touch a person it says false. But, nothing is happening. Please help. Here is my code: <script> function collision($div1, $div2) { var x1 = $div1.offset().left; var y1 = $div1.offset().top; var h1 = $div1.outerHeight(true); var w1 = $div1.outerWidth(true); var b1 = y1 + h1; var r1 = x1 + w1; var x2 = $div2.offset().left; var y2 = $div2.offset().top; var h2 = $div2.outerHeight(true); var w2 = $div2.outerWidth(true); var b2 = y2 + h2; var r2 = x2 + w2; if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; return true; }$(document).ready(function(){ window.setInterval(function() { $('#result').text(collision($('#div1'), $('#div2'))); }, 200);});<p>Colliding? <span id="result">false</span> P.S. I didn't include the entire code, just what is important to my question.
  18. Also, when the apple does hide, all of the other elements hide as well.
  19. Also, I tried using remove() but it didn't work either.
  20. Okay, so I am driving myself crazy. I have a stick figure character that moves right and left. I also have a play button. When the button is clicked an apple falls from a tree. When it gets to the bottom it is supposed to dissapear. But it does not. Please, help. Are there any openings or mistakes in this code? <!DOCTYPE html><html><head> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><style>.character{ height: 150px; width: 70px; margin-top: -151px; margin-left: 300px; position: absolute;}body{ background-image: url("https://lh3.googleusercontent.com/-Q4hNQoLkZEw/VUeBIKRItxI/AAAAAAAAAEc/LIGJGi42At4/w426-h239/tree.png"); background-size: 800px 550px; background-repeat: no-repeat;}.head{ width: 50px; height: 50px; background-color: rgba(); border: 3px solid black; border-radius: 100%; margin-top: -40px; ;}.body{ height: 80px; width: 3px; background-color: black; ;}.leftarm{ height: 50px; width: 3px; background-color: black; transform: rotate(-60deg); margin-top: -100px; ;}.rightarm{ height: 50px; width: 3px; background-color: black; transform: rotate(60deg); margin-top: -50px; ;}.leftleg{ height: 50px; width: 3px; background-color: black; transform: rotate(-140deg); margin-top: 43px; ;}.rightleg{ height: 50px; width: 3px; background-color: black; transform: rotate(140deg); margin-top: -50px; ;}.lefteye{ height: 6px; width: 6px; background-color: black; margin-top: 15px; margin-left: 15px; border-radius: 100%;}.righteye{ height: 6px; width: 6px; background-color: black; margin-top: -6px; margin-left: 28px; border-radius: 100%;}.mouth{ border-radius:0 0 50% 50%; background-color: black; height: 10px; width: 20px; margin-top: 10px; margin-left: 14px;}.begin{ height: 80px; width: 80px; background-color: rgba(); border: 3px solid blue; margin-top: -115px; margin-left: 650px;}.leaves{ width: 100%; height: 100%; background-color: rgba();}.apple{ position: absolute;}.applemain{ height: 30px; width: 30px; background-color: red; border-radius: 100%; margin-top: -5px;}.applestem{ height: 10px; width: 4px; background-color: brown; margin-left: 20px; transform: rotate(10deg); margin-top: -7px;}.appleleaf{ height: 15px; width: 10px; transform: rotate(50deg); background-color: green; margin-left: 20px; border-radius: 70%;}</style><script> $(document).ready(function() { $(document).keydown(function(e) { if (e.keyCode == 37) { $('.character').animate({left: '-=50px'}, 200); } if (e.keyCode == 39) { $('.character').animate({left: '+=50px'}, 200); } }); $(".begin").click(function(){ $(".leaves").append("<div class='apple'><div class='appleleaf'></div><div class='applestem'></div><div class='applemain'></div></div>"); $(".apple").animate({top: "+=400px"}, 1500); $(".leaves").hide("<div class='apple'><div class='appleleaf'></div><div class='applestem'></div><div class='applemain'></div></div>"); }); });</script><body> <div class = "leaves"></div> <div class = "character"> <div class = "head"> <div class = "lefteye"></div> <div class = "righteye"></div> <div class = "mouth"></div> </div> <div class = "body"></div> <div class = "leftarm"></div> <div class = "rightarm"></div> <div class = "leftleg"></div> <div class = "rightleg"></div> </div> <div class = "begin">Play</div></body></html>
×
×
  • Create New...