Putting it together
Putting it together
- Place the iframe containing Search! at the desired place on the integrating page.
- Include the general purpose javascript library jQuery, if not already present. [2]
- Include the iframeResizer.min.js script. [1]
- Include the following script block for iframeResizer to work and enable seamless scrolling. (The placement of the script block does not matter as long as it is after the inclusion of the jQuery and iframeResizer scripts.)
- Set the iframeID value in the script block to the actual value.
The Javascript Code
<script src="https://staging.textkernel.nl/SearchBox/js/iframeResizer.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $window = $(window),
iframeID = 'myIframe', //change this to Search iframe id on your page
iframe = document.getElementById(iframeID),
iframeWindow = iframe ? iframe.contentWindow : null,
$iframe = $('#' + iframeID);
function debounce(func, wait) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
$iframe.iFrameResize({enablePublicMethods: true, autoResize: false});
$window.on('scroll', debounce(function() {
var top = window.pageYOffset || document.documentElement.scrollTop;
if (top + $window.height() >= $iframe.height() + $iframe.offset().top) {
iframeWindow.postMessage('do-scroll', iframe.src);
}
}, 100));
$window.on('message', function(event) {
if (event.originalEvent.data.indexOf('check-scrolling-availability') >= 0) {
if ($('body').height() <= $(window).height()) {
iframeWindow.postMessage('do-scroll', iframe.src);
}
}
})
});
</script>