Grow your CSS skills. Land your dream job.

Cleaner way of writing this code?

  • # May 2, 2013 at 12:25 am

    Hi,

    I’m curious if anyone can suggest a cleaner, more efficient method for writing the following jQuery. The code seems to be redundant in certain places…Any help or suggestions are appreciated. Thank You!

    $(‘#one’).click(function () {
    $(‘.two’).fadeTo(400, 0.5);
    $(‘.one’).fadeTo(400, 1);
    return false;
    });

    $(‘#two’).click(function () {
    $(‘.one’).fadeTo(400, 0.5);
    $(‘.two’).fadeTo(400, 1);
    return false;
    });

    $(‘#all’).click(function () {
    $(‘.one, .two’).fadeTo(400, 1);
    return false;
    });

    # May 2, 2013 at 1:40 am

    I’m not sure I really like this solution, but it’s a lot more flexible in terms of adding more and more items.

    http://codepen.io/ggilmore/pen/c2ff9d85937f4f62cf1bbf6024552321

    # May 2, 2013 at 5:15 pm

    @thedoc

    Interesting approach…thanks for taking a stab

    Below is a fiddle I created with the working example… I’m hoping to stick with the existing markup only because it uses the least amount of elements required to function properly. I’m still thinking there must be a better way for chaining the click events into single a function. Maybe not though…

    **Fiddle:**

    http://jsfiddle.net/Xe6KJ/1/

    # May 2, 2013 at 5:22 pm

    My method is definitely a better way to go, I think.

    Here it is with your markup: http://codepen.io/ggilmore/pen/db239cfbc984feab0c4679abddf51841

    # May 2, 2013 at 5:26 pm

    @thedoc

    After further inspection…I think you’re right.

    Out of curiosity… what does the following css mean? And does it work well cross-browser? Never seen that before

    &.element

    # May 2, 2013 at 5:29 pm

    It’s fancy shmancy SCSS.

    Example using CSS:

    .something {
    /* styles */
    }

    .something.active {
    /* different styles */
    }

    SCSS:

    .something {
    /* styles */

    &.something {
    /* different styles */
    }
    }

    # May 2, 2013 at 5:30 pm

    @Rugg It’s SCSS, a CSS preprocessor.

    # May 2, 2013 at 5:30 pm

    @TheDoc beat me to it, lol.

    # May 2, 2013 at 5:33 pm

    @thedoc

    I was thinking that’s probably what it was doing…similar to _”this”_ with jQuery

    # May 2, 2013 at 5:37 pm

    Sure, if you want to think of it that way. `&` simply means: Use the parent selector and tack this on *directly* to it. Emphasis added because there’s a big difference if you don’t include the `&`.

    Example A:

    .something {
    /* styles */

    .active {
    /* different styles */
    }
    }

    Example B:

    .something {
    /* styles */

    &.active {
    /* different styles */
    }
    }

    Example A will render:

    .something {
    /* styles */
    }

    .something .active { /* note the _space_ between .something and .active */
    /* different styles */
    }

    Example B will render:

    .something {
    /* styles */
    }

    .something.active { /* no _space_ between .something and .active */
    /* different styles */
    }

    # May 2, 2013 at 5:41 pm

    @thedoc

    One more thing actually. I noticed there is a slight difference in the output of your code…that being the initial opacity of the boxes…which begins at 50% as apposed to 100%

    # May 2, 2013 at 5:46 pm

    Updated it: http://codepen.io/ggilmore/pen/db239cfbc984feab0c4679abddf51841

    Just need to add the active class to each of the boxes and the ‘All’ nav item.

    # May 2, 2013 at 5:48 pm

    Ok that makes sense…thanks for the help and suggestions!

    # May 2, 2013 at 5:50 pm

    > Just need to add the active class to each of the boxes and the ‘All’ nav item.

    That’s probably a better way to do it but it’s easier to just add `$(‘.nav .all’).click();` after the click listener.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".