Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Complete Javascript newbie looking for some basic help

    I'm building a website to catalog a history of college football uniforms, and having something like this on several of the pages would be extremely helpful. I've been told that making it in Javascript instead of Flash would be better for my website. I've also been told that it should be relatively easy to write the code for it.

    In short, I want to be able to take the parts of this image and allow viewers of the site to be able to switch between parts to mix and match. There are quite a few teams with six or more possible uniform combinations, so I'd like to be able to do this for the site.

    This would probably be a good way to get my start on learning at least some Javascript basics, so would anyone be willing to help me put this together?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    In Javascript you can do that easily combined with CSS "background-image" and "background-position". I've set up an example here: http://jsbin.com/omote4/2

    Description:
    A div with appropriate width and height is given a background-image. With background-position you determine which part of the background-image will be visible "through" the div. If you change the style.backgroundPosition of that div, you can change which part of the background-image is showing.

    Hint: If you hover your mouse on the above mentioned example page you will see a button "Edit using JS Bin" which will lead you to a view of the source code.

  • Users who have thanked devnull69 for this post:

    Pegasus1935 (04-15-2011)

  • #3
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, two questions: can it be set to continually cycle between the parts, so when the user clicks "next" when viewing the last helmet, it starts at the beginning again?

    Also, would it be possible to be able to cycle through the jerseys, pants and socks separately, but still have them fit together as they do in the image? I'd like it to be relatively seamless like the example I gave. Sorry, I should have mentioned that initially.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    This would not be an easy task. First of all: The parts you describe overlap each other. You would have to separate everything manually. Second: The background of the image is white ... it should be transparent to allow overlapping. So a lot of preparation ...

    But once you achieved that ... it would just be a matter of duplicating the code I gave you and combine it with some CSS positioning/overlapping/z-index techniques. Maybe you should come back after you prepared the image(s)

  • Users who have thanked devnull69 for this post:

    Pegasus1935 (04-15-2011)

  • #5
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    You mean like this?






    I figured it'd be necessary.

  • #6
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, I tried messing around with it a bit, but it didn't work out so well.

    What did I do wrong?

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Ok you're almost done with the preparation ... if you put the "tightest" possible rectangles around the single parts of the image you'll have to make sure that those rectangles don't overlap. Otherwise you would see the overlapping parts when you don't want to.

    Second: For CSS/Javascript you'll have to make sure to match the background-positions, widths and heights to the corresponding image parts. Also the image parts that belong to each other should be equidistant in the image (I think you did that already).

  • Users who have thanked devnull69 for this post:

    Pegasus1935 (04-15-2011)

  • #8
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    Ok you're almost done with the preparation ... if you put the "tightest" possible rectangles around the single parts of the image you'll have to make sure that those rectangles don't overlap. Otherwise you would see the overlapping parts when you don't want to.

    Second: For CSS/Javascript you'll have to make sure to match the background-positions, widths and heights to the corresponding image parts. Also the image parts that belong to each other should be equidistant in the image (I think you did that already).
    Remember, I'm a newbie. What parts of the code do I need to change?

  • #9
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    I am referring to the image you provided originally.

    Code:
    var currhelmetpos = -295;
    This is the offset of the left corner of the first helmet (with a minus sign because it has to be moved 295 pixels to the left)
    Code:
      #helmet {position: relative; width: 154px; height: 78px; background-image: url(http://img.photobucket.com/albums/v189/RXTEWMU/3c6d50d8.png); background-repeat: no-repeat; background-position: -295px 0px; border: 1px dashed #ddd;}
    The width and height must be the width and height of the corresponding image part showing one (pair of) helmets. So for other image parts this would be different of course. Again you see the background-position. The first value "-295" is the same as mentioned above. The second value is the amout of pixels the image has to be moved up to have the respective image part on the top. For other parts of the image it has to be a negative number other than 0px
    Code:
    function nexthelmet() {
      if(currhelmetpos>-760) currhelmetpos -= 155;
      document.getElementById('helmet').style.backgroundPosition = currhelmetpos + "px 0px";
    }
    
    function prevhelmet() {
      if(currhelmetpos<-295) currhelmetpos += 155;
      document.getElementById('helmet').style.backgroundPosition = currhelmetpos + "px 0px";
    }
    You'll have to change the numbers here too! -295 will become the left offest of the image part and 155 will be "width of image part plus 1" ... which is the offset to the next/previous image in the corresponding line. The "0px" has to be changed to the negative offset for the vertical movement you already chose above. You can calculate the "upper limit" (which is -760 here) as "startoffset - #ofimages * (imagewidth+1)" = -295 - 3 * 155 = -760

    It's not easy ... but I can help you as soon as the image preparation is complete

  • Users who have thanked devnull69 for this post:

    Pegasus1935 (04-15-2011)

  • #10
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, I'm at a loss. It doesn't seem to be saving the changes I've made. http://jsbin.com/omote4/17

  • #11
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    I moved everything to the right place inside each of the container divs. I also implemented cycling.

    To do: Moving the divs to the correct partially overlapping positions and change the links to less offending arrow images or something like that

    http://jsbin.com/omote4/18

  • Users who have thanked devnull69 for this post:

    Pegasus1935 (04-15-2011)

  • #12
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    I changed it again ... now you have a lot more "talking" variables to help you find your way through the code: http://jsbin.com/omote4/19

  • Users who have thanked devnull69 for this post:

    Pegasus1935 (04-15-2011)

  • #13
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Awesome! Thank you so much!

    Now, for the teams that only have one helmet and/or one pair of socks, what would I need to do to remove the unnecessary scroll capability?

  • #14
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    If you don't provide a link to "next" or "previous" the user will not be able to scroll ... I would keep the code though. You'll never know when you gonna need it again.

  • #15
    New Coder
    Join Date
    Apr 2011
    Location
    Arizona/California
    Posts
    16
    Thanks
    6
    Thanked 0 Times in 0 Posts
    True, but very few teams out of the 120 have more than one helmet, so most of the time when I use this, it'll be one helmet.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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