Javascript DIV Replace Content

I need to alter DIV content and keep that content constrained to spefi

Page 1 of 1

1 Replies - 6892 Views - Last Post: 09 October 2009 - 09:15 AM

#1 BigVJohnson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 07-May 07

Javascript DIV Replace Content

Posted 07 October 2009 - 10:59 AM

Hey Guys,

Question about using Javascript to change the content of a given DIV inside the cell of a layout Table. I have this page http://www.servicema...om/PSN/PSN.html and for who its for, its more than adequate as it, but I want to allow the user to click on a nav item on the top bar and have the main content div change to display the correlating content. One more constraint is that I want the DIV to maintian the size of the current table cell and to place Scroll bars when needed.

I feel like I've seen this done before, I just cant remember where and/or how it was done.

I am also interested in placing a set of images within the Image Rotation placeholder and use a simple javascript link to allow the buttons on both sides to swap the images (I was thinking JQuery for this but I'm not sold on it).

Any help would be great!

Thanks,

-Vaughn

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript DIV Replace Content

#2 masteryee  Icon User is offline

  • D.I.C Regular

Reputation: 40
  • View blog
  • Posts: 271
  • Joined: 16-May 09

Re: Javascript DIV Replace Content

Posted 09 October 2009 - 09:15 AM

The following sample will let display an image in your div when you click on the navigation links; this should give you an idea on how to implement the div update logic. First give your div an ID so that we can access it in java script:

<div id="imageDiv" style="overflow: scroll; width: 625; height: 333;">



Add a javascript onclick event to all your links. Let's call it "loadContent(param)":
<a href="#" onclick="loadContent(0)"><font color="#CCCCCC">Home</font></a></font></b></td>
		<td width="170" height="67" background="images/PSN_05.jpg" align="center">
			<b><font face="Arial" color="#CCCCCC" style="font-size: 11pt">
            <a href="#" onclick="loadContent(1)"><font color="#CCCCCC">PSN Resources</font></a></font></b></td>
		<td colspan="2" background="images/PSN_06.jpg" width="226" height="67" align="center">
			<b><font face="Arial" color="#CCCCCC" style="font-size: 11pt">
            <a href="#" onclick="loadContent(2)"><font color="#CCCCCC">Performance Metrics</font></a></font></b></td>
		<td colspan="2" background="images/PSN_07.jpg" width="131" height="67" align="center">
			<b><font face="Arial" color="#CCCCCC" style="font-size: 11pt">
            <a href="#" onclick="loadContent(3)"><font color="#CCCCCC">Contact</font></a></font></b></td>



Now create the loadContent function. You can either build the div content by creating javascript objects and appending them to the div, or you can just simply update the innerHTML property:

function loadContent(index) {
   var myDiv = document.getElementById('imageDiv');
   myDiv.innerHTML = '<img border="0" alt="Image Slideshow" src="' + gImages[index] + '" width="' + myDiv.style.width + '"height="' + myDiv.style.height + 

'">';
}


Was This Post Helpful? 1

Page 1 of 1