Embedding Roadmaps & POST Views
From Career Pathways Tutorial
Due to browser compatibility issues, please use the latest version of Google Chrome or FireFox when using the Career Pathways Roadmap Web Tool.
Contents |
Introduction
There are several reasons you would want to embed Roadmap Drawings 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 the 
Drawing Properties page for Roadmap Drawings or POST Views. This code looks something like this:
<div id="pathwaysContainer" style="width:100%; height:600px"></div> <script type="text/javascript" src="http://washingtoncareerpathways.org/c/published/386/embed.js"></script>
This gives you the flexibility to easily adjust the width and height of the roadmap on your web page.
NOTE: 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. With this method you lose the URL-tracking functionality of the system. The code provided in the Basic Embedding instructions includes a snippet of Javascript which reports back to the server the URL of the page embedding the drawing. This iframe code is actually written by the javascript method above.
<iframe width="800" height="600" src="http://washingtoncareerpathways.org/c/published/386/embed.html" frameborder="0" scrolling="auto"></iframe>
NOTE: 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. Please be sure to insert the unique drawing id (e.g. 386 or 850) in the appropriate place.
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://washingtoncareerpathways.org/c/log/pathways/INSERT_DRAWING_ID?url='+window.location);
document.body.appendChild(s);
</script>
Advanced Embedding
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-domain 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 "src" URL of the iframe:
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?id=386" frameborder="0" scrolling="auto"></iframe>
You will also need jQuery on your site for this to work, so go ahead and download this and include it in your <head> tag. Or hot-link to the Google-hosted version. Read more about this here: 3 Reasons Why You Should Let Google Host jQuery For You
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Include this script somewhere on the page. It will wait until the iframe has loaded, then go look inside it to find the size of the canvas and resize the iframe appropriately.
$(document).ready(function() {
$("#pathwaysFrame").load( function(){
// access frame content (must be on same domain)
var iContent = $(this.contentDocument);
// resize the iframe to match the canvas' dimensions
$("#pathwaysFrame").height(iContent.find("canvas").height());
$("#pathwaysFrame").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 washingtoncareerpathways.org. A sample script in PHP follows:
<?php
$id = intval($_GET['id']); // ensure only numbers are passed in the query string
echo file_get_contents("http://washingtoncareerpathways.org/c/published/" . $id . "/view.html");
?>
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
If you use a CMS (Content Management System) which does not allow users to include <script> or <iframe> tags, you will need a different way to embed drawings.
PCC came up with a dynamic wrapper for their drawings which matches their site's colors and navigation. You can see an example here. They are also using the Advanced Embedding technique to dynamically resize the container. People wanting to link to a Roadmap Drawing or POST View only have to put the drawing code in the url, and the page automatically points the iframe to the new content.
The PHP script to something like this might look like the following:
<?php
include('your-header.htm');
?>
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://washingtoncareerpathways.org/c/log/pathways/<?=intval($_GET['id'])?>?url='+window.location);
document.body.appendChild(s);
</script>
<iframe id="pathwaysFrame" width="800" height="600" src="proxy.php?id=<?= intval($_GET['id']) ?>" frameborder="0" scrolling="auto"></iframe>
<?php
include('your-footer.htm');
?>
Link Tracking
We keep a list of all published Roadmap Drawings and POST Views in the system, which is used in a couple places:
- The front-end, public website (currently in development) provides a way for visitors (e.g. job seekers) to search for a community college that offers an occupation/program they want to study.
- OLMIS provides detailed reports on occupations, and they include links to your published Roadmap Drawings on an occupational report page [sample page provided]. 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 web page on your website that is embedding a roadmap drawing, we can use this link instead of the default link to that Roadmap or POST View on our oregon.ctepathways.org server.
If you're using the standard embed code found in the web tool, the link tracking is done automatically.
If you're using the advanced or dynamic method to write the <iframe> tag yourself, you will need to include the tracking code separately so that we can provide these links to OLMIS and other places.
<script type="text/javascript">
var s=document.createElement('script');
s.setAttribute('src','http://oregon.ctepathways.org/c/log/pathways/9999?url='+window.location);
document.body.appendChild(s);
</script>
Replace 9999 with the numeric ID corresponding to the drawing you're embedding. This is the number found in the published URL, i.e. the "885" from
http://oregon.ctepathways.org/c/published/885/embed.html
"Operation Aborted" Error in IE 7
Symptoms
You are seeing an "Operation Aborted" error in IE 7 when viewing your roadmaps or POST drawings embedded in your website. The drawing loads briefly then the browser shows an error page. Viewing the roadmap in IE 8 will cause a Javascript error, "Unable to modify the parent container element before the child element is closed", but the page will still display.
Explanation
You probably included the entire embed code within a container block of your page's template. A basic example which will cause this error is below:
<html>
<head>
<title>Test Drawing</title>
</head>
<body>
<div class="pageContent">
<div id="postContainer" style="width:100%; height:1050px"></div>
<script type="text/javascript" src="http://oregon.ctepathways.org/c/study/61/embed.js"></script>
</div>
</body>
</html>
Notice that the <script> tag is contained within the "pageContent" div element. The error occurs when the Javascript in the "embed.js" file modifies document.body, the parent of the pageContent div.
Solution
A simple fix is to move the <script> tag to be a direct child of the body.
<html>
<head>
<title>Test Drawing</title>
</head>
<body>
<div class="pageContent">
<div id="postContainer" style="width:100%; height:1050px"></div>
</div>
<script type="text/javascript" src="http://oregon.ctepathways.org/c/study/61/embed.js"></script>
</body>
</html>
An alternative is to use the Basic Embedding without Javascript method above. However, be sure to include the tracking code so that your links can be used and tracked in the system.
Page Tools
Personal tools
