Intro to JavaScript is a nightmare! :(

[blackjack]

http://sweb1.dmit.nait.ca/~adoberstein1/DMIT218/index

This is the html, I am only permitted to change the javascript and there are a few things I need to do that I cannot figure out how to do.

-Corresponding full size images for the thumbnails must be preloaded when the application starts

-When a thumbnail is clicked, the corresponding full size image will be shown in the fullsize-image img element with an appropriate alt attribute value (same as the file name e.g. fullsize1)

-The comment control button should read Show Comments
When the full size image is hovered over with the mouse the corresponding description for the image should be displayed in the description div

-The descriptions are provided in an array in the assign1.js file and correspond in order
E.g. descriptions[0] -> thumb1.jpg

-The description div should disappear when the mouse is not hovering on the full size image

-Clicking the Show Comments button should display comments made on the image (if any have been posted) and the value of the button should change to Leave a Comment

-Bonus [2 marks]: Display in the comment area a message if there are no messages for the current image
Clicking the Leave a Comment button should bring up the comment form

-Bonus [3 marks]: prevent the image from changing when the form is displayed

-Comments should be added as li elements within the existing comments ul element

-Comments may only be posted with a valid by (required) name and comment (required) content

-Provide form validation feedback (error messages) so mistakes can be corrected

-Ensure that the error messages are placed in the designated div and that the message colour is red (use the style property for this task)

-The format for displaying posted comments is as follows:
Jon Doe on Oct 3, 2012 said: I love this picture sooooo much!
Be sure the that current date is displayed

-If a comment is successfully submitted it should immediately appear in the comments area

-If the cancel button is clicked, reset and hide the form

-Comments must persist when they are posted

-Comments that have been left must be visible when for any image on consecutive views

[xelawho]

-Corresponding full size images for the thumbnails must be preloaded when the application starts
-When a thumbnail is clicked, the corresponding full size image will be shown in the fullsize-image img element with an appropriate alt attribute value (same as the file name e.g. fullsize1)
-The comment control button should read Show Comments
When the full size image is hovered over with the mouse the corresponding description for the image should be displayed in the description div
-The descriptions are provided in an array in the assign1.js file and correspond in order
E.g. descriptions[0] -> thumb1.jpg
-The description div should disappear when the mouse is not hovering on the full size image
-Clicking the Show Comments button should display comments made on the image (if any have been posted) and the value of the button should change to Leave a Comment
-Bonus [2 marks]: Display in the comment area a message if there are no messages for the current image
Clicking the Leave a Comment button should bring up the comment form
-Bonus [3 marks]: prevent the image from changing when the form is displayed
-Comments should be added as li elements within the existing comments ul element
-Comments may only be posted with a valid by (required) name and comment (required) content
-Provide form validation feedback (error messages) so mistakes can be corrected
-Ensure that the error messages are placed in the designated div and that the message colour is red (use the style property for this task)
-The format for displaying posted comments is as follows:
Jon Doe on Oct 3, 2012 said: I love this picture sooooo much!
Be sure the that current date is displayed
-If a comment is successfully submitted it should immediately appear in the comments area
-If the cancel button is clicked, reset and hide the form
-Comments must persist when they are posted
-Comments that have been left must be visible when for any image on consecutive views

these are the few things you cannot figure out how to do?

[blackjack]

Unfortunately yes, not so few I guess. My profs teaching style is making us watch him type code... Not so good with the explaining. And I have never used JavaScript before.

[xelawho]

yeah, that makes it tough. Can you at least show what you have tried? Few people aroubd here do entire homework assignments - most tend to help out on specific isssues

[JMRKER]

A lot of the requirements can be done with JS, but a few are not possible with JS alone.

Other that what the instructor provided, what have YOU done to solve your problem?

Suggestion: Pick one topic (or common topic) at a time and solve it before moving on the the next.

[blackjack]

The bit of javascript on there is all my code, but it doesn't seem to be doing anything. I don't think it will until the alt values are in place. I have asked other classmates and googled this but the only thing I can find is how to create this sort of img gallery using other programs. :S

[blackjack]

function preloadImages() {

// Create an Image object to preload images with
imageObj = null;

// Create an array of images to be preloaded
images = new Array();

images[0] = "images/fullsize1.jpg";
images[1] = "images/fullsize2.jpg";
images[2] = "images/fullsize3.jpg";
images[3] = "images/fullsize4.jpg";

// Preload each image in the array by creating a new image and
// setting the src property
for (var i = -1) {
imageObj = new Image();
imageObj.src = images[++i];
}
}


this is the closest I've gotten and it still isn't working at all...

[rekkanize]

I happen to be in your class and am just starting the assignment.

From what I can tell, your syntax in the for loop is wrong. It should be:

for(var i = 0; i < images.length; i++)
{
imageObj.src = images[i];
}

Also, don't assign your imageObj in the for loop do it at the top of the function.

[rekkanize]

... and I can't type.

[blackjack]

Hmmm. That didn't change anything. :S Still nothing works.

[rekkanize]

There shouldn't be anything visible. It's just loading the images in the background. Put a simple alert in the for loop, it should display 4 alerts.

[blackjack]

Oh but with the code I have, shouldn't the thumbnails become fullsized when clicked?

[rekkanize]

No, that's another function all together. This code just loads them into the array for ready use in the other function.

[blackjack]

HOLY COW!
I'm guessing you actually somewhat understand this class... lol

[rekkanize]

I understand programming. This is pretty much the same.