To include content of html page as content in a tag

Question

1.00/5 (1 vote)

See more:

Hi,

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:

XML

<div id="changeContent" name="changeContent">
<div id="Page1"><iframe src="../history/Page1.html"></iframe></div>
<div id="Page2"></div>
</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.

Posted 23-Aug-13 19:52pm

archies_gall

Updated 23-Aug-13 19:54pm

v2

Add a Solution

Comments

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:

https://docs.google.com/file/d/0B8x7KQUPwp1KVTAzUDFfOU43Wms/edit

archies_gall 24-Aug-13 6:55am

https://docs.google.com/file/d/0B8x7KQUPwp1KeGFFU184RHpZaWM/edit?usp=sharing

Zoltán Zörgő 24-Aug-13 7:34am

Ah.
Do these page files have whole html structure? Head, body.. etc, or just the content needed?
Do you really need in data.js this: text[0]='<iframe src="../awards/Page1.html"></iframe> ';, wouldn't be enough this: text[0]='../awards/Page1.html'; - more precisely, do you need iframes?
Since if you have only the "body content" in the files and you use ajax, you can get what you want, without iframes.

archies_gall 24-Aug-13 8:10am

Hi,
I am not aware of AJAX at all :(
my "Page1.html"has whole html structure.
I will try by removing the iframe.
do Page1.html require only the contents and not the whole html structure??

archies_gall 24-Aug-13 8:16am

text[0]='../awards/Page1.html';

will take "../awards/Page1.html" this as text and will display it as it is.

Zoltán Zörgő 24-Aug-13 10:17am

Well, it is not that simple, but yes. The idea is to load the content of the pages into the inner table cell with ajax. It is easier if there is no head in the file, but it is not impossible to handle this. Look at the "Loading Page Fragments" section here: http://api.jquery.com/load/

archies_gall 24-Aug-13 14:08pm

Hi Zoltan,

Thanks for helping. I Have customized iframe in CSS file and my issue is solved :)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

**Zoltán Zörgő** · Answer 1 · 2013-08-24T10:21:00

I am glad you solved it with css, but using iframes is still not a good idea. I thought rather on something like this:

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
    body{ font-size: 12px; font-family: Arial; }
    table{ width: 100%; }
    td {border: 1px solid red;}
    #content {border: 1px solid green; width: 100%; height: auto;}
    </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
  var pages = 3;
  var page = 0;
  function load(inc){
    page = (page + inc) % pages;
    $("#content").load("/page"+(page+1)+".html");
    if(page==0) $("#prev").hide(); else $("#prev").show();
    if(page==pages-1) $("#next").hide(); else $("#next").show();
  }

  $(function() {
     load(0);
    });
  </script>
</head>
<body>

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

</div>
<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>
</td>
<td></td>
</tr>
</table>


</body>
</html>