CODEWITHSUNDEEP
phpmysqlcssdynamiclimit
Drew
Drew

Reputation: 6872

PHP/MySQL Limit Characters

Below is a preview of what I am dealing with: enter image description here

The heading, the text, and the image is all dynamically created based on the user. They can choose if they want to add a picture, and they can choose what text to put in the heading and the main content.

There cannot be any scrolling, so it has to be visible and cannot go past the bottom of that white.

My question is... how can I limit the text of the body?

I guess the confusing part for me is like.. what if a user has no picture and has a short heading, and creates some really long text to fit the size, but then later on decides to add an image.. then that long text will now no longer fit. So now.. I can't limit the text because it's already there.

I hope that makes sense. If anyone could help me through this and give me some ideas I would really appreciate it.

Upvotes: 0

Views: 459

Answers (4)

squarephoenix
squarephoenix

Reputation: 1003

Surround the entire thing with a container div of the fixed height which you desire with no padding, and inside that place another inner div with no margin and no fixed height, then as the user changes the content create a javascript function to check if the inner div is < the container div; and if not then do not allow the user to make that change - this way you are attacking the problem directly.

<script>
function checkDivs() {
 if(inner.style.height >= container.style.height) {
 //prevent change
 }
}
</script>
<div id='container'>
  <div id='inner'>
  //User-defined content
  </div>
</div>

This function would be attached to whatever GUI the user would edit the content through, as for how to prevent the change, I'd have to know more about your program.

Upvotes: 1

Baba
Baba

Reputation: 95161

its not only the text you need to limit but also the image thumbnail so that affect the style of your webpage

To limit the number of string .. i would you use a script form here php trim a string 

function trim_word($str, $length, $suffix = '...') 
{
    $len = strlen($str);

    if ($len < $length) return $str;

    $pattern = sprintf('/^(.{%d,}?)\b.*$/', $length);
    $str = preg_replace($pattern, '$1', $str);
    $str = trim($str);
    $str .= $suffix;

    return $str;
}

it trim the text and makes sure it always ends with a word ...

You can use http://phpthumb.sourceforge.net/ to generate thumbnail of fixed size all you need to do it set your desired height and width

Upvotes: 1

Jeremy Morgan
Jeremy Morgan

Reputation: 3372

There are a few different options to consider. You may want to limit the amount of text the user can enter for starters, to ensure it doesn't overflow.

One thing I would probably do is find the maximum amount of characters you're comfortable with on the page, and use substr on the output from the database to ensure that it never displays more.

http://php.net/manual/en/function.substr.php

You could have a "more" link that way the visitor could read more if they want, but it doesn't break the layout. I would use basic if statements for the logic (if picture exists, trim text to this, if not etc).

Hope that helps.

Upvotes: 1

user1170392
user1170392

Reputation:

Use this for whatever the user input is for adding text. It could limit the characters they use just change the 250 value.

<script>
        function countChar(val){
                                var len = val.value.length;
                                if (len >= 250) {
                                    val.value = val.value.substring(0, 250);
                                }else {
                                    $('#charNum').text(250 - len);
                                }
        };


    </script


<textarea id="field" name="description" onKeyUp="countChar(this)"></textarea>

Upvotes: 2

Related Questions