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

4
  • Do yourself a favor, and use CSS3 for low-level stuff like this.
    – jakenberg
    Jan 29, 2013 at 8:55
  • @jsksma2 This is a site that needs to be compatible with IE8. I do use CSS3 mostly.
    – Ladineko
    Jan 29, 2013 at 9: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, 2013 at 9:17
  • @jsksma2 As far as i know CSS3 has been compatible with IE since version 9.
    – Ladineko
    Jan 29, 2013 at 9:57

2 Answers 2

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

5
  • 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, 2013 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, 2013 at 12:31
  • Maybe you missed my css, the mask has position absolute. Jan 29, 2013 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, 2013 at 13:01
  • I looked into your answer again and i manages with a few changes to fix the problem...
    – Ladineko
    Jan 29, 2013 at 13:03
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.

1
  • Challenging problem ain't it? I been busy with this issue for over 1 hour now... and still no results.
    – Ladineko
    Jan 29, 2013 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.