Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Click effect

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #44534
    Kuzyo
    Participant

    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

    #133974
    CrocoDillon
    Participant

    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`)

    #134010
    Kuzyo
    Participant

    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.

    #134017
    CrocoDillon
    Participant

    > 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!

    #134029
    Kuzyo
    Participant

    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.

    #134030
    Chris Coyier
    Keymaster

    The user and all related content has been deleted.

    #134037
    CrocoDillon
    Participant

    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,’ ‘);
    }

    #134039
    Kitty Giraudel
    Participant
    #134051
    Kuzyo
    Participant

    thanks everything works fine :)

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

    #134054
    Kuzyo
    Participant

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.