Web Masters code with instructions on how to change the call back:
<script type="text/javascript">
( function( $ ) {
if ( $( "#s2ccontentframe" ).length ) { // unique id value for each iframe on the page
$('iframe#s2ccontentframe').iFrameSizer({
log : false, // For development
contentWindowBodyMargin: 0, // Set the default
browser body margin style (in px)
doHeight : true, // Calculates
dynamic height
doWidth : false, // Calculates
dynamic width
interval : 50, // interval in ms to
recalculate body height, 0 to disable refreshing
enablePublicMethods : true, // Enable methods
within iframe hosted page
autoResize : true, // Triggering resize
on events in iFrame
callback : function(messageData){ //
Callback fn when message is received
var frame_src = document.getElementById('s2ccontentframe').src;
if((frame_src.indexOf("article.php")
> 0) || (frame_src.indexOf("archives.php") > 0))
$('html, body').animate({
scrollTop: $("#s2ccontentframe").offset().top - 150},800);
}
});
}
} )( jQuery );
</script>
Notes:
If you place multiple iframes on one page, you will need to have a different "id" for each iframe. You will need to have the resizing script containing the callback function repeated for each iframe "id" on the page using a unique iframe "id" in each function (e.g. s2ccontentframe, s2ccontentframe2, s2ccontentframe3...)
If you have a content managed site (like WordPress), please make sure that the iframe resizing script is whitelisted in any security plugins.
- If your site does not include jquery, a link to jquery will be required above the code shown in step 1.