最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Firefox page "moves" when hidingshowing divs - Stack Overflow

programmeradmin3浏览0评论

We have a web page with this general structure:

<div id="container">
  <div id="basicSearch">...</div>
  <div id="advancedSearch" style="display: none">...</div>
<div>

With this CSS:

#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}

We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:

var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
    advanced.style.display = '';
    basic.style.display = 'none';
} else {
    basic.style.display = '';
    advanced.style.display = 'none';
}

This all works great in IE.

It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?

We have a web page with this general structure:

<div id="container">
  <div id="basicSearch">...</div>
  <div id="advancedSearch" style="display: none">...</div>
<div>

With this CSS:

#container { MARGIN: 0px auto; WIDTH: 970px }
#basicSearch { width:100% }
#advancedSearch{ width:100%;}

We have a link on the page that lets the user toggle between using the "basic" search and the "advanced" search. The toggle link calls this Javascript:

var basic = document.getElementById('basicSearch');
var advanced = document.getElementById('advancedSearch');
if (showAdvanced) {
    advanced.style.display = '';
    basic.style.display = 'none';
} else {
    basic.style.display = '';
    advanced.style.display = 'none';
}

This all works great in IE.

It works in Firefox too - except - when we toggle (ie: show/hide) from one div to the other, the page "moves" in Firefox. All the text in the "container" moves about 5px to the left/right when you toggle back and forth. Anyone know why?

Share Improve this question edited Mar 24, 2009 at 13:45 Marcus Leon asked Mar 23, 2009 at 21:25 Marcus LeonMarcus Leon 56.7k123 gold badges300 silver badges434 bronze badges 1
  • what happens when you set the #container margin to something other than 'auto' ? – Scott Evernden Commented Mar 23, 2009 at 21:29
Add a ment  | 

5 Answers 5

Reset to default 5

Is it causing a scrollbar to appear / disappear?

Toggling content can make the page content taller. Check whether this makes a scrollbar appear, as this will affect the page width slightly.

What I ended up doing was this: HTML { OVERFLOW-Y:SCROLL; OVERFLOW-X:HIDDEN; }

Here's a good related SO post.

Check your XHTML is well formed, sounds like a dangling DIV (firebug will help with this).

On a side note jquery has some really nice animations that make this switch much nicer on the eyes.

I don't know why, but if you install Firebug a Firefox plug in you can use it to debug your problem.

Firebug has saved my hours of debugging time when it es to CSS and showing and hiding divs.

With firebug you can view what may be different between the two divs.

From firefox, just choose the Tools Menu, then click Ad-Ons, then click Get Ad-Ons and search for firebug.

One thing that you could try is to hide before you show, this may have less flicker. If you are causing the page to get taller, this could be the source of your trouble.

I hope this helps.

发布评论

评论列表(0)

  1. 暂无评论