2

I have a JSFiddle that displays a series of boxes. If one of the boxes is clicked, it expands to cover the other boxes, then displays text. When the now expanded box is clicked, it retracts to its original width and height. This javascript works flawlessly in Firefox, Chrome, and Safari. However, in Internet Explorer (v10), the box expands but fails to retract. Any Insight on why this may be?

JSFiddle: http://jsfiddle.net/QBdDE/

Javascript:

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
    }
    $(this).toggleClass('clicked') ;

});
7
  • I haven't got IE10 to test on but you can remove the need for JS to change the z-indexes if you set it in the css. jsfiddle.net/QBdDE/3
    – Moob
    May 20, 2014 at 15:20
  • Did a quick check, couldn't find out what exactly goes wrong but I noticed that the clicked class was not removed from the div when I clicked it the second time.
    – ivarni
    May 20, 2014 at 15:26
  • Thanks for the reply, the retract in Firefox is a little funky with your jsfiddle. Also, it didn't work in IE10. Did you try IE11? I'm curious on the result, unfortunately my work wont let us update to 11 yet. May 20, 2014 at 15:30
  • @ivarni Does the toggle in the Js show/hide it? May 20, 2014 at 15:31
  • On IE11, there's an odd effect where during animation the box is 1px too far inside, so the other boxes are visible until animation stops.
    – Kelderic
    May 20, 2014 at 15:35

2 Answers 2

3

What's Going On

Problem:

pointer-events support was added in IE11. IE10 is ignoring this, and because your overlay is on top, the mouse is interacting with it. We can get around this though!

Solution:

We need to remove dependency on that CSS rule. To do this, we need to do two things:

1.) We need to make the hover color stays applied even if the :hover effect isn't happening. We can add another selector to our CSS so that the .clicked class will cause the colors.

2.) We need to address what happens when .overlay_text is clicked, and use that to trigger the shrinking animation.


Code

1.) Hover Effect

We need to add in another select to every place :hover is used:

Old CSS:

.first_box:hover {

   ...background color rule ...

}

New CSS:

.first_box:hover, .first_box.clicked {

   ...background color rule ...

}

Duplicate the above for all 4 box rules.

2.) .overlay-text Trigger

We need to cause a click on .overlay-text to trigger the shrinking.

Old JS:

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
    }
    $(this).toggleClass('clicked') ;

});

New JS:

We have to add a new selector to the .on() code, then we have to add .clicked to both the selected square, add the overlaying section. Finally we have to remove .clicked from both. We can't use .toggleClass() because we are adding to $(this) and removing from all divs.

$('div, .overlay-text').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
       $('div').removeClass('clicked');
       $('.overlay-text').removeClass('clicked');
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
        $(this).addClass('clicked');
        $('.overlay-text').addClass('clicked');
    }
});

Summary

I've tested in IE10 and it works.

Working Example: jsFiddle


Extra

If I may say, the CSS structure you are using could be improved and your animations will look a lot better. Chrome and IE both flicker during the animation of the two left blocks.

This is because their width AND position is being animated. If you position them from right:0, only their width will animate and it'll look a lot smoother.

I've created a Fiddle for you to address the above. I used absolute positioning. The CSS ends up being shorter, but mainly the animation doesn't flicker. Take a look:

Working Example: jsFiddle

Extra 2

As per comments from OP, we are going to prevent users from double clicking. Since all animations take 1 second, we will disable clicking from triggering anything for 1 second after each click.

It's actually pretty simple to do. In the Extra 1 above, we cleaned up the JS, and it became this:

$('div, .overlay-text').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
       $('.overlay-text').hide();
       $('div').removeClass('clicked');
       $('.overlay-text').removeClass('clicked');
    }
    else {
        setTimeout(function(){$('.overlay-text').show();},1000);
        $(this).addClass('clicked');
        $('.overlay-text').addClass('clicked');
    }
});

We just need to add a global variable that starts true. When once the click happens, set it to false immediately, and after 1 second, set it to true. Then we just check to see if it's true, and don't do anything at all if it's false:

var notdouble = 1;
$('div, .overlay-text').on('click', function (e) {
    if (notdouble) {
        if ($(this).hasClass('clicked')) {
           $('.overlay-text').hide();
           $('div').removeClass('clicked');
           $('.overlay-text').removeClass('clicked');
        }
        else {
            setTimeout(function(){$('.overlay-text').show();},1000);
            $(this).addClass('clicked');
            $('.overlay-text').addClass('clicked');
        }
        notdouble=0;
        setTimeout(function(){notdouble=1;},1000);
    }
});

Working Example: jsFiddle

Note, this builds from the new structure in the Fiddle version 13, so it won't work exactly with the fixed version of the original structure. The concept can be adapted though.

8
  • This is brilliant. Thank you for the time and effort. One more question if you don't mind, if you double click a square the text still displays, is there a way for the overlay text to "abort" if te square is clicked again? May 20, 2014 at 16:42
  • Glad I could help! And yet it can be done. We need to put things in a timer that will ignore input for 1s. I'll fiddle around with it. What are your thoughts on the bonus fiddle with the restructuring? The JS there is simpler, and it would be easier to work from that to prevent the double click. If you are constrained to use the original though, I can try to get that to work without double clicks.
    – Kelderic
    May 20, 2014 at 16:44
  • I don't mind which JS you use. I'm a beginner at JS so I'm sure my code was not too efficient May 20, 2014 at 16:51
  • Alrighty, take a look. It prevents double clicking (or triple) from affecting it.
    – Kelderic
    May 20, 2014 at 16:56
  • Again, glad to help. This is a pretty cool effect you've created. When you end up using it in a production site, drop a link here so I can check it out.
    – Kelderic
    May 20, 2014 at 17:00
1

Not working in IE 9 as the div click event never fires. I think it's covered by the section with class="overlay-text". But I've got a workaround by handling the click event of the section and triggering the div click event

$('section').on('click', function (e) { 
    $('.overlay-text').hide();
    $( "div" ).addClass('clicked') ;
    $( "div" ).trigger( "click" );
});

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.