ansaurus

Question

dynamically generated html doesn't wrap to the screen.

Answer 1

A:

Add this rule to your style sheet and the list items will wrap correctly:

#main{
    word-wrap:break-word;
}

This is a variant of the expanding box problem.

AndrewDotHay 2010-06-29 17:28:31

I used that css, but I don't want the words to break, just the sentence. So not "apple boat car", but "appleboat car". I f you get what I'm saying.

2010-07-01 18:40:06

Answer 2

+1 A:

Looks like it's wrapping. what browser are you using?

http://jsbin.com/avopu4/edit

Catfish 2010-06-29 17:36:36

He's obviously left off a key bit of CSS and/or HTML. For fun, try adding `position: absolute` to the `<li>` CSS.

Brock Adams 2010-06-29 18:18:01

I'll include the whole thing

2010-07-01 18:40:26

jsbin works. hmm.

2010-07-01 18:42:42

Answer 3

A:

full code

<!DOCTYPE html>
<html lang="en">
<head>
<title>cloud generator</title>
<meta charset=utf-8">
<script src="http://www.google.com/jsapi?key=ABQIAAAALubzLxDPe376ukzxpz6qlRSeRrtKW42wftmgVeTHJfwF5iQHORSEne6ICdaMBMcnlC7OHYbOJMJ86Q" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.4.2");
    google.load("jqueryui", "1.8.0");
</script>
<script type="text/javascript">
$(function(){

    $('#btn').click(function(){
        var lorem = $('#lorem').val();
        var uLorem = lorem.toLowerCase().replace(/\W/g," ");    
        var aLorem = uLorem.split(" ");
        var oLorem = {};
        var min = 1;
        var max = 2;
        var count = 0;  

        for(var i = 0; i < aLorem.length; i++){
            var word = aLorem[i];

            if(word.length > 4){
                if(oLorem[word]){
                    oLorem[word]++;
                    count = oLorem[word];
                    if(count > max){
                        max = count;
                    }
                }
                else{
                    oLorem[word] = 1;
                }
            }
        }

        var index = 0;
        for(var val in oLorem){
            var m = oLorem[val];
            var r = (Math.floor(index/360)+1) * 100;

            if(m > 1){
                var $val = $("<li></li>")
                            .addClass("word")
                            .css({
                                "font-size": 150*(1.0+(1.5*m - max/2)/max) + "%",
                                "color": "rgb(" + 180/m + "," + 180/m + "," + 180/m + ")",
                                "top": r*Math.cos(index)+r,
                                "left": r*Math.sin(index)+r
                            }).
                            attr({
                                "count": m
                            })
                            .text(val);
                $('#main ul').append($val);
                index++;
            }
        }   
    });
});
</script>
<style type="text/css">
#lorem{
    display: block;
    width: 100%;
}
#main{

}
.word{
    margin: 5px;
}
li{
    list-style-type: none;
    display: inline;
}
</style>
</head>
<body>
<div id="header">
    <h1>cloud generator</h1>
    <textarea id="lorem"></textarea>
    <button type="button" id="btn">Create cloud</button>
</div>
<div id="main">
    <ul></ul>
</div>
</body>
</html>

2010-07-01 18:44:14

screenshot:http://img25.imageshack.us/img25/558/snap2ut.gif

2010-07-01 19:10:06

ansaurus

tags:

views:

answers:

dynamically generated html doesn't wrap to the screen.

related questions