My div is set up to show a line of text and it does that successfully. Later in the code I set the innerHTML of the div to show 15 lines of text and it only shows the 1st line.
I thought that block elements like divs automatically 'grow' based on their content -- and note that I'm not using any CSS that would affect the div in 'hiding' the overflow. Note that I put a 3-pixel-wide solid purple border around this div so I could visually assess its size as I change its 'innerHTML' from 1 line of text to 15 lines of text.
<div class="rbAdsLinksDiv" id="adLinksArea" style="border: 3px solid purple;">
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
</div>
When the web page first appears, it correctly shows that one line of text in the div:
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
Here is the CSS:
.rbAdsLinksDiv
{
margin-top: 5px;
}
Here is my PHP code that generates javascript to fill the div with 15 lines of new text:
$html = <<<HEREDOC
"<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>3) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>4) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>5) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>6) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>7) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>8) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>9) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>10) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>11) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>12) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>13) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>14) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>15) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
HEREDOC;
$outStr = "document.getElementById('adLinksArea').innerHTML = $html";
echo $outStr;
To make sure 'outStr' is correct, I display the contents of it in an iframe on my web page and yes indeed, all 15 lines of html code are there.
I expected to see all 15 lines above but all I see in the div is:
1) HEY WHERE ARE ALL THE AD LINKS?
and all the other 14 lines are missing.
I thought that when you update the 'innerHTML' of a div with more content that the div should automatically expand to show everything -- is that an incorrect assumption on my part? And if so, what do I need to do so that the div grows in size based on the number of lines of text, which will not always be 15 lines?
One of the things I tried in attempting to figure this out is instead of only 1 line of text, the div has 5 lines of text when it first appears on the page:
<div class="rbAdsLinksDiv" id="adLinksArea" style="border: 3px solid purple;">
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
<br />THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
</div>
THE ABOVE SHOWS CORRECTLY ON THE WEB PAGE -- I do in fact see all 5 lines of the above text on the web page when the page first loads.
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
THIS IS JUST ONE LINE OF TEXT TO BE REPLACED BY 15 LINES OF TEXT....
Then I change the 'innerHTML' of the div to display the 15 lines of text as above -- and the div shrinks and only shows me one line of the new text:
1) HEY WHERE ARE ALL THE AD LINKS?
So all the other 14 lines are not visible. I'm missing something basic here?
Maybe you need to add a plus onto the end of each line like this
"<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
"<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
"<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
"<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
That's the only reason I can think of especially when it's adding 1 line.
Note that javascript will use the + not php
If that is not the problem then you need to show the output from php of the innerHTML
Your document.getElementById('adLinksArea').innerHTML = $html needs to be enlosed in
<script></script>
tags in order to be executed by the browser.
If you check the generated HTML source of the page, the Javascript code will look like this:
document.getElementById('adLinksArea').innerHTML = "<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
"<br /><br /><b>3) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
...
So, the div 'adLinksArena' is assigned only the first line of the text and the other 14 lines are just strings not being assigned to anything. You can change the $html variable for the strings to be concatenated in Javascript:
$html = <<<HEREDOC
"<br /><br /><b>1) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
"<br /><br /><b>2) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />" +
...
"<br /><br /><b>15) HEY WHERE ARE ALL THE AD LINKS?</b><br /><br />"
HEREDOC;