Question

I am having trouble with elements inside an updatepanel losing their styles when the updatepanel refreshes. I know this isn’t a new question and have already read the following threads

Someguys Blog on it

And another thread on it

And the possible work-arounds include: surround the update panel with a div, surround the update panel with a div.

This doesn’t really work in my case because I have several elements inside my update panel but I want to only apply the style to two elements inside it and this method makes every element inside the update panel reflect the styles.

Any suggestions would be appreciated

-J

Answer 1

You can use a class on a surrounding div to control the style on elements inside the div. Put classes on some elements inside to identify them, and change the class on the surrounding div to trigger the change.

Example:

<div id="container" class="hide">
  This is the content that can change
  <div class="someelement">asf</div>
  <div>qwer</div>
  <div class="otherelement">uyhgf</div>
</div>

You can change the class on the outer div:

document.getElementById('container').className = 'show';

Now you can set up CSS rules to show changes on the inner elements depending on the outer class:

.hide .someelement { display: none; }
.show .someelement { display: block; }
.hide .otherelement { color: yellow; }
.show .otherelement { color: black; }

When the timer replaces the content the inner elements will still look the same, as the class controlling the appearence is on the outer div.