3

I have a issue,

Im trying to make a popup toggle with toggleClass. However i also made a rule that i got from StackOverflow that makes the popup dissapear when clicked outside.

However when i click the button login it appears, but i cant make it dissapear with the login button anymore. But i have set the rule :

$('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
});

However it seems like he is ignoring that...

Prehaps you guys can spot what the issue is that i can not see.

HTML

<div id="usermenu">
<div class="inloggen"><h2 class=" swe-editable" _sweid="17" _sweclass="nl swe swe-snippet swe-h2 ">
Inloggen</h2>

this is the popup!
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Wachtwoord vergeten? <a href="#">Klik hier</a>.</p></div>

</div>  
<ul class="menu">
  <li class="first"><a href="#" id="inloggen">login</a></li>
</ul>

jQuery

$('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
  });

  $(document).mouseup(function (e)
  {
      var container = $('.inloggen');

      if (container.has(e.target).length === 0)
      {
          container.removeClass('active');
      }

  });

  if ($('#project_user_loginform-name').hasClass('error') || $('#project_user_loginform-password').hasClass('error')) {
    $('.inloggen').addClass('active');
  };



What have i tried?
I tried to add a exception to the function that makes the div dissapear when clicked outside the div but this just seems to reverse the progress. 
var container2 = $('a#inloggen');
if (container.has(e.target).length === 0 && container2.has(e.target).length !== 0)

UPDATE :
I got a bit further in the progress and changed mouseup to mousedown and changed the order of the functions. This gives me a bit closer to the solution however its not working perfectly yet.

$(document).mousedown(function (e)
  {
      var container = $('.inloggen');

      if (container.has(e.target).length === 0)
      {
          container.removeClass('active');
      }

  });

  $('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
  });

Example
http://codepen.io/anon/pen/ghpwr

Ladineko
  • 1,921
  • 1
  • 16
  • 25
  • Do yourself a favor, and use CSS3 for low-level stuff like this. – jakenberg Jan 29 '13 at 08:55
  • @jsksma2 This is a site that needs to be compatible with IE8. I do use CSS3 mostly. – Ladineko Jan 29 '13 at 09:02
  • I could be wrong, but isn't CSS3 compatible with IE8? I thought I remember successfully using it back when IE8 was first released. Look into writing IE Conditionals & having separate stylesheets for IE. It will make your life a lot easier. – jakenberg Jan 29 '13 at 09:17
  • @jsksma2 As far as i know CSS3 has been compatible with IE since version 9. – Ladineko Jan 29 '13 at 09:57

2 Answers2

0

It appears the following line is breaking the toggle, although I'm not entirely sure why.

if (container.has(e.target).length === 0) {
  container.removeClass('active');
}

My guess is that the link is considered part of the document, so when the user clicks the link, the class is first removed and then toggled, re-adding the class.

Graham Walters
  • 2,054
  • 2
  • 19
  • 30
  • Challenging problem ain't it? I been busy with this issue for over 1 hour now... and still no results. – Ladineko Jan 29 '13 at 08:48
0

I believe an easier way to accomplish what you're trying to do, would be to create a blank div which can toggle the popup. Basically have it hidden like the popup, and when the login link is clicked, have the mask div <div class="mask"></div> display, but at z-index:-1;. That way the links on the page are still recognised as links, but the div is still clickable.

Here's the new version of the code, with the suggested changes implemented: link

Graham Walters
  • 2,054
  • 2
  • 19
  • 30
  • Nice try tough, but in the real site the usermenu is much smaller.... which makes the mask div only take up a fraction of the site since it has position:relative; – Ladineko Jan 29 '13 at 12:29
  • It did manage to work when i placed the mask div outside the site... however it interfere with a lot of other links/elements on the site. Isn't the right solution. – Ladineko Jan 29 '13 at 12:31
  • Maybe you missed my css, the mask has position absolute. – Graham Walters Jan 29 '13 at 12:36
  • I didn't. But the parent one has relative... so the absolute is watching to the usermenu which is a small box on the big site. When i put it outside it seems to work on particular parts of the site. – Ladineko Jan 29 '13 at 13:01
  • I looked into your answer again and i manages with a few changes to fix the problem... – Ladineko Jan 29 '13 at 13:03