Completely blank tag cloud

gordon-matt commented 9 years ago

I tried integrating this cloud into my solution and no matter what i do I cannot seem to get it to work... at first I thought maybe there is some script or something conflicting an causing problems with jQCloud, so what i did was create an extremely basic static html page just for testing this and I even linked to the versions of the .js and .css files on your site, but still all I get is a blank screen. Here's my markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" /><meta name="description" /> <title>Home Page - My Site</title> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="container body-content"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <div id="demo"></div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> <script src="http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.js" type="text/javascript"></script>

`<script type="text/javascript">`
    `var basic_words = [`
        `{text: "Lorem", weight: 13},`
        `{text: "Ipsum", weight: 10.5},`
        `{text: "Dolor", weight: 9.4},`
        `{text: "Sit", weight: 8},`
        `{text: "Amet", weight: 6.2},`
        `{text: "Consectetur", weight: 5},`
        `{text: "Adipiscing", weight: 5},`
        `{text: "Elit", weight: 5},`
        `{text: "Nam et", weight: 5},`
        `{text: "Leo", weight: 4},`
        `{text: "Sapien", weight: 4},`
        `{text: "Pellentesque", weight: 3},`
        `{text: "habitant", weight: 3},`
        `{text: "morbi", weight: 3},`
        `{text: "tristisque", weight: 3},`
        `{text: "senectus", weight: 3},`
        `{text: "et netus", weight: 3},`
        `{text: "et malesuada", weight: 3},`
        `{text: "fames", weight: 2},`
        `{text: "ac turpis", weight: 2},`
        `{text: "egestas", weight: 2},`
        `{text: "Aenean", weight: 2},`
        `{text: "vestibulum", weight: 2},`
        `{text: "elit", weight: 2},`
        `{text: "sit amet", weight: 2},`
        `{text: "metus", weight: 2},`
        `{text: "adipiscing", weight: 2},`
        `{text: "ut ultrices", weight: 2},`
        `{text: "justo", weight: 1},`
        `{text: "dictum", weight: 1},`
        `{text: "Ut et leo", weight: 1},`
        `{text: "metus", weight: 1},`
        `{text: "at molestie", weight: 1},`
        `{text: "purus", weight: 1},`
        `{text: "Curabitur", weight: 1},`
        `{text: "diam", weight: 1},`
        `{text: "dui", weight: 1},`
        `{text: "ullamcorper", weight: 1},`
        `{text: "id vuluptate ut", weight: 1},`
        `{text: "mattis", weight: 1},`
        `{text: "et nulla", weight: 1},`
        `{text: "Sed", weight: 1}`
    `];`
    `$('#demo').jQCloud(basic_words);`
`</script>`

</body> </html>

I suppose I must be doing something wrong somewhere, but for the life of me I can't see it. Any help would be much appreciated. Note; when inspecting in FireBug, I can see that the jqcloud class is added to the div.. so something is happening, but for some reason nothing is visible.

gordon-matt commented 9 years ago

Nevermind; I figured out that I needed to add some css as follows:

#demo { margin: 0 auto; width: 80%; max-width: 600px; height: 250px; } #demo span { text-shadow: 0px 1px 1px #fff; }

It really should be stated more clearly in the documentation that we should expect a blank without this.

mistic100 commented 9 years ago

It's explicitly said I the big red block "Container dimensions & position" I the doc

mistic100 / jQCloud

Completely blank tag cloud #9