Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Javascript To Rotate Between Pages Within ONE HTML Page

Post a Comment
I would like some help displaying contents (to different pages) within one HTML page using JavaScript. This is a sample of what I have found so far: http://www.swan10.nl/stuff/test

Solution 1:

Umm, well you would need to use AJAX to pull the data into the page and display it in whatever method you choose. If you want to use a framework look into JQuery. It has nice AJAX functions. Otherwise read HERE

After re-reading your post I think you might just want to choose which div is displayed on a form at one time. This you can achieve by placing all of your divs in the same container. Then toggle their display css property.


Solution 2:

Using jQuery it's as simple as

$('#divname').load('/path/to/file.html');

Note that the result should probably not include <html> and <head> tags (although you don't seem like you care about well formed HTML code).

I should probably also mention that you shouldn't make the client load content for you, that's what server side code is for.


Solution 3:

Personally I would use the innerHTML property on one of your elements. It will allow you to add markup to that element. Check it out here: http://www.w3schools.com/jsref/prop_html_innerhtml.asp

<html> 
<head> 
<title>Multiple DIV</title> 
<style type="text/css"> 
DIV#db {  
  border : 1px solid blue; 
  width : 400px; 
  height : 400px; 
} 
</style> 
<script type="text/javascript"> 
  var Content = new Array();
  Content[0] = '<i>test1</i>';
  Content[1] = '<b>test2</b><br><img src =http://www.w3schools.com/images/w3schoolslogo.gif>';
  Content[2] = '<u>test3</u>';
  Content[3] = '<s>test4</s>';

function Toggle(IDS) {  
  document.getElementById('db').innerHTML = Content[IDS];
} 
</script> 
</head> 
<body onLoad="Toggle(0,10)"> 
<a href='#' onClick="Toggle(0)">FAQ #1</a> 
<a href='#' onClick="Toggle(1)">FAQ #2</a> 
<a href='#' onClick="Toggle(2)">FAQ #3</a> 
<a href='#' onClick="Toggle(3)">FAQ #4</a> 
<p /> 
<div id="db"></div>
</body> 
</html>

I updated it to work all javascripty with the innerHTML


Post a Comment for "Javascript To Rotate Between Pages Within ONE HTML Page"