0

I have a div, visitors-main-panel, that shows search results. I have a set of filters above. I would like to show a semi transparent panel over the top of the search results whilst I am fetching the new results via ajax.

$('#visitors-main-panel:after').hide();
.visitors-main-panel {
  position: relative;
}
.visitors-main-panel:after {
  content: " ";
  z-index: 10;
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-9 visitors-main-panel">
  Initial search results
</div>

But this doesn't seem to work.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Chris
  • 4,672
  • 13
  • 52
  • 93
  • 1
    you cannot, pseudo element are not part of the dom and not accessible via jQuery, as advised, toggle a class on the container itself and let CSS take care of itself ;) – G-Cyrillus Jan 09 '17 at 22:04

2 Answers2

3

You can't. What you should do instead is toggle a class on #visitors-main-panel that you use in CSS to target display of the pseudo elements.

Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • It's good to mention your source actually, using google isn't the way to answer questions here m8 :D http://stackoverflow.com/questions/11354270/jquery-and-hiding-after-before-pseudo-classes – Ruslan Abuzant Jan 09 '17 at 22:05
  • @RuslanAbuzant where did you see google in this answer ? This answer points at a good practice, mayb needed a bit more explanation to be ressourcefull for the OP – G-Cyrillus Jan 09 '17 at 22:07
  • Let's not debate please, you just copy-pasted an answer from my quoted link exactly as answered by @TJ Vanholl on Jul 6 '12 at 0:32. And I did not even vote your answer down so ;) ps> Google `jquery hide :after`, hit first link, copy-paste accepted answer.. that was your used technique. – Ruslan Abuzant Jan 09 '17 at 22:09
  • @RuslanAbuzant let's not debate please? You mean you don't like being called out on your bs - you'll do the one-sided bs calling out? "you just copy-pasted an answer from my quoted link exactly as answered by TJ Vanholl on Jul 6 '12 at 0:32" - first, GCyrillus replied to you, not me. And second, I did not copy and paste an answer. That answer and mine are very similar, but not the same, and it's a simple concept - maybe there's a reason our answers are similar, yet not the same. "that was your used technique" don't be so presumptuous, m8 ;) – Michael Coker Jan 09 '17 at 22:16
  • 1
    @RuslanAbuzant so did I to make my comment under the question. It is a redundant question and there is not other appropriate to give. Instead going for 'this is a copy/paste, propose to close the question for a duplicate of any of the hundreds similar questions standing here for the last few years ... keep cool , it is only a forum where people help each others :) – G-Cyrillus Jan 09 '17 at 22:17
  • 1
    I appreciate the help from you all ;-) – Chris Jan 09 '17 at 22:19
  • Chiming in as well -- SO should be a helpful place, while it is good to call out others if they're really copy/pasting a previous answer vs linking to relevant questions in the past, this is a fairly straightforward issue with straightforward answers. – Pixxl Jan 09 '17 at 22:23
0
<style>
.uk-hidden { display: none; }
</style>

$('.visitors-main-panel:after').addClass('uk-hidden');

ps> Your CSS selector has quote as an opening and one double-quote as a closure, make sure you use either quotes or double quotes.

ps2> Your CSS defines a class, where your jQuery selector is trying to access an element by it's ID.

Ruslan Abuzant
  • 631
  • 6
  • 17