Admin Forum:JavaScript help needed

I want the following to happen using JavaScript/jQuery: I predict the code would look something like this for the first bullet point: -- Sam Wang (talk) 11:13, July 15, 2012 (UTC)
 * When id "back" clicked, replace id "projects" with "list-projects"
 * When id "project-1" is clicked, replace id "projects" with "info-1" (repeat this for project-2 and info-2 and so up to 18)
 * Whilst replacing the original thing with the one to replace with when an id is clicked, make the original one fade out, and the new one fade in
 * I want this to be ajax, so please do not reload the page to do it


 * That's a good start. You can use load to fetch data from the server via AJAX. And you can achieve that visual effect with fadeIn and fadeOut. --


 * Thanks! -- Sam Wang (talk) 22:42, July 15, 2012 (UTC)


 * How to combine the fadeIn and fadeOut functions together with the load function? -- Sam Wang (talk) 22:57, July 15, 2012 (UTC)


 * Here was a test code I wrote, but as you can see here, it didn't work:

Sam Wang (talk) 23:03, July 15, 2012 (UTC)

You forgot the parentheses on the second line and there is no element with the ID project-1. --


 * I've just fixed that and added return false to the script, but it won't even load the page, and how to combine the fadeIn and fadeOut styles with the load function? -- Sam Wang (talk) 23:35, July 15, 2012 (UTC)


 * There is no page entitled "/wiki/Happylander/Project:Gamiacs", Sam. --


 * Thanks! However, how about the fading styles. I don't know how to combine it with the load funtion -- Sam Wang (talk) 23:52, July 15, 2012 (UTC)


 * Fade the #list-projects container out, then load the new contents and fade it back in. Both - fadeOut and fadeIn - would be inside the click-handler, but only the fadeIn would be inside the load-handler. --

I really need an example. How should I add it to the following code? Also, now I have another question: whilst it is loading the page I want to load, can I make it display a image (bit like what you did for the InfoWidgets)? -- Sam Wang (talk) 00:30, July 16, 2012 (UTC)


 * In addition to that, it somehow won't hide the id "back" when it starts. I've added some more to the code located in the Common.js file, and can you have a look please? -- Sam Wang (talk) 00:43, July 16, 2012 (UTC)


 * Try this:




 * (adjusted to further adjustments to the code) The code


 * doesn't even work with ajax! Also, the back id seems to have a problem &mdash; I want to hide it when the document has finished loading, but it displays it when the page loads, and hides it when the page is loaded -- Sam Wang (talk) 00:59, July 16, 2012 (UTC)


 * There's a syntax error in your script. Sam, you need to learn how to find syntax errors! If you check the browser's error console, it will clearly tell you where the error is. It also wouldn't hurt to get an editor that does error-checking in the background and alerts you to mistakes.
 * The function in the load-handler is a parameter of the load-handler. The closing parenthesis before it, is wrong. --

Google Chrome's console is hard to understand, and I don't have good access to other browsers, so can you please tell me what I've done wrong? Sam Wang (talk) 01:33, July 16, 2012 (UTC)


 * I already did: "The function in the load-handler is a parameter of the load-handler. The closing parenthesis before it, is wrong." --


 * Can you fix the entire code for me please? -- Sam Wang (talk) 11:23, July 16, 2012 (UTC)


 * I fixed the syntax error. --


 * It fades the list out instantly! -- Sam Wang (talk) 12:19, July 16, 2012 (UTC)


 * You should fix the back-button first. It's inside of $('#list-projects') and gets overwritten when the new content has loaded. --

How to fix it, and I need to use that! -- Sam Wang (talk) 13:12, July 16, 2012 (UTC)


 * Alright, Sam. You win. I'll write a complete script for you. But only under one condition: You never ever ask me for help again. --