use javascript or Ajax to place content in div tag

pmiller

01-19-2012, 02:09 AM

Hi,

I am creating a webpage to display menu items in a div tag.
The premis of my page is to use 4 div tags.
1st div tag = company logo (top left)
2nd div tag = img of restaurant and address (top right).
3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc
4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag.

I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags.

The best response I got was with AJAX, but I am not familiar with this language yet.

Can I use JavaScript to do this?

Any suggestions?

Thank you,
Paul

xelawho

01-19-2012, 02:31 AM

the one-trick pony rides again :D

<html>
<head>

<style>
.hide{
display:none;
}
</style>
</head>

<body>
<input type="button" value="Lunch" onclick="changeDiv('lunch')"/>
<input type="button" value="Dinner" onclick="changeDiv('dinner')"/>
<input type="button" value="Directions" onclick="changeDiv('directions')"/>
<div id="lunch" class="hide">Lunch</div>
<div id="dinner" class="hide">Dinner</div>
<div id="directions" class="hide">Directions</div>

<script type="text/javascript">
var shownDiv="";
function changeDiv(thediv){
if(shownDiv){document.getElementById(shownDiv).style.display="none" }
document.getElementById(thediv).style.display="block"
shownDiv=thediv;
}
</script>
</body>
</html>

pmiller

02-04-2012, 03:17 PM

Hi,
Thank you for your help.
My problem is that I want to pull a web page into the div.
You have written it so that it pulls up the word, lunch, or dinner, etc.
How can I write the code so that when somenone clicks the button, it would call a web page into the div?
For example, I create a web page called lunch.htm. How would I call that page into the div?
Thank you,
Paul

xelawho

02-04-2012, 03:37 PM

the contents of the divs are up to you. One way would be to put an iframe with each page into each div, but you might be better off having one iframe and using the button to change the src