how to load target data into a division [Archive]

Click to See Complete Forum and Search --> : how to load target data into a division

jimf2

04-06-2010, 04:23 PM

Hi. Without using frames, but rather using Divisions, how can I create an anchor link that will load the target html into a scrollable division. I have the page set up with the anchors, and the division,but I need to load the resultant html into the scrollable division on the same page.
This is to create a Q&A page that has questions down the left side of the page, and on the right side there is a scrollable division where I want the target data to go.
I can use JavaScript ,but PHP and frames are not options I can use. Oh yes, and subsequent selections overwrite (replace actually) the contents of the target division.

Just need to be pointed in the correct direction,,

thanks

tirna

04-06-2010, 05:02 PM

Assuming the data is a string containing html then maybe something like the following will help.

1) Have an onclick event handler on each question's link which runs a function

2) The function should include:

document.getElementById("targetDiv").innerHTML = '';
document.getElementById("targetDiv").innerHTML = strHtml;

where strHtml is the html for that clicked question link.

3) Give targetDiv a css width and height and set its overflow to auto.

jimf2

04-06-2010, 08:31 PM

Thanks for your reply Tirna.
I've managed to see how this will work in IE8, but seems to not work in Firefox (i have javascript enabled). Is this function only available in IE?

tirna

04-06-2010, 08:35 PM

It should work in any browser.

If you can, post your code and css and I or someone else should be able to help.

tirna

04-06-2010, 09:08 PM

This is a demo if I correctly understand what you want.

I have tested this code in IE8 and FF3.6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>

</head>
<body>

<div id="qns">
<a id="q1" href="#" onclick="showAnswer(this.id);"> Question 1</a>
<a id="q2" href="#" onclick="showAnswer(this.id);"> Question 2</a>
<a id="q3" href="#" onclick="showAnswer(this.id);"> Question 3</a>
<a id="q4" href="#" onclick="showAnswer(this.id);"> Question 4</a>
</div>

<div id="ansContainer"></div>

</body>
</html>

jimf2

04-06-2010, 10:10 PM

Hi Tirna,
Thanks for your post. Your code title says PHP. I cannot use PHP.
Here is a snippet of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Page 4 Information</title>
<style type="text/css">

#content
{
position: absolute;
width: 65%;
top: 39px;
margin: 0cm 1cm 0cm 1cm;
padding: 20px;
font-size: 90%;
background-color: #fff;
color: blue;

}
div.scroll
{
height: 300px;
width: 300px;
float: right;
display: inline;
overflow: auto;
border: 1px solid #666;
background-color: #FDF5E6;
padding: 8px;
font-size: 80%;
}
div.resource
{
text-align:left;
margin-left:20px;
padding-left:45px;
}
</style>
</head>
<body>

<div id="content" style="border-top:.5em solid #66ff00">

<div align="center"><h1><strong>Welcome to Page 4</h1></p>

</div>
<div class="scroll">
<p align="justify"> <b> Answer to question 1.</b></p>
<p align="justify">Lorem ipsum dolor sit amet, donec sit praesent integer arcu eleifend,
blandit ac, dui nec. Quis vulputate sed in mi platea, nulla imperdiet
sed et, sed lorem, vulputate bibendum in elit. Etiam nulla nam nec ante
sodales mi, aliqua nibh accumsan fringilla, sem id elementum pellentesque est.
Sit lacinia leo odio at leo pede, elit molestie vitae montes, ornare ad porttitor
dictum morbi at erat, leo lobortis nullam aliqua, justo sed cursus augue nonummy.
Vitae ut accumsan erat turpis nullam, vel iste, enim mollis nec dolor congue.
Dolor praesent et, ut lobortis fusce, urna a massa ante, dictumst pede sapien sed.
Mattis at, amet in nullam a, possimus placerat nonummy consectetuer proident eget.
Litora wisi nullam, tortor bibendum accumsan amet dapibus curae, justo magna auctor
ac in massa per, non neque pulvinar. Arcu in proin dignissim ut nullam ligula.
Placerat vel tempor faucibus quisque mauris montes, ornare ante, amet pellentesque nec amet.
Odio enim accumsan porttitor.</p>

</div>

<h2>Questions and Answers</h2>

<div class="resource">
<a>Question 1 placed here? </a>
<p><a>Question 2 placed here? </a></p>
<p><a>Question 3 placed here? </a></p>
<p><a>Question 4 placed here? </a></p>
<p><a>Question 5 placed here? </a></p>
<p><a>Question 6 placed here? </a></p>

</div>
</div>
</body>
</html>

I'm thinking I'll need to load all the answer html's in the scroll division and somehow set the layer so the "selected" one is on top.

tirna

04-06-2010, 10:30 PM

Hi Tirna,
Thanks for your post. Your code title says PHP. I cannot use PHP.

Even though I used the PHP tag to wrap my code, the code is actually a standalone html file (with css and javascript included) which you can copy and paste into a file and then open it locally on your pc in any browser.

I just like the colours you get when wrapping code with PHP tags in a post as opposed to using the plain HTML or CODE tags :):)

