K
kriton
Hi,
As a beginner concerning JavaScript, I need some help in general.
I intend to change css-properties via Script.
Since MSIE/PC don't understand max-width in CSS, I need to give it
it's food in form of JavaScript.
With the following code I get the information I need. The width
of an HTML-Element (ID=Wrapper), the width of the viewport (don't
care about the measure of scrollbars), and the difference of the
subtraction (viewportWidth - wrapperwidth).
function maxWidth() {
if (document.getElementById) {
var wrapperWidth =
document.getElementById('Wrapper').clientWidth;
var viewportWidth = (document.documentElement.clientWidth ?
document.documentElement.clientWidth :
document.body.clientWidth);
var result = viewportWidth - wrapperWidth;
}
alert('Width of viewport: ' + viewportWidth + ' px\nWidth of
paragraph: ' + wrapperWidth + '
px\n-------------------------------------\nDifference . . . . . . ' +
result + ' px\n\n');
}
Example: <http://www.kriton.de/TEST/maxwidth.html>
If the viewport is smaller than the HTML-Element (ID=Wrapper), I get
a result with negative sign by this function. That's what I want.
In a more natural speech I want to do the following:
If container-width = smaller than viewport
then container-width = 42em;
If container-width is taller than viewport
than container-width = 97% of width of viewport;
That means, if the font-size will increased until the container
is wider than the width of viewport, the container's width should
be 97% of width of viewport, but I don't know, how to realize it.
I wasted a couple of hours by trying a lot of code already, but I
can't get the requested result.
In CSS it looks like:
#Wrapper {width: 42em; max-width: 97%;}
The result should looks like:
<http://www.kriton.de/TEST/maxWidth.html>
If you incrase the font-size (in a modern browser, of course), the
container never becomes wider than the viewport.
I wonder if somebody could help me.
Thanks in advance,
Uwe Kaiser
As a beginner concerning JavaScript, I need some help in general.
I intend to change css-properties via Script.
Since MSIE/PC don't understand max-width in CSS, I need to give it
it's food in form of JavaScript.
With the following code I get the information I need. The width
of an HTML-Element (ID=Wrapper), the width of the viewport (don't
care about the measure of scrollbars), and the difference of the
subtraction (viewportWidth - wrapperwidth).
function maxWidth() {
if (document.getElementById) {
var wrapperWidth =
document.getElementById('Wrapper').clientWidth;
var viewportWidth = (document.documentElement.clientWidth ?
document.documentElement.clientWidth :
document.body.clientWidth);
var result = viewportWidth - wrapperWidth;
}
alert('Width of viewport: ' + viewportWidth + ' px\nWidth of
paragraph: ' + wrapperWidth + '
px\n-------------------------------------\nDifference . . . . . . ' +
result + ' px\n\n');
}
Example: <http://www.kriton.de/TEST/maxwidth.html>
If the viewport is smaller than the HTML-Element (ID=Wrapper), I get
a result with negative sign by this function. That's what I want.
In a more natural speech I want to do the following:
If container-width = smaller than viewport
then container-width = 42em;
If container-width is taller than viewport
than container-width = 97% of width of viewport;
That means, if the font-size will increased until the container
is wider than the width of viewport, the container's width should
be 97% of width of viewport, but I don't know, how to realize it.
I wasted a couple of hours by trying a lot of code already, but I
can't get the requested result.
In CSS it looks like:
#Wrapper {width: 42em; max-width: 97%;}
The result should looks like:
<http://www.kriton.de/TEST/maxWidth.html>
If you incrase the font-size (in a modern browser, of course), the
container never becomes wider than the viewport.
I wonder if somebody could help me.
Thanks in advance,
Uwe Kaiser