PDA

View Full Version : changing content of a div via another div that has menu items



jasonc310771
Mar 3rd, 2008, 12:07 AM
i wish to have two divs a left and right and a top and bottom frame and when the menu items in the left menu is clicked it changes the content of the center div to display the contents related to the hyperlink clicked.

how can i do this please without having the whole page reloaded.

thanks




<div id="Layer1" style="position: absolute; left: 12px; top: 14px; width: 639px; height: 21px; z-index: 1; vertical-align: middle"><div align="center">header</div></div>
<div id="Layer2" style="position: absolute; left: 12px; top: 37px; width: 105px; height: 21px; z-index: 2; vertical-align: middle">
<div align="center">menu</div>
</div>
<div id="Layer3" style="position: absolute; left: 121px; top: 37px; width: 531px; height: 21px; z-index: 3; vertical-align: middle">
<div align="center">main page</div></div>

gnomeontherun
Mar 3rd, 2008, 05:12 AM
you need some javascript that will load new pages into the div.

check out this for an example: http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

jasonc310771
Mar 3rd, 2008, 12:40 PM
i have looked at the link you gave and not sure what i am doing wrong.

this is what code i have how.

i am trying to get the menu in the left to change the content of the div on the right.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

</head>

<body>

<div id="Layer1" style="position: absolute; left: 12px; top: 14px; width: 639px; height: 21px; z-index: 1; vertical-align: middle">
<div align="center">header</div>
</div>

<div id="Layer2" style="position: absolute; left: 12px; top: 37px; width: 105px; height: 21px; z-index: 2; vertical-align: middle">
<div align="center">
<ul id="countrytabs" class="shadetabs">
<li><a href="http://bt.com" rel="countrycontainer">BT.com</a></li>
<li><a href="http://bt.com" rel="countrycontainer">Bt.com</a></li>
</ul>
</div>
</div>

<div id="countrycontainer" style="position: absolute; left: 121px; top: 37px; width: 530px; height: 21px; z-index: 3; vertical-align: middle">
<div align="center">main page</div>
</div>

</body>
</html>

gnomeontherun
Mar 3rd, 2008, 09:15 PM
You skipped some of the very first instructions about downloading a zip file with some js and css files. All of the documentation is there, even some examples. Check there first, you didn't read it all.

jasonc310771
Mar 3rd, 2008, 10:31 PM
ok i have got the zip and uploaded as is and cut out bit by bit what i do not need and then added my css to the demo page instead and all works ok.

but this method seems to only allow content to be added in the div from my site and not as the file name suggests external!

this is what i have so far and wish to have someone click one of my sites in the menu on the left and have the sites content placed in the div on the right.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ajaxtabs.js"></script>
</head>

<body>

<div id="Layer1" style="position: absolute; left: 12px; top: 14px; width: 639px; height: 21px; z-index: 1; vertical-align: middle">
<div align="center">header</div>
</div>

<div id="Layer2" style="position: absolute; left: 12px; top: 37px; width: 105px; height: 21px; z-index: 2; vertical-align: middle">
<ul id="countrytabs">
<li><a href="http://www.bt.com" rel="countrycontainer">BT.com</a></li>
<li><a href="http://www.bt.com" rel="countrycontainer">Bt.com</a></li>
</ul>
</div>

<div id="countrydivcontainer" style="position: absolute; left: 121px; top: 37px; width: 530px; height: 21px; z-index: 3; vertical-align: middle">
<div align="center">main page</div>
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>

gnomeontherun
Mar 4th, 2008, 12:45 AM
Ok the script talks about how to load an external link you need to use an IFRAME, not a DIV.

Here is the code they use. Try it and see.


<p><b>Demo #3- All contents fetched via "IFRAME"</b></p>

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="external1.htm" rel="#iframe" class="selected">Tab 1</a></li>
<li><a class="" href="external2.htm" rel="#iframe">Tab 2</a></li>
<li><a class="" href="external3.htm" rel="#iframe">Tab 3</a></li>

<li><a class="" href="external4.htm" rel="#iframe">Tab 4</a></li>
</ul>
<br style="clear: left;">
</div>

<div id="petsdivcontainer" style="border: 1px solid gray; padding: 5px; width: 550px; height: 150px; margin-bottom: 1em;"><iframe name="_ddajaxtabsiframe-petsdivcontainer" src="about:blank" marginwidth="0" marginheight="0" vspace="0" hspace="0" class="tabcontentiframe" style="width: 100&#37;; height: auto; min-height: 100px;" frameborder="0"></iframe></div>


<script type="text/javascript">

var mypets=new ddajaxtabs("pettabs", "petsdivcontainer")
mypets.setpersist(false)
mypets.setselectedClassTarget("link")
mypets.init()

</script>

<p><a href="javascript: mypets.loadiframepage('http://www.google.com')">Load "Google Homepage" into content container via IFRAME</a></p><!--webbot bot="HTMLMarkup" endspan i-checksum="13729" -->

jasonc310771
Mar 4th, 2008, 02:35 AM
i copied that code in a new page and tried it out but it just opened the page in a blank page and not inside the frame

gnomeontherun
Mar 4th, 2008, 04:39 AM
Well you still need to link to all of the files that are in that zip file. Please re-read the page fully, because its completely documented. Look at the differences in the code, and try to learn what you are using instead of just copying everything.

jasonc310771
Mar 4th, 2008, 09:58 AM
i used your code and up it in a new file inside the folder where all the other files are.

the original file from the zip works but this only allows files from the same site and folder to be put in the div. i am wanting to have a page from an external websites content put in.

jasonc310771
Mar 4th, 2008, 09:59 AM
basically two divs left and right, left has hyperlinks and right is blank or have default content dont matter.

you click hyperlink in left and the website it refers to opens in right div with left div staying the same without refreshing.