CODEWITHSUNDEEP
javascripttexthtml-lists
Ilias Moustakas
Ilias Moustakas

Reputation: 27

Javascript text - can't make it listed

soooo i have this function that prints one of 5 random texts ON an image (in my case, a notepad, like writing on it.)

function getatext()
{
   var whichtext=get_random();

    var text=new Array(5)
     text[0]="text0";
     text[1]="text1";
     text[2]="text2";   
     text[3]="text3";
     text[4]="text4";

     document.getElementById("notepad").innerHTML +=
             '<p class="notepad">'+(text[whichtext])+'</p>';

Thing is, every time i have text printed, it is printed on top of another, instead of like a new entry, and pushing the others down the list.

I tried <li> tags but most examples and tuts i can stumble upon use them in simple html pages, not in javascript text writes which appear somewhat more difficult (at least to me).

Using '<p class="notepad">'+'<li>'+(text[whichtext])+'</li>'+'</p>'; got me the list appear, though it is not printed ON the image, but way off. I guess it completely ignores the <p> tag this way?

I even tried creating a ul.notepad inside my .css in case it mattered.. What am I doing wrong?

EDIT: included from .css .notepad, p.notepad and <content> where all this is taking place:

#content {
    border-left:1px solid #000;
    border-right:1px solid #000;
    background:#ffffff;
    margin-left: 24.9%;
    width:75%;
    min-height:0;
    position:relative;  

.notepad {
        position: relative;
        background-repeat:no-repeat;  
        background-attachment:fixed; 
        width: 300px;
}

p.notepad {
    font-family:"Lucida Handwriting";
    position: absolute;
    top: 90px; 
    left: 65px;   
}

EDIT 2: after inspecting the problem some more, I've found out that position: absolute; inside my p.notepad is probably causing all this. A random text is printed for the first time, then when the time for the second text to be printed comes, it takes the same coords from p.notepad and that is why it prints it ontop of the 1st text. But having the position: absolute is important, otherwise the text it isn't printed ON my notepad image..

Upvotes: 0

Views: 98

Answers (3)

IniTech
IniTech

Reputation: 781

No need for the ul/li approach, the <p> </p> you have will suffice. I agree on the likely culprit as css - can you post your css?

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77996

My first guess is you have absolute positioning on the notepad class.

Try this CSS: 

.notepad {
    position:relative;
}

Upvotes: 0

cgp
cgp

Reputation: 41381

This is likely a CSS issue, not an HTML issue. The formatting of your HTML is likely overlapping. It is difficult without seeing the CSS.

Here is an example of basically what you are doing, but working:

http://jsbin.com/abemiv

Use: http://jsbin.com/abemiv/edit

to edit the source

Upvotes: 1

Related Questions