1

I have been searching about this subject now for quite a few days. And could not find a working or conclusive answer.

What I want to do, is to simply display the (styled) summary of the latest blog entry (from the blog page on my own site) in a div container on the front page of my site (which is not my blog). All active links of that mirrored blog entry ideally lead to the appropriate section of my blog page. That is however not a must, as long as the entire entry can link to the blog page.

Each blog entry summary on the blog summary page has a unique ID, sorted by numbers (e.g. unique-ID-51 (latest) unique-ID-50 (the one before) etc.) I was thinking of doing so with the document.getElementById JS command.

I would have to point the JS function to a relative location (../blog_folder/blog_summary.html) with maybe the .window.location.assign command, than grab the (styled) contents of the latest element and display that on my front page.

But I have no idea how that code would look in reality. Can you point me in the right direction?

Thank you !!!!!!!

M.

Daniel O'Hara
  • 13,307
  • 3
  • 46
  • 68
Wanni
  • 35
  • 1
  • 5

2 Answers2

1

You could add jQuery to your page and use a simple construction:

$('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');

An example chunk of code:

...
<body>
  <div class="result-container">There will be your content from some file.</div>
  <p>
    <a class="result-loader" href="#"></a>
    <script type="text/javascript">
        $(".result-loader").click(function() {
             //Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values
             $('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');
             return false;
        });
    </script>
  </p>
</body>
...

And that string somewhere inside the <head> tag:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

An example chunk of code with an autostart feature:

...
<body>
  <div class="result-container">There will be your content from some file.</div>
  <p>
    <a class="result-loader" href="#"></a>
    <script type="text/javascript">
        $(document).ready(function() { //Launches the code below right after the initialization event
             //Replace path/to/your/file.html and #id_of_element_to_fetch with appropriate values
             $('.result-container').load('path/to/your/file.html #id_of_element_to_fetch');
             return false;
        });
    </script>
  </p>
</body>
...
Daniel O'Hara
  • 13,307
  • 3
  • 46
  • 68
  • can you elaborate this? I have jQuery implemented, but not quite getting your line of code.... Place it inside a
    ? What's the ".result-container" bit mean? the name of my new div? and, the target element (#id_of_element), will it be fetched if it is part of the #content container?
     – Wanni May 14 '11 at 15:57
  • so, when I do the following:$('#result-container').load('path/to/your/file.html #id_of_element_to_fetch'); the page automatically is forwarded from the startpage (where the loaded content SHOULD appear) to the targeted page (where the content should COME FROM). .... – Wanni May 14 '11 at 16:06
  • Added some details to my answer. – Daniel O'Hara May 14 '11 at 16:22
  • Thank you thank you so much - I am a lot further than I was a few days ago...ok, now this works on click - after inserting a LINK text...(I refer to my own jQuery (1.6.1.min) though.). It is loading the text of the blog entry, the H1, all the tags etc and the formatting - but no included images An example blog entry here: http://www.photonopticum.com/photography_matters/photography_matters.html The two big remaining questions are, a) how to do this w/o a "click" (load automatically) and b) how to load the image – Wanni May 14 '11 at 18:35
  • b) You should modify an `href` attribute of any image inside the `.result-container` container (it should contain full absolute path to the image): `$('.result-container img').attr("href", "http://site.address.com/" + $('.result-container img').attr("href"));`. – Daniel O'Hara May 14 '11 at 18:43
  • Again, thank you very much ! :) it is working just as it should :) With all the problems that moron me did not think about: a) it is loading the div container WITH ALL ITS PROPERTIES like it should. b) all the properties from the loaded container include links and img sources. Unfortunately they refer to the ORIGINAL PATH from the source page (e.g. /files/blog-entries.html and /files/blog-image.jpg). This is why it does not load any images: there is no path /files/blog-image.jpg on the displaying index page (where the routine is called). CONTINUED – Wanni May 15 '11 at 15:08
  • CONTINUED: The path from there SHOULD be: ../blog/files/etc. . Hmpf. So, I guess you gave me a solution and me @#$%@ did not think it through.... Unless I can magically change paths automatically, this approach is not going to work for me.... I have to have a think how else I can make this work. And - I can't be the first one wanting to do this. Again, thank you for your help here !!!! This was brilliant. – Wanni May 15 '11 at 15:08
0

I assume you are using a hidden iframe?

This for example will thet the height of the style.. there are other things in the style

    this.container.getElementsByTagName("YOUuniqueID")[0].style.(STYLE)

But you have to put an unique ID in the iframe

Try and use the built in debuggers in IE or Chrome to find what you want...

You can take a look at this for maybe some more info(its for cross domain) but there could be something taht helps you. You might even consider using jquery to access that data.

Yet Another cross-domain iframe resize Q&A

Community
  • 1
  • 1
Piotr Kula
  • 9,597
  • 8
  • 59
  • 85