homepage Welcome to WebmasterWorld Guest from 54.166.95.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Using JS to force browser to redraw (not refresh)...
IE doesn't redraw div when toggled through hide/show
lhankins




msg:1490577
 4:03 pm on Jun 16, 2003 (gmt 0)

For our webapp, we have dynamic divs which we can show / hide via javascript. All works fine except for one div in IE.

Our hide/show capability basically works like this: We have a link up top which says "show/hide xyz". When they click on the link, we toggle the style associated with that div. When hiding it, I set its style to a style def with visibility set to hidden and display set to none. When toggling the div back on, I set its style back to its normal style.

This all works great except for one area. I set it to hidden, it disappears. I set it back to visible, and it doesn't show back up. If I resize the browser slightly, it appears (so its there, the browser just isn't redrawing it).

This looks like a redraw issue - if I could somehow tell the browser to redraw itself (or a given region), I think I could solve this problem.

Does anyone know how to do this in Javascript...?

A last resort hack will be to use javascript to resize the browser by one pixel (which should do the job) when this occurs, but I was hoping to avoid such stinkiness :)

 

tedster




msg:1490578
 4:36 am on Jun 17, 2003 (gmt 0)

I found a related thread [webmasterworld.com] which may give you some ideas. Essentially, joshie76 said this:

There are a number of ways you can force an element
to re-render (without a reload) - the most effective one
I found was to quickly switch the display style of the
element in question. That is:

Set the display property to none
(element.style.display = 'none')
and then return it to block
(element.style.display = 'block').

A complete fudge I know but it did force the
element to re-render, with the result we wanted.


lhankins




msg:1490579
 3:37 pm on Jun 17, 2003 (gmt 0)

Excellent. Thanks for the tip.

I was essentially doing this with the containing div (setting its style to a "hidden" style when hiding it and setting it back to its normal style when showing it) :

------

if (headerDivIsVisible == true)
{
headerDiv.className = "headerContainerDiv";
}
else
{
headerDiv.className = "hiddenDiv";
}

(where hiddenDiv is defined as :)

DIV.hiddenDiv
{
visibility: hidden;
display: none;
}

------
This worked fine for most of the divs in my application, but in the one instance, caused the non-repaint issue which prompted my original post.

Now I have updated the above code to just switch the display attribute on the current style (instead of swtiching the style itself) and it seems to have fixed the problem.

So now the above code looks like this :

------

if (headerDivIsVisible == true)
{
headerDiv.style.display = "block";
}
else
{
headerDiv.style.display = "none";
}

------

And everything works fine. So I guess the lesson I can take from this is to not switch the styles when trying to do this, but rather, just switch the display attribute value on the style.

Cool - thanks again for the tip.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved