0

The following piece of code is from https://github.com/tsi/inlineDisqussions/blob/master/inlineDisqussions.js

What is this piece of code doing please? I'd appreciate a plain English translation. Student here.

  // Hide the discussion.
  $('html').click(function(event) {
    if($(event.target).parents('#disqussions_wrapper, .main-disqussion-link-wrp').length === 0) {
      hideDisqussion();
    }
  });
thanks_in_advance
  • 2,603
  • 6
  • 28
  • 44
  • If you click anywhere on the page, if the click was not on an element with id disqussions_wrapper nor any element with the class main-disqussion-link-wrp then call the function hideDisqussion(). – Vincent Ramdhanie Nov 13 '14 at 01:31
  • @VincentRamdhanie What are the purposes of "parents" and ".length" please? – thanks_in_advance Nov 13 '14 at 01:33
  • @VincentRamdhanie ... on an element contained in an element that has that ID or class [(`.parents`)](http://api.jquery.com/parents/) – blgt Nov 13 '14 at 01:34
  • @user1883050 `length` is used to find *existence*. See here for details: http://stackoverflow.com/questions/31044 – blgt Nov 13 '14 at 01:36

3 Answers3

2

What this code does is register a mouse button click event on the whole of the page. If someone clicks on the page, the function is called. The function is passed an event (which will be the click event). Within the event there is a property called "target" which is the HTML element that was actually clicked. We then ask if the clicked element has a parent ancestor element that is either an element with "id" of "disqussion_wrapper" or has a class of "main-disquission-link-wrp". If neither of these are true, we call the function called hideDisqussion().

Kolban
  • 13,794
  • 3
  • 38
  • 60
  • 1
    Wow -- awesome explanation. I'll be checking correct in about 7 minutes. – thanks_in_advance Nov 13 '14 at 01:37
  • My great pleasure. Post back if there if anything else you might need. – Kolban Nov 13 '14 at 01:37
  • 1
    I'm back with another question: I'm a 43 year old guy with a small amount of procedural programming experience. I'm finding a hard time grasping how things are done in jQuery. Got any advice on tutorials you'd recommend? I'd prefer something on YouTube or some blog where the guy explains it really well. I noticed that you too are an older guy, and that's why I thought I'd get your advice. You obviously have jQuery figured out. I'm wondering how you approached it when it came out. Thanks. – thanks_in_advance Nov 21 '14 at 19:25
  • Howdy .... For me, Ive been doing web programming for about a decade now as part of my job so I got to my skill base now slowly and carefully just through attrition. I'm hoping age hasn't anything to do with how we learn :-) ... I'd put my greying wisdom up against the energy of youth any day of the week :-). As for reading, the trick is to study JavaScript slowly and carefully and then play, play and play some more with jQuery. By books on Amazon and ask questions on Stack Exchange. There are no quick tricks other than keep pluggin away. – Kolban Nov 21 '14 at 20:07
2

I'm not sure where you're stuck, but I'd suggest:

// Binding a click-handler to the <html> element,
// passing that event to the anonymous function:
$('html').click(function(event) {
      // if the element that was clicked does not have any ancestor elements with the
      // 'id' of 'disqussions_wrapper' or a class of 'main-disqussion-link-wrp
      if ($(event.target).parents('#disqussions_wrapper, .main-disqussion-link-wrp').length === 0) {
          // we (presumably, from the function name) hide the disqussion/disqus element(s):
          hideDisqussion();
      }
});

References:

David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

Kolban's answer is accurate. In plain english you could also say that we simply check if the clicked element is not a child (or simply - outside) of '#disqussions_wrapper, .main-disqussion-link-wrp' - if that's the case, we call hideDisqussion().

tsi
  • 1,244
  • 12
  • 10