any thoughts on my late night coding session?

Discussion in 'Web Design and Development' started by pdpardue, Apr 10, 2010.

  1. pdpardue macrumors regular

    Joined:
    Apr 27, 2005
    Location:
    Sacramento, California
    #1
    Just put together a little test code, kind of just for fun, but perhaps to eventually replace what I've got on the main page of my website. It's a square of thumbnails change by that slide in and out randomly. Set up so that when the new image slides in the link changes too. Just something so my site is a bit more dynamic.

    Also, finished coding some stuff the other day that resizes the image on the page so that it scales to fit your screen size. That way the image doesn't suffer from goldielocks syndrome.

    anyway, the page for tonight's random coding session is http://www.paulparduephotography.com/test3.php

    I'd love to hear some thoughts, if you'd care to give them... And clicking on the image will take you to the portfolio page, where you can see the other bit of code for the resize
     
  2. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #2
    When you hover over a image it would be nice if it enlarged a little, if your using it in a production environment in the future it would help make the application more user understandable that it is just that one image there clicking on.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Good work there. Looks pretty nice.

    You randomly choose one of the 25 squares each pass for transition. You might want to consider making an array 25 long that you randomized and go through, which will make sure each square is changed once per 25 transitions. You can re-randomize that list after you get to the end of it as well.

    Another potential idea you may want to consider, since you have a good number of pictures on the page, doing multiple transitions at a time could provide a more interesting effect. This isn't quite as easy as it sounds to do with your code in its current state, but could be cool.

    Some code simplifications:
    PHP:
    if (dir == ) {...}
    if (
    dir == ) {...}
    ...

    // Change to
    switch (dir) {
    case 
    1: ... break;
    case 
    2: ... break;
    ...
    }


    xd
    // Change to
    += xd;


    document.getElementById(div)
    // Is used a few times, so you should capture it in a local variable so
    //   it's cheaper to use in terms of speed
    var theDiv =document.getElementById(div);
    theDiv.style. ...


    imagearray = new Array()
    imagearray[0]="20091217_201406_546240";
    imagearray[1]="20091217_201142_546225";
    ...

    // Change to
    var imagearray = [
      
    "20091217_201406_546240",
      
    "20091217_201142_546225",
    ...
    ];
    I also recommend using a semicolon at the end of each code line. JavaScript doesn't require it technically, but it's good practice. Also be sure to use the var bit on new variables to better declare their scope. This will also improve performance.
     
  4. pdpardue thread starter macrumors regular

    Joined:
    Apr 27, 2005
    Location:
    Sacramento, California
    #4
    thanks for the pointers. I'd read that using var creates a local variable to only the function that created it. That caused a problem in the other code I'd finished the other day so I left that off. also, I'd read that using a ; was bad practice so i've been leaving those off as well.

    I've still got a bunch of tweaking to do before I consider it good enough to be used, but it's a fun proof of concept.

    I'm considering changing how the direction works since that's a lot of if statements. I'm thinking of doing a a random selection for both directions of -1, 0, and 1; setting that as the xd and yd. that way I'd only have to pass that variable to the functions rather than have the functions run a sequence of ifs every time they run, which I'm sure is a performance hit. the only thing, is that if I do that I stand to have some of the tiles move at diagonals if both the x and y values are changed, and I'm not sure I'd care for that to happen though i'm sure I could program it so that it wouldn't.

    as for having two or more slides sliding at once, yeah that'd be nice.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Well, those were bad reading sources, probably with lazy programmers. Both are good practices. Take a look at popular, and well written, JavaScript frameworks like jQuery and you'll find plenty of var and semicolons. The var keyword shouldn't cause any issues when used correctly, and a semicolon only makes your code better. JSLint is a tool you might find helpful.

    I've got a folder full of proof-of-concept stuff so I know how you feel. You may find inspiration from some of the JavaScript I have on my site. The image carousels are similar to what you're doing here.
     

Share This Page