Home/ Questions/Q 6899989
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:29:27+00:00

Below, I have pasted a link to my JQuery enabled webpage. Looking at the

  • 0

Below, I have pasted a link to my JQuery enabled webpage. Looking at the source code, you can see I used

$('html').not(this).fadeTo('fast', 0.25);

trying to make the whole screen fade except for a clicked DIV. Unfortunately, whenever I test this out, I find that everything is faded, including the DIV that is supposedly unselected in the above command. Why is this happening and how can I fix it?

Any and all help is greatly appreciated!

Feel Free to view the source code at:
http://numberonekits.com/SchoolWeb/index.html
The CSS and other JS files are in the same directory.

Below is the relevant code:

<body>
//other stuff that should be faded...
<div id="templatemo_content_wrapper">
//other stuff that should be faded...
<div id="templatemo_sidebar">
//other stuff that should be faded...
<div id="announce">

<p>This is the DIV that shouldn't be faded</p>

</div>
//other stuff that should be faded...
</div>
//other stuff that should be faded...
</div>
//other stuff that should be faded...
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As long as this is not the html element, you will be fading the html element, which will fade all of its descendants.

    I haven’t look at your source, but it sounds like you have a group of siblings.

    If so, you need to select them, and do .not(this) on that selection.

    Something like:

    var sections = $('.top_sections');

// then on some event
sections.click( function() {
    sections.not( this ).fadeTo('fast', 0.25);
});

    Posting alternate solution from comment below:

    Since the element you want to highlight is nested inside ancestors whose other descendants you want to obscure, you should…

    …Take a different approach. Use layers.

    Have a div that covers the width and height of the entire page. Let’s call it blocker. Place it at z-index:100 or something. Make it background:#FFF and opacity:0.

    Then when you want to highlight the announce section, set its z-index to something higher than 100 (or higher than the z-index of the blocker), and then fade in the blocker to opacity .75.

    • 0