Emulate max-width in MSIE/PC width: 36em; max-weidth: 97%; (Solutions a la Sven Tofte don't do it.

Discussion in 'Javascript' started by kriton, Apr 22, 2005.

  1. kriton

    kriton Guest

    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
    kriton, Apr 22, 2005
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Furman

    min-width max-width again

    Paul Furman, Feb 9, 2004, in forum: HTML
    Replies:
    10
    Views:
    698
    Beauregard T. Shagnasty
    Feb 9, 2004
  2. Lois
    Replies:
    1
    Views:
    3,179
    Ryan Stewart
    Dec 27, 2004
  3. Summercool
    Replies:
    9
    Views:
    869
    dorayme
    Oct 23, 2007
  4. Martjack Ecommerce
    Replies:
    0
    Views:
    515
    Martjack Ecommerce
    Dec 22, 2009
  5. Cal Who
    Replies:
    0
    Views:
    454
    Cal Who
    Jun 9, 2010
Loading...

Share This Page