Grow your CSS skills. Land your dream job.

Click effect

  • # May 3, 2013 at 12:05 pm

    Hi everyone.
    Some times ago I saw the similar effect was implemented on jQuery and for learning goals (I am only beginner in JS) I decide to make it work on raw JS – http://codepen.io/Kuzyo/pen/LwyAE

    But found some problems which I can’t solve alone: 1) how can I make circle to move back when I click again on orange circle 2) or when you click somewhere on blank place( window for example).
    I aprreciate any advice. Thanks

    # May 3, 2013 at 12:32 pm

    Quick and dirty:

    function toggleClass(e) {
    if (e.target.classList.contains(“round”)) {
    blue.classList.toggle(“blueRight”);
    red.classList.toggle(“redLeft”);
    green.classList.toggle(“greenDown”);
    } else {
    blue.classList.remove(“blueRight”);
    red.classList.remove(“redLeft”);
    green.classList.remove(“greenDown”);
    }
    }

    document.onclick = toggleClass;

    I don’t like using `.onclick = …;`, rather use `.addEventListener(‘click’, …);`. Keep in mind that’s IE9+ though. But `.classList` is IE10+ so that’s no big deal here. I would probably restructure a thing or two to make the JS more robust and keep the styling in CSS (so no classes like `blueRight` or `redLeft`, but maybe just one class for all `expanded`)

    # May 3, 2013 at 5:05 pm

    Hi, CrocoDillon.
    I know about unsemantic classes, it’s only for practicing. Your solving is cool (without variables and so on). I know that **classList** works only in newest browsers, but I don’t know how to remove class without **classList** :(((

    P.s. I owe for you help.

    # May 3, 2013 at 6:31 pm

    > I don’t know how to remove class without classList

    Something with a RegEx replace on `.className` but I need to improve my RegEx skills to give you a more useful answer. You can Google it, but there are a lot wrong implementations out there.

    > P.s. I owe for you help.

    Yeap!

    # May 4, 2013 at 1:56 am

    Thanks, man!
    I found this

    function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
    ele.className=ele.className.replace(reg,' ');
    }
    }

    http://rockycode.com/blog/addremove-classes-raw-javascript/

    and try in this way

    function removeAllClases() {
    function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
    ele.className=ele.className.replace(reg,' ');
    }
    }
    removeClass( blue, "blueRight");
    removeClass( red, "redLeft");
    removeClass( blue, "greenDown")
    }

    But it didn’t work.

    # May 4, 2013 at 3:49 am

    The user and all related content has been deleted.

    # May 4, 2013 at 5:17 am

    function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp(‘(\s|^)’+cls+'(\s|$)’);
    ele.className=ele.className.replace(reg,’ ‘);
    }
    }

    is using another function `hasClass`, you need that one too… or just leave that part out:

    function removeClass(ele,cls) {
    var reg = new RegExp(‘(\s|^)’+cls+'(\s|$)’);
    ele.className=ele.className.replace(reg,’ ‘);
    }

    # May 4, 2013 at 10:11 am

    thanks everything works fine :)

    CrocoDillon, thanks for this link – http://www.learnstreet.com/, I went through their exercise, very helpful

    # May 4, 2013 at 12:27 pm

    What is most important points in JS for web developer, on which I have to pay special attention in studying?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

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