www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: Intro to JavaScript is a nightmare! :(

  1. #1
    Join Date
    Oct 2012
    Posts
    12

    Exclamation Intro to JavaScript is a nightmare! :(

    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

  2. #2
    Join Date
    Nov 2010
    Posts
    978
    Quote Originally Posted by blackjack View Post
    -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?

  3. #3
    Join Date
    Oct 2012
    Posts
    12
    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.

  4. #4
    Join Date
    Nov 2010
    Posts
    978
    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

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    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.

  6. #6
    Join Date
    Oct 2012
    Posts
    12
    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

  7. #7
    Join Date
    Oct 2012
    Posts
    12
    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...

  8. #8
    Join Date
    Oct 2012
    Posts
    6
    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.
    Last edited by rekkanize; 10-17-2012 at 09:49 PM.

  9. #9
    Join Date
    Oct 2012
    Posts
    6
    ... and I can't type.

  10. #10
    Join Date
    Oct 2012
    Posts
    12
    Hmmm. That didn't change anything. :S Still nothing works.

  11. #11
    Join Date
    Oct 2012
    Posts
    6
    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.

  12. #12
    Join Date
    Oct 2012
    Posts
    12
    Oh but with the code I have, shouldn't the thumbnails become fullsized when clicked?

  13. #13
    Join Date
    Oct 2012
    Posts
    6
    No, that's another function all together. This code just loads them into the array for ready use in the other function.

  14. #14
    Join Date
    Oct 2012
    Posts
    12
    HOLY COW!
    I'm guessing you actually somewhat understand this class... lol

  15. #15
    Join Date
    Oct 2012
    Posts
    6
    I understand programming. This is pretty much the same.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles