CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Abraham
John Abraham

Reputation: 18821

Dynamically and completely fill a div with placeholder text in javascript

I would like to Fill a div with placeholder text.

I have a div that is 100% width+height. Due to many form factors this height and width will be changing based on the users resolution. How can i dynamically fill that div with lorem ipsum. Also how would i recalculate if window sizes changes? I know i could manually do this with copy paste and overflow hidden but I would rather achieve this in javascript

JSFiddle

css

    html,body {
        /*background:#edecec;*/
        height: 100%;
    }
    .block-text{
        text-align: justify;
        font-size: 8px;
        font-color: rgba(88,89,91, 1);
        font-family: georgia;

        line-height: 7px;
    }

html

    <div class="block-text">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.
        </p>

    </div>

Upvotes: 0

Views: 1619

Answers (2)

Emil L
Emil L

Reputation: 21111

I realize you wanted to solve this with javascript, but have you considered using css psuedo-elements with content? If this is just for placeholder text as you develop I think it will do what you want without having to add a bunch of javascript and fiddle with resize events.

.block-text>p:after { 
    content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.';
}

Upvotes: 0

Kjeld Schmidt
Kjeld Schmidt

Reputation: 768

http://jsfiddle.net/h54tP/1/

var bool = true;
var maxHeight = $('.block-text').height();


do {
    $('.container').append("<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.   Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora. </p>");
    if ($('.container').height() > maxHeight) bool = false;
} while (bool);

Here, as described in my comment. One wrapping element insinde your text box, the block-text set to 100% height and a small while loop do the trick.

Small note: This will not do anything when the window is resized. For that, however, you could just call that entire code inside a window-size-change function.

Also, this allows the text to be slightly larger than the screen. If you want it slightly smaller instead, just do 

$('.container').children().last().hide();

in the "if"-clause.

Upvotes: 0

Related Questions