Pulling HTML content using ajax in wordpress post

Question

Okay, I'm currently working on a website and I wanted to embed a timeline into each post. I am using WordPress. The timeline I insert would differ from post to post so this timeline cant be inserted into the actual theme I'm using? I'm also very new to PHP, HTML, and JS. But I have searched a ton of forums and cannot for the life of me figure out how to do this. Anyway Here is a link to my timeline. http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html

And here is a link to the timeline embedded on my website using iFrame. http://www.derikgrass.com/events/?p=526

iFrame would work great only that the iframe needs to be much bigger than the timeline itself as the timeline extends when you click on events in the timeline as you can see from the links I provided. Here is the timelines html code:

<meta charset="utf-8">


<title>TimelineXML</title>
<meta name="description" content="">


<link rel="stylesheet" href="css/timelinexml.sleek.css">

    <section class="demo">
        <p> <br/><br/> </p>
        <div class="demo-box">
        <div id="my-timeline">
            <div class="timeline-html-wrap" style="display: none">



            </div>
            </div>
        </div>
    </section>

</div>



<!-- JavaScript at the bottom for fast page loading -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>


<!-- scripts concatenated and minified via build script -->

<script defer src="js/mylibs/timelinexml.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts -->

I want to embed this directly into specific posts I create. If anyone would be able to help me write the code in order to embed this timeline, I would be EXTREMELY appreciative. Thanks.

Answer 1

I think what you mean is that you just want to put his in your html

<iframe src="http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html" scrolling="no" height="400" width="900"> </iframe>

And change the width.

But you should go to the source (so follow that link) and you'll see he uses a nice js file to make it work. If you do that you'll see he's using this script:

http://codecanyon.net/item/jquery-timelinexml/1448100

I don't like scripts from there seeing I believe they are funky websites, but hey, it's your computer and server. You decide.