PDA

View Full Version : inport text from file


nooto
01-31-2008, 08:22 AM
Hello,

I have the following case : 5 buttons (history, news, etc), and <div>... text + images...</div>. After click on every button only text and images has to change in the page.

How would you recommend me to accomplish this ??

1. By creating separate html for every theme (history, news, etc) and and use href command that after press on every button new html opens.

2. Maybe use javascript on click command to change the contents of the div? However I'm not really aware how to do this yet :D .

3.? (your offer)


Please tell me what would you do to solve this task. And your comments on the first method are welcome, is it ok? or is it bad?

Thanks!!

Ehm... sorry bad topic, just noticed... :) Thought of discussing importing text from file, then changed my mind....

sandstorm
02-01-2008, 05:59 PM
Hello,

1 is good if you are a beginner.

2 (a bit harder) you could put all the info in may divs and give them all ids such as div1, div2, ...

Then on the buttons, add an onclick attribute like <a onclick="show(divid)">Button Text</a> where divid is replaced by the id of the div you want to show by clicking the button.

Next, in the javascript section of your website, you want to have a function that hides all the divs.

function hideall() {
document.getElementById(divid1).style.display = 'none';
document.getElementById(divid2).style.display = 'none';
document.getElementById(divid3).style.display = 'none';
...

}

Then the function you call when the link is clicked is called show(divid):

function show(divid) { //argument identifis the div to show

document.getElementById(divid).style.display = 'block'; //show the div
hide(); //hide the others


}

If you don't have that much info, I'd personally go with method 2 - however, if there are lots of images and text, go with 1 to save bandwidth.

sandstorm
02-02-2008, 06:11 AM
Actually, the show function wuld look like

function show(divid) { //argument identifis the div to show
hide(); //hide the others
document.getElementById(divid).style.display = 'block'; //show the div
}

because you want to hide them all first.