Commit 38ea8f29 authored by svilayphiou's avatar svilayphiou

New example page: we can load content from part of an existing webpage!

parent dff731fe
......@@ -101,6 +101,7 @@ Concrete examples from which you can copy/paste specific features like:
- pagination_region-breaks.html: Page-breaks examples + pagination starting at page 3
- one-layout-per-page.html: when page number set to 0, then you can specify each page structure individually
- master-pages.html: Applying different master pages
- load-external-webpage.html: Loads as content a part of an existing webpage (i.e. from a newspaper website, a blogpost, a wiki...)
- draggable and resizeable elements (to come)
#### • /iceberg/
......
/**
* jQuery.ajax mid - CROSS DOMAIN AJAX
* ---
* @author James Padolsey (http://james.padolsey.com)
* @version 0.11
* @updated 12-JAN-10
* ---
* Note: Read the README!
* ---
* @info http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
*/
jQuery.ajax = (function(_ajax){
var protocol = location.protocol,
hostname = location.hostname,
exRegex = RegExp(protocol + '//' + hostname),
YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
query = 'select * from html where url="{URL}" and xpath="*"';
function isExternal(url) {
return !exRegex.test(url) && /:\/\//.test(url);
}
return function(o) {
var url = o.url;
if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {
// Manipulate options so that JSONP-x request is made to YQL
o.url = YQL;
o.dataType = 'json';
o.data = {
q: query.replace(
'{URL}',
url + (o.data ?
(/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
: '')
),
format: 'xml'
};
// Since it's a JSONP request
// complete === success
if (!o.success && o.complete) {
o.success = o.complete;
delete o.complete;
}
o.success = (function(_success){
return function(data) {
if (_success) {
// Fake XHR callback.
_success.call(this, {
responseText: (data.results[0] || '')
// YQL screws with <script>s
// Get rid of them
.replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
}, 'success');
}
};
})(o.success);
}
return _ajax.apply(this, arguments);
};
})(jQuery.ajax);
\ No newline at end of file
<!DOCTYPE HTML>
<html lang="en" class="normal">
<head>
<meta charset="utf-8">
<title>HTML2print</title>
<link rel="stylesheet" href="/main.less" type="text/less" media="all" charset="utf-8">
<link rel="stylesheet" href="/assets/lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
</head>
<body>
<!-- PAGES -->
<div id="pages">
<div id="master-page" class="paper">
<div class="page">
<section class="header">
</section>
<section class="body recipient">
</section>
<section class="footer">
</section>
</div>
</div>
</div>
<div id="interface">
<button id="preview" class="button">Preview</button>
<button id="debug" class="button">Debug</button>
<button id="spread" class="button">Spread</button>
<button id="hi-res" class="button">Hi-res</button>
<div class="dropdown">
<button id="zoom" class="button">Zoom</button>
<ul id="zoom-list">
<li><a href="#" title="25">25&thinsp;%</a></li>
<li><a href="#" title="33">33&thinsp;%</a></li>
<li><a href="#" title="50">50&thinsp;%</a></li>
<li><a href="#" title="75">75&thinsp;%</a></li>
<li><a href="#" title="100">100&thinsp;%</a></li>
<li><a href="#" title="150">150&thinsp;%</a></li>
<li><a href="#" title="200">200&thinsp;%</a></li>
<li><a href="#" title="300">300&thinsp;%</a></li>
</ul>
</div>
<div id="toc">
<button id="goto" class="button" href="#">Go&nbsp;to</button>
<ul id="toc-pages"></ul>
</div>
</div>
<div id="stories">
<article id="my-story"></article>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="/assets/lib/less-1.3.0.min.js"></script>
<script type="text/javascript" src="/assets/lib/jquery.min.js"></script>
<script type="text/javascript" src="/assets/lib/jquery.xdomainajax.js"></script>
<script type="text/javascript" src="/setup/setup.js"></script>
<script type="text/javascript" src="/assets/js/html2print.js"></script>
<script type="text/javascript" charset="utf-8">
$.ajax({
// HERE THE URL YOU WANT TO LOAD
url: 'http://diplomes2014.villa-arson.org/2014/06/25/lucile-diacono/',
type: 'GET',
success: function(res) {
var html = $(res.responseText);
// REPLACE '.main-content' WITH THE IDENTIFIER CORRESPONDING TO THE PART OF THE WEBPAGE YOU WANT TO LOAD
// (USE THE WEB ELEMENT INSPECTOR TO GET IT)
html.find('.main-content').appendTo($("#my-story"));
}
});
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment