Click here to Skip to main content
15,746,302 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:

I created a page where i need to open different contents in the same TD tag on click on "Next" button which is also in the same TD tag.

I am doing it using div tag. the code which i have written is:
<div id="changeContent" name="changeContent">
<div id="Page1"><iframe src="../history/Page1.html"></iframe></div>
<div id="Page2"></div>

but this opens the html page in a small window and not the content of page.
(eg: if the page which i want to open has a text and an image then only text and image should be displayed in the TD tag along with the "previous" and "next" button.
Updated 23-Aug-13 19:54pm
Zoltán Zörgő 24-Aug-13 1:59am    
Not clear what you want or how confused you really are. IFRAME is a frame in the document, that can contain anything. It's size can be set by properties or css, but yes it looks like a small window in the page. And you speak about TD element, but there is no TD in your code (by the way using DIVs is a better approach, but implies more css). So please explain or draw some images and upload so we can see what you want.
archies_gall 24-Aug-13 4:01am    
I am not able to attach the file here.
Zoltán Zörgő 24-Aug-13 4:14am    
No, but you can share on other sites, and link here. But at least try to give a more comprehensive description.
archies_gall 24-Aug-13 6:47am    
Please see the below link:
archies_gall 24-Aug-13 6:55am

1 solution

I am glad you solved it with css, but using iframes is still not a good idea. I thought rather on something like this:
<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>load demo</title>
    body{ font-size: 12px; font-family: Arial; }
    table{ width: 100%; }
    td {border: 1px solid red;}
    #content {border: 1px solid green; width: 100%; height: auto;}
  <script src=""></script>
  var pages = 3;
  var page = 0;
  function load(inc){
    page = (page + inc) % pages;
    if(page==0) $("#prev").hide(); else $("#prev").show();
    if(page==pages-1) $("#next").hide(); else $("#next").show();

  $(function() {

<td width="70%" align="center">
<div id="content">

<a id="prev" href="#" onClick="load(-1);"><img class="imgCustom1" src="../Images1/previous.png" align="left" alt="Previous page"></a>
<a id="next" href="#" onClick="load(+1);"><img class="imgCustom1" src="../Images/Next.png" align="right" alt="Next page"></a>

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900