Hi
Im building a shoutbox:



Maybe this isn't the right place to post this thread because it's design related, but im using php to calculate shout height.

The problem is that my display space is limited, as you can see on the picture above, and i want to put as much shouts i can.
Since i can't predict the lenght of the user input, what i tried is to do some math.
I have 450px for displaying shouts.

PHP Code:

$maxHeight = 450; //px
for($i=0; $i<count($shouts); $i++) {
    // Math
    $length = strlen($shouts[$i]['shoutMSG']);
                        
    switch($length) {
        case ($length>=0) && ($length<=37): // 1 row
            $maxHeight -= 59;
        break;
        case ($length>=38) && ($length<=75): // 2 rows
            $maxHeight -= 69;
        break;
        case ($length>=76) && ($length<=110): // 3 rows
            $maxHeight -= 79;
        break;
        case ($length>=111) && ($length<=150): // 4 rows
            $maxHeight -= 89;
        break;
    }
                        
    $element = '<div class="inxShout">';
    $element .= '<div class="inxShout_avatar"><img src="./images/avatars/'.avatar_exist($shouts[$i]['shoutUsername']).'" height="24px" width="24px" /></div>';
    $element .= '<div class="inxShout_user"><a href="user-'.urlencode($shouts[$i]['shoutUsername']).'">'.$shouts[$i]['shoutUsername'].'</a></div>';
    $element .= '<div class="inxShout_time"><p>'.date("H:i",strtotime($shouts[$i]['shoutTime'])).'</p></div>';
    $element .= '<div class="inxShout_day"><p>Day '.$shouts[$i]['shoutDay'].'</p></div>';
    $element .= '<div class="inxShout_report" title="Report"><a href="#"><img src="../images/report.png" width="16px" height="16px"/></a></div>';
    $element .= '<br /><p class="shoutElement">'.$shouts[$i]['shoutMSG'].'</p>';
    $element .= '</div>';
    if($maxHeight > 0) echo $element;
    //echo 'DEBUG: '.$maxHeight.'<br />';
} 


As i can see it, this can be one of the solutions, not perfect though.
I could add a scroll bar but that would ruin the design.

Any ideas?

PHP cannot calculate heights of client side HTML objects, you will HAVEto use javascript to recalculate heights once the page is loaded.

Ok i understand that, but if a user inputs, in my case, 37 characters(one row in textarea), than the height of that element is 59px, 2 rows - 69px...4 rows - 89px

By checking the length of user input i can approximately guess the height which im subtracting from 450, of course this is only tested and works for my screen resolution and my font size.

I don't know any better way to write this, except javascript which will be more precise, but basically it's the same method.

And if the user has increased the text size in their browser?

I could add a scroll bar but that would ruin the design.

Why?

It's not particularly unusual to have them scrolling.

Easy way to add a scrollbar is to set a fixed height for the div in CSS, then stick an overflow: auto; on it.

Originally Posted by chrishirst

And if the user has increased the text size in their browser?

If i set fixed font size in pixels and not ems, it doesn't matter if the users change size in their browsers.

Originally Posted by chrishirst

Why?

It's not particularly unusual to have them scrolling.

I don't know, i just don't like that ugly scrolling bar, im thinking of writing my own.
Something like this:
http://2011.mild.ch/projects/productslider.html

Originally Posted by Physicsguy

Easy way to add a scrollbar is to set a fixed height for the div in CSS, then stick an overflow: auto; on it.

Or overflow-y:scroll;

Thanks for replaying, i already solved it i just wanted to see if someone has a different idea than mine, or maybe someone did something like that in the past.

overflow: auto; will allow horizontal scrolling if somebody posted a loooooooooooooooooooooooooooooooooong message that didn't get cut with wordwrap().

Also, try holding down Ctrl and scroll up. Or Ctrl + Plus. That will force increase the font size in any(?) browser. It's there for accessibility, so you can't stop it from doing that.

I know, but when user is typing in textarea which has defined "cols" attribute so as css width, text auto breaks to another line, so horizontal scroll is not necessary.

Ctrl+scroll zooms every element on page, it doesn't increase the font size.

I decided to display a constant number, it's not easy to paginate a dynamic set of results

If i set fixed font size in pixels and not ems, it doesn't matter if the users change size in their browsers.

Actually you would be wrong on that score. (Unless everybody happens to be using IE7 or lower)

Ctrl+Zoom may not increase pixel sized fonts, but Ctrl+ + does in ALL Browsers, as does View -> Zoom in most browsers, with FF you have to select "Zoom Text only" on the view -> Zoom menu, which will then increase pixel sized fonts.

Originally Posted by chrishirst

Actually you would be wrong on that score. (Unless everybody happens to be using IE7 or lower)

Ctrl+Zoom may not increase pixel sized fonts, but Ctrl+ + does in ALL Browsers, as does View -> Zoom in most browsers, with FF you have to select "Zoom Text only" on the view -> Zoom menu, which will then increase pixel sized fonts.

Are you sure?


================================================== ======


This is in FF, i think the same output will be in opera and chrome.

Try it.

http://www.modtalk.co.uk/_site/code/...perties/fonts/

Are we talking about the same thing because i don't think we understand each other.

Zoomed 250%, font-size was set to 1em, i changed it to 13px, but i think that's irrelevant because by inspecting the textarea you can clearly see that it's not the actual font size that is changed.



I can see that when "zoom text only" is selected it doesn't matter if the size was fixed or not, text goes bigger.