Div keeps showing again when I resize the window

JavaScript
1

Hi all,

Couple of questions, and thanks in advance :slight_smile:

First problem
When I click a read-more link, a hidden container will appear - works good. Now if I close this container using the close link within, it will hide again, works good. The problem is, when I resize the window, and sometimes when I scroll on mobile the hidden div container will reappear.

Question
If the container is hidden, why does it reappear when I resize the window?
I think it has something to do with the display: none and display: inline-block ordering, can’t figure out what I’ve missed.

Everything can be seen and tested in my Codepen example for easy viewing.

var $chosen   = null;
$(window).on('resize', function() {
  if ($chosen != null) {
    $content.css('display','none');
    $('body').append($('#content'));
    $chosen.trigger('click');   
  }
});

//Display extra #content container 
$(document).on('click', '#results .read-more', function(e){
  e.preventDefault();
  
  $chosen = $(this);
  var position = $chosen.closest('.wrapblock').position();
  $content.css('display','inline-block');
  $('.wrapblock').filter(function(idx, ele){
    return $(ele).position().top == position.top;
  })
  .last()
  .after($content);
});

// Close #content conatiner
$(document).on('click', '.close-me', function(e){
  $(this).closest($content).hide();
  e.preventDefault();
});

Second problem
After closing the extra container as discussed above, if I select another read more link the container reappears in the same place it was closed. Its only after the second click that the extra container moves into position.

Question
Why does the container not move into the correct position on first click?

Hopes this makes sense, codepen shows all code and problems.

And thanks to @m3g4p0p on an older thread as this is related.

Cheers,
Barry

2

Until @m3g4p0p (or someone else who knows what they are doing) pops along maybe change the close routine to this.

// Close #content conatiner
$(document).on('click', '.close-me', function(e){
 $chosen = null;
  $content.remove();
  e.preventDefault();
});

In your resize script you are setting the content to display:inline-block if its not null but you never make it null when you close it.

2 Likes
3

Arrrh :smiley:
Well spotted @PaulOB

This makes sense.
I’ve added $chosen = null which has fixed this issue :sunny:

I was also curious what the difference and what affect the below had on this.

$(this).closest($content).hide(); 
//vs
$content.remove();

I removed the former and replaced it with $content.remove();
This has also fixed the second problem.

Double whammy :sunglasses:

Cheers Paul!

Updated codepen

@m3g4p0p Seems we have fixed it.

ps. Still haven’t fixed the Failed to execute 'insertBefore' on 'Node problem, will come back to this if I manage to reproduce the error.

4

Yes exactly as @PaulOB said. :-) As for .hide() vs. .remove(), the first sets it to display: none, the second remove it from the DOM altogether. Which to use doesn’t make much difference here indeed as long as you keep it referenced by the $content variable…

1 Like
5

Nice to know, cheers :sunglasses:

Barry

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.