Embedding Roadmaps & POST Views
From Career Pathways Tutorial
(New page: == Introduction == There are several reasons you would want to embed roadmaps in your organization's web pages rather than simply linking to them. * Embedded roadmaps keep your visitors on...)
Newer edit →
Revision as of 02:27, 7 May 2009
Contents |
Introduction
There are several reasons you would want to embed roadmaps in your organization's web pages rather than simply linking to them.
- Embedded roadmaps keep your visitors on your site and maintain visual coherence with your branding
- Visitors won't feel like they've come to a dead end, and will always have a way to return to your home page
- You can track visitors using your standard analytics software, since visitors will still be visiting pages on your website
Basic Embedding
The standard way to embed roadmaps in your webpages is by using the "embed code" provided in a roadmap's "Drawing Properties" page. This code looks something like this:
<div id="pathwaysContainer" style="width:100%; height:600px"></div> <script type="text/javascript" src="http://oregon.ctepathways.org/c/published/lcc_accounting.js"></script>
This gives you the flexibility to easily adjust the width and height of the roadmap on your web page. However, to avoid scroll bars appearing on the page, you should adjust the width and height for each drawing.
Basic Embedding without Javascript
If you don't want to use a <script> tag to embed the drawings, you can alternatively use an iframe. This iframe code is actually written by the javascript method above.
<iframe width="800" height="600" src="http://oregon.ctepathways.org/c/published/lcc_accounting.html" frameborder="0" scrolling="auto"></iframe>
However, with this method you lose the URL-tracking functionality of the system. The "Basic Embedding" code includes a snippet of Javascript which reports back to the server the URL of the page embedding the drawing. If you choose to embed drawings by using an iframe, we request that you also include this bit of javascript which will report the page URLs back to our system. Be sure to insert the drawing code in the appropriate place.
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://oregon.ctepathways.org/c/log/INSERT_DRAWING_CODE_HERE?url='+window.location);
document.getElementsByTagName('body')[0].appendChild(s);
</script>
Advanced Embedding
This method was pioneered by PCC. If you want to get away from having to specify the width/height of the container for each drawing, there is a way to dynamically resize the iframe after the content has loaded.
In order for this to work, you need to be able to access an element inside the iframe from your containing document. Cross-site restrictions prevent this from being possible, since your containing document is on a different domain than the contents of the iframe. You need to get the contents of the iframe into a document on your domain. This is done via a proxy script that you will need to host on your domain. Note the change in the URL of the iframe:
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?code=lcc_accounting" frameborder="0" scrolling="auto"></iframe>
You'll also need jQuery for this to work, so go ahead and download that and include it in your <head>.
$(document).ready(function() {
$("#mapframe").load( function(){
// access frame content (must be on same domain)
var iContent = $(this.contentDocument);
// resize the iframe to match the canvas' dimensions
$("#mapframe").height(iContent.find("canvas").height());
$("#mapframe").width(iContent.find("canvas").width());
});
});
The proxy script can be written in any language. All it needs to do is echo the contents of the normal .html URL on oregon.ctepathways.org. A sample script in PHP follows:
<?php
echo file_get_contents("http://oregon.ctepathways.org/c/published/" . $_GET['code'] . ".html");
?>
Of course, you would want to include some sort of sanity-checking on the GET variable to ensure this script couldn't be used to include arbitrary files on your system or other domains. If your PHP settings restrict you from using file_get_contents to read a remote file, you will need to use CURL or something similar.
Dynamic Embedding
Link Tracking
We keep a list of all published roadmaps in the system, which is used in a couple places:
- The front-end website (link TBD) acts as a way for visitors to find a school based on the program they want to study.
- OLMIS provides detailed reports on occupations, and they (will) include links to your roadmaps on an occupational report page. This allows us to provide links to your web pages when we report programs to the OLMIS database, so that visitors end up on your website.
If we have the URL of the page on your website that is embedding a roadmap, we can use this link instead of the default oregon.ctepathways.org URL.
Page Tools
Personal tools
