Firefox hiding parts of text when div is resized

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

Nathan Sokalski

I have one of the following functions called every 10 milliseconds to keep a
part of my document correctly sized (the first is for IE, the second is for
other browsers such as Firefox):

function
SetTitleWidth(){document.getElementById('divTitle').style.width=(document.documentElement.clientWidth+document.documentElement.scrollLeft)+'px';}

function
SetTitleWidth(){document.getElementById('divTitle').style.width=(window.innerWidth+window.pageXOffset)+'px';}

When used with Firefox, the <div> is resized correctly, but a <span> tag
with text, which is nested inside the <div>, gets the right end of it
chopped off whe the window is enlarged. There is no problem when the window
is made smaller. This problem does not occur in IE (IE6 is the only browser
I have had a chance to test the application in other than FF). I am assuming
this is a bug in Firefox, because if you attempt to select the text, or
resize the window to a smaller size, or maximize the window, the chopped off
text reappears. Is there any workaround anybody knows of?
 
Nathan Sokalski said:
I have one of the following functions called every 10 milliseconds to keep a
part of my document correctly sized (the first is for IE, the second is for
other browsers such as Firefox):

function
SetTitleWidth(){document.getElementById('divTitle').style.width=(document.do
cumentElement.clientWidth+document.documentElement.scrollLeft)+'px';}
SetTitleWidth(){document.getElementById('divTitle').style.width=(window.inne
rWidth+window.pageXOffset)+'px';}

When used with Firefox, the <div> is resized correctly, but a <span> tag
with text, which is nested inside the <div>, gets the right end of it
chopped off whe the window is enlarged. There is no problem when the window
is made smaller. This problem does not occur in IE (IE6 is the only browser
I have had a chance to test the application in other than FF). I am assuming
this is a bug in Firefox, because if you attempt to select the text, or
resize the window to a smaller size, or maximize the window, the chopped off
text reappears. Is there any workaround anybody knows of?
Click to expand...

Since this may or may not be bug in FF I'm not sure why you cross posted so
many MS groups including inetexplorer groups. Add news.mozilla.org to your
set of news accounts and ask in mozilla.support.firefox.

Having a function run every 10ms to make things look right sounds like a
really bad idea. I think you should re-visit this design rather than chase
a FF bug. What are you trying to acheive and why can't that be acheived
with CSS?
 
Nathan said:
I have one of the following functions called every 10 milliseconds to keep a
part of my document correctly sized (the first is for IE, the second is for
other browsers such as Firefox):
Click to expand...

10 ms? The human reaction time is closer to 100ms.
 
I was not sure how many milliseconds to use, but the more important question
here is how toachieve my goal, which is keeping the <div> the full width of
the page. I am using CSS, only I am doing it through JavaScript. I
originally tried using a simple static style="width:100%;", but that sets
the width to the width of the browser window, not the document. I would have
liked to use the following:

document.getElementById('divTitle').style.width='0px';document.getElementById('divTitle').style.width=document.body.offsetWidth+'px';

Both of the statements above are necessary so that the width can be
decreased when the browser is resized to a smaller size. But even this
method would require periodic updates, since this variable changes with
resizing as well. But because the offsetWidth property is non-standard, it
is not supported by all browsers (one of which is FF). The only other
solution I could come up with is the one I posted. However, because the
values of the variables used to calculate the width change when the browser
is resized or the user scrolls horizontally, I needed a way to continuously
update the width. What would you suggest to prevent resizing and/or
scrolling from interfering with the design?
 
I actually didn't want to use the setInterval function at all, but I could
not find another way. The number probably is a bad choice, I won't deny
that, I simply chose one while I looked for a better solution (assuming that
there is a better one).
 
Nathan Sokalski said the following on 2/7/2008 3:04 PM:
I was not sure how many milliseconds to use, but the more important question
here is how toachieve my goal, which is keeping the <div> the full width of
the page. I am using CSS, only I am doing it through JavaScript.
Click to expand...

Don't use JS to solve a CSS problem. Try asking a CSS group.
comp.infosystems.www.authoring.stylesheets.
 
Try asking a CSS group. comp.infosystems.www.authoring.stylesheets.

He missed one group? :>)

I think he even has one in there about how to keep your t-shirts white.

Bob Lehmann

Randy Webb said:
Nathan Sokalski said the following on 2/7/2008 3:04 PM:

Don't use JS to solve a CSS problem. Try asking a CSS group.
comp.infosystems.www.authoring.stylesheets.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices -
Click to expand...
http://www.JavascriptToolbox.com/bestpractices/
 
The problem is not a CSS problem, because the width value must change when
the browser window is resized. Unless there is a CSS value for the width
property that does this (and I am pretty sure there isn't), JavaScript is
necessary, therefore making this a JavaScript question.
 
Nathan Sokalski said the following on 2/7/2008 10:34 PM:

Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
The problem is not a CSS problem, because the width value must change when
the browser window is resized. Unless there is a CSS value for the width
property that does this (and I am pretty sure there isn't), JavaScript is
necessary, therefore making this a JavaScript question.
Click to expand...

The problem is your layout and it not doing what you want it to do. That
is a CSS issue, not a JS issue. But, I think I can correctly guess that
you have not bothered to ask in a CSS group or you would be able to say
they didn't have a solution.

But, just for kicks, when you think you have a JS solution for the
problem, disable JS and see how well it works. Yes, you can disable CSS
but there are a lot more people on the web with JS disabled than there
are with CSS disabled.
 
Back
Top