Created
May 12, 2017 15:08
-
-
Save jameswilson/869c0b7d66881e8f9c0e5f3dc8b33156 to your computer and use it in GitHub Desktop.
A script to make the jquery-ui dialog Responsive.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* Custom script to make jquery-ui dialog responsive. | |
* http://stackoverflow.com/a/16471891/413538 | |
*/ | |
(function ($) { | |
"use strict"; | |
function fluidDialog() { | |
var $visible = $(".ui-dialog:visible"); | |
// Each open dialog | |
$visible.each(function () { | |
var $this = $(this); | |
var dialog = $this.find(".ui-dialog-content").data("ui-dialog"); | |
var wWidth = $(window).width(); | |
// Check window width against dialog width. | |
if (wWidth < (parseInt(dialog.options.maxWidth, 10) + 50)) { | |
// Keep dialog from filling entire screen | |
$this.css("max-width", "90%"); | |
$this.css("width", "auto"); | |
} else { | |
// Fix maxWidth bug. | |
$this.css("max-width", dialog.options.maxWidth + "px"); | |
} | |
// Reposition dialog. | |
dialog.option("position", dialog.options.position); | |
}); | |
} | |
// Resize dialog on window resize. | |
$(window).resize(function () { | |
fluidDialog(); | |
}); | |
// Resize dialog if opened in a viewport smaller than dialog width. | |
$(document).on("dialogopen", ".ui-dialog", function () { | |
fluidDialog(); | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment