Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Fires when __CodePenIFrameAddedToPage() fires.
makeCodePenEmbedsResizeable: function() {
if (window.innerWidth > 625) {
var maxWidth = 1000; // calculated below
var minWidth = 320;
var minHeight = 150;
$(".cp_embed_wrapper").each(function() {
var $wrapper = $(this);
var $iframe = $wrapper.find("iframe");
$wrapper.append("<div class='win-size-grip'></div>");
var originalHeight = $iframe.outerHeight();
$wrapper.css("height", originalHeight);
// Can't set this in CSS, otherwise height measurement will be wrong
$iframe.css("height", "100%");
$wrapper.resizable({
handleSelector: "> .win-size-grip",
onDragStart: function (e, $el, opt) {
$el.addClass("dragging");
maxWidth = $(".article-content").width();
if ($(".page-wrap").width() > $(".article-content").outerWidth()) {
maxWidth += ($(".page-wrap").width() - $(".article-content").outerWidth());
}
},
onDragEnd: function (e, $el, opt) {
$el.removeClass("dragging");
},
onDrag: function (e, $el, newWidth, newHeight, opt) {
if (newWidth > maxWidth) {
newWidth = maxWidth;
}
if (newWidth < minWidth) {
newWidth = minWidth;
}
if (newHeight < minHeight) {
newHeight = minHeight;
}
$el.width(newWidth);
$el.height(newHeight);
return false;
}
});
});
}
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.