Your generous donation allows me to continue developing and updating my code!
Ben Alman » <?= $shell['title1'] ?><? if ( $shell['title2'] ) { print ' » ' . $shell['title2']; } ?><? if ( $shell['title3'] ) { print ' » ' . $shell['title3']; } ?>
Ben Alman
' . $shell["title$i"] . '';
} else {
print $shell["title$i"];
}
$i++;
}
?>
" . $shell["h$i"] . "";
$i++;
}
?>
$title ";
}
}
$base = '';
draw_shell();
}
?>
$(function(){
// Bind the resize event. When any test element's size changes, update its
// corresponding info div.
$('.test').resize(function(){
var elem = $(this);
// Update the info div width and height - replace this with your own code
// to do something useful!
elem.closest('.container').find('.info')
.text( this.tagName + ' width: ' + elem.width() + ', height: ' + elem.height() );
});
// Update all info divs immediately.
$('.test').resize();
// Add text after inline "add text" links.
$('.add_text').click(function(e){
e.preventDefault();
$(this).parent().append( ' Adding some more text, to grow the parent container!' );
});
// Resize manually when the link is clicked, but only for the first paragraph.
$('.add_text:first').click(function(){
$(this).parent().resize();
});
});
$(function(){
// Append an iFrame to the page.
var iframe = $('').insertAfter('#iframe-info');
// Called once the Iframe's content is loaded.
iframe.load(function(){
// The Iframe's child page BODY element.
var iframe_content = iframe.contents().find('body');
// Bind the resize event. When the iframe's size changes, update its height as
// well as the corresponding info div.
iframe_content.resize(function(){
var elem = $(this);
// Resize the IFrame.
iframe.css({ height: elem.outerHeight( true ) });
// Update the info div width and height.
$('#iframe-info').text( 'IFRAME width: ' + elem.width() + ', height: ' + elem.height() );
});
// Resize the Iframe and update the info div immediately.
iframe_content.resize();
});
});
$(function(){
// Bind the resize event. When the window size changes, update its corresponding
// info div.
$(window).resize(function(){
var elem = $(this);
// Update the info div width and height - replace this with your own code
// to do something useful!
$('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );
});
// Updates the info div immediately.
$(window).resize();
});
With jQuery resize event, you can now bind
resize event handlers to elements other than window, for super-awesome-resizing-greatness!
The resize event on block and inline elements
Paragraph (block)
N/A
Click this link to add text!Notice that the info box updates
immediately, because the resize event is being triggered manually on click with .resize(). Resize
the browser window to be smaller with the mouse to see the info box update more slowly.
Span (inline)
N/A
Click this link to add text!Notice that the info box updates
slowly, because the resize event is *not* being triggered manually.
Textarea (block)
N/A
The code
Resizing an Iframe as its content grows
While this isn't the best approach to cross-domain Iframe resizing,
it is definitely useful for same-domain Iframes. The best part about this approach is that since all of the resizing
code is handled in the parent frame, the child page doesn't need to be modified.
N/A
The code
A throttled resize event on the window object
N/A
By default, the window resize event is throttled, making event behavior consistent across all elements (this can be disabled by setting jQuery.resize.throttleWindow property to false).
Just watch the "window" info box in the top right of the page as you resize the window to see how the event fires.