Script to modify contents of DIV (formatting errors)

[philrivoire]

Hello,

I am currently working on my school's website. The site is laid out with a DIV on the left set up as a menu (called "leftmenu") and a DIV to the right to display the content (called "maincontent"). Clicking a link in leftmenu calls a script which changes the content of "maincontent".

The script currently works as it should except for one small error. The appropriate heading, text and image load for each link, but the formatting between the image and the paragraph is lost. When the page originally loads, the image is set to "float:left" and the paragraph wraps around it to the right. However, when the script runs and changes the contents, the paragraph no longer wraps around the image, but is written below it.

Javascript function:

var nov12="News for November 12";
var nov11="News for November 11";
var nov10="News for November 10";

function writeNews(title,image,txt) 
{
document.getElementById("newsTitle").innerHTML=title;
document.getElementById("newsImage").src=image;
document.getElementById("newsText").innerHTML=txt;
}

HTML for the links calling the function and maincontent:

<div class="leftmenu">
		 			<h3>News</h3>
		<ul class="leftmenu">
			<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 12','img1.jpg',nov12)">Nov 12</a></li>
			<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 11','img2.jpg',nov11)">Nov 11</a></li>
			<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 10','img3.jpg',nov10)">Nov 10</a></li>
		</ul>			
		</div>

  <div class="maincontent">
  		 <h3 id="newsTitle">School News</h3>
			 <img id="newsImage" class="newsimagestyle" src="img1.jpg" />
  		 <p id="newsText"><img id="newsImage" class="newsimagestyle" src="" />Select the date from the menu on the left for news posted on that day.</p>
  </div>

I have also attached the "before.jpg" and "after.jpg" screen captures from the relevant section of the website so you can see what changes are happening to the formatting.

BEFORE:


AFTER:


Any help to keep the formatting in the same would be greatly appreciated. Thanks.

Phil

[Lerura]

you have 2 tags id'ed "newsImage"
One outside the paragraph and on inside the paragraph.
You can't have two element with with the same id. remove one of the or give one of them another id.

And In the end the secomd of these elements is overwritten by the call:

document.getElementById("newsText").innerHTML=txt;

When using innerHTML, all content of the element is replaced, including any tags.
Yoy might expect that the content after the call is:

<p id="newsText"><img id="newsImage" class="newsimagestyle" src="" />News for November 12</p>

but as all is replaced it is actually just:

<p id="newsText">News for November 12</p>

But we might need a working oage in order to help you furhter

[philrivoire]

Thanks for pointing out my error. I had tried putting the img tag inside and outside the p tag to get things to work, but with the img tag outside of the p tag, the results are the same as described above. I forgot to remove it from inside the p tag.

I don't have anywhere to post the page at the moment, so I'll just upload the .html file as a zip if anyone wants to load the page. It doesn't link to anything outside of the .html file, so it's self-contained.

html file all zipped up:
philrivoire-news-jstest.zip

[Lerura]

Do you also have the graphics needed.?
I might be able it iimtate your pictures but it is way better with the original images!

[philrivoire]

I haven't actually made any of the images. Right now, everything is just a placeholder. All I did was make a jpg image about 150px x 200px. The way I see it, the images shouldn't matter, just the place they hold.

[Lerura]

Hmmm! you havent floated your <p>

And when it is updated it somehow "forgets" that it should line up with the image.

To solve this you should add float:left to your <p> too.
But this does that the text starts lower than it does now.
This can then be solved by using a <div> here instead.
so:

<div id="newsText" class="newsimagestyle">Select the date from the menu on the left for news posted on that day.</div>

[philrivoire]

Switching the <p> tag to a <div> tag seems to have worked. Still don't understand why, but this should do what I want it to do. Thanks for your help.

Phil

[philrivoire]

Well, the width of the newstext block was all messed up. If it was really long (i.e. many lines) it wrapped properly, but if it was short, the width decreased to the point where a very short line would not wrap at all.

It turns out, by setting the width of the parent div to 100%, the problem was solved. How about that.