Hey,

 

On one page of my website I have a Div with two Div's inside (I promise this isn't a bad joke) the two inner div's are laid out one at the top and one at the bottom. The top div, I've featured a photo collage of 5 people the bottom div with have a bio of all those 5 people as a whole. Each photo will be mapped to make those a clickable link once the link has been clicked the div below will displayed the bio information of said person.

 

hope you can get my drift - code works fine but the text i'm replacing it with (the bio of the said person) the text is part of the javascript meaning I have no control of setting paragraphs etc. here is my example:

 

<area shape="poly" coords="44,3,117,25,120,133,117,156,8,129"
href="javascript:ReplaceContentInContainer('DivID','bio information - blah blah blah')" />

 

The Bio information - Blah Blah Blah is the area I need to be able to format the text but I don't think this can be done, well I am a newbie so the chances are I'm probably incorrect.

 

Any help of suggestions would be appreciated.

I'm Guessing noone knows shame :-(

How much control over the text do you have. If you can put a character into the bio, say a pipe (|) then you can split on that and turn the array into your paragraphs.

I have full control of the site and text just need to bio of that person in question to appear on top of the writing in the second div which i've got working just need to be able to format the text.

 

maybe a new approach at this?

 

what do you mean '|', do you mean to to show where the paragraph ends/starts and use the array function to look for | and but a paragraph?

 

as you can tell I'm new too javascrip but learning am I close? lol

Am I right or wrong, really need help on this.

Yeah, that's what I'm thinking. In your href attribute, you'll seperate your paragraphs with something like a "|" character:

 

<area shape="poly" coords="44,3,117,25,120,133,117,156,8,129"
href="javascript:ReplaceContentInContainer('DivID','bio information - blah blah|New para blah')" />

Then in your JavaScript, you split the bio information on the "|" and create paragraphs out of it:

 

function ReplaceContentInContainer(id, bio) {
   var container = document.getElementById(id),
       parasText = bio.split('|');
   container.innerHTML = '<p>' + parasText.join('<\/p><p>') + '<\/p>';
}

When ReplaceContentInContainers is called, it will change the container to have markup similar to this:

 

<div id="DivID">
   <p>bio information - blah blah</p>
   <p>New para blah</p>
</div>

Thank you for getting back, I will try this out and report back.

Yeah, that's what I'm thinking. In your href attribute, you'll seperate your paragraphs with something like a "|" character:

 

<area shape="poly" coords="44,3,117,25,120,133,117,156,8,129"

href="javascript:ReplaceContentInContainer('DivID','bio information - blah blah|New para blah')" />

 

 

Then in your JavaScript, you split the bio information on the "|" and create paragraphs out of it:

 

function ReplaceContentInContainer(id, bio) {

var container = document.getElementById(id),

parasText = bio.split('|');

container.innerHTML = '<p>' + parasText.join('<\/p><p>') + '<\/p>';

}

 

 

When ReplaceContentInContainers is called, it will change the container to have markup similar to this:

 

<div id="DivID">

<p>bio information - blah blah</p>

<p>New para blah</p>

</div>

 

this has worked beautifully thank you Skateside