I'm thinking I'll need to load all the answer html's in the scroll division and somehow set the layer so the "selected" one is on top.

Yes, you could do it that way, but imo that could get messy - but it's your call.

You should be able to use the html code I posted earlier as a template to get what you want.

jimf2

04-07-2010, 07:02 PM

Thanks for the template Tirna. I appreciate your effort.
I loaded it and works great. I'm planning to put the javascript in an external js file.
For the answers, var anwersA = ['',
'Answer to Q1',
'Answer to Q2',
'Answer to Q3',
'Answer to Q4'];
Is there a way to reference an external file rather than putting all the data here? I'm thinking some of the answers may be quite lengthy, or is it just better to pack them all into this .js file?

tirna

04-07-2010, 07:09 PM

no problem :)

Yes, I would put all the JS and CSS in external files to keep them separate from the html.

To link external js and css files to your web page, in the <head> add the following:

<head>

<script type="text/javascript" src="./lib/myJavascripts.js" ></script>
<link rel="stylesheet" type="text/css" href="./stylesheets/myCSSstyles.css" />

</head>

jimf2

04-07-2010, 07:55 PM

Thanks Tirna
Yup, I knew about the references needed in the header,, my question was really can I load the answers from an external file and call that file from the .js file. I wanted to have each answer as a separate file to make updating/editing easier.

Thanks

tirna

04-07-2010, 08:17 PM

oh ok, I misunderstood you :(

The way I would do that is to replace the answers div with an iframe (inline frame as opposed to a normal frame you didn't want to use)

You might also be able to use an <object> element instead of an iframe.

Changing my original code to an iframe is fairly easy. You can use the following as a template. Put the answer to each question in a separate html file and then edit the answresA array and add an iframe to the answers div.

I've edited showAnswer() accordingly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>

<div id="qns">
<a id="q1" href="#" onclick="showAnswer(this.id);"> Question 1</a>
<a id="q2" href="#" onclick="showAnswer(this.id);"> Question 2</a>
<a id="q3" href="#" onclick="showAnswer(this.id);"> Question 3</a>
<a id="q4" href="#" onclick="showAnswer(this.id);"> Question 4</a>
</div>

<div id="ansContainer">
<iframe id="ifrAns" src="" width="100%" height="100%" />
</div>

</body>
</html>

jimf2

04-07-2010, 10:26 PM

Well darn,
The iframe wrecks the layout, so I tried an object instead and my layout was OK, but the referenced HTML file does not get read in,(the same as having no object parameter), the answer division just displays the name of the HTML file ,,So I thought,
well, I'll just have to key it in, but formatting doesn't seem to be allowed. Also, if I want to continue answer text on the next line each line needs to be escaped with a backslash.

tirna

04-07-2010, 10:49 PM

Well darn,
The iframe wrecks the layout............

I don't see why it should :confused:

In my template I put the <iframe> inside the original ansContainer div which is set to 300px wide and 200px high. The iframe should be restricted to the dimensions and location of the div.

ansContainer has 'overflow: auto' which means scroll bars will only appear if the content of the html file containing the answers needs a larger area than the dimensions of the div to be displayed.

I tested in IE8 and FF3.6 and it looks fine.

If you can, post your code.

jimf2

04-08-2010, 05:00 PM

Hi Tirna, *** I'm using firefox for this page ***
I've packaged a single html page with the supporting CSS and JS file.
I found that I iframe cannot be a self closing element, so providing the close element fixed the layout problem, but still not loading the sample text from answer3.htm.
Changing the iframe to an object (open and close) will at least show the short answer for selection 1, but only shows the name of the answer file for the others rather than the content.
Firefox shows no errors on the console.
IE shows in its debug screen that the element "document.getElementById("ansC").innerHTML = answer[ansIndex];" is not valid.

Thanks for your time, I really appreciate this.

tirna

04-08-2010, 05:39 PM

The zip file has the answers in an iframe and so I fixed your showAnswer() to work with the iframe.

1) You were mixing the code in showAnswer() with the code I posted for an iframe solution and just a div without an iframe solution. (.innerHTML and .src)

2) With an iframe solution all the elements in answers must be strings of paths to html files and not just html strings. I put the html string you had in answers[1] in a file called Answers1.html

3) The file name in answers[3] had an extension .htm while the file on disk was called Answers3.html.

If you create an Answers1.html as decsribed in 2) and use the corrected showAnswer() below your web page should now work for Q1 and Q3 (q2 and q4 answers still need to be created).

I tested it in FF3.6 and it works ok.

var answer=['','Answer1.html',
'Answer2.html',
'Answer3.html',
'Answer4.html'];

function showAnswer(elemId) {
var ansIndex = elemId.substring(1);
document.getElementById("ansC").src = '';
document.getElementById("ansC").src = answer[ansIndex];
}

jimf2

04-09-2010, 03:19 PM

Hi Tirna .

Thanks very much for you help on this. The page works exactly how I need it.

Cheers!

tirna

04-10-2010, 04:02 PM

No problem - I'm glad you sorted it out at the end :)