2

My school organization currently has a website that incorporates JQuery and uses "dialog" pop up boxes (JQuery-UI?). I am making the website responsive but do not know how to go about making the dialog boxes responsive. The only solution I have found is JQuery mobile but I am not sure how to implement it into our current website. I know my question is a little vague but I was wondering if anyone has a simple solution?

Here is what I believe to be the code for one of my pop-up boxes. ( I don't understand code very well) Any and all help is appreciated.

$( "#dialog-new" ).dialog({
        resizable: false,
        width:900,
        modal: true,
        autoOpen: false,
        buttons: {
            "Clear Form": function() {
      clearForm($("#newapsform"));

    },
            "Create Request": function() {

                if(formIsOkay($("#newapsform")))
                {
                    $.ajax
                    ({  
                      type: "POST",  
                      url: "system/aps2.newrequest.php",  
                      data: $("#newapsform").serialize(),  
                      success: function() 
                        {  
                            $( "#dialog-new" ).dialog( "close" );
                            $("#goodmsg").html("Created photo request successfully!");
                            $('#goodmsgdiv').fadeIn(1500).delay(3000).fadeOut(1500);

                            datatables.fnDraw();
                            searchtables.fnDraw();
                            phototables.fnDraw();
                            clearForm($("#newapsform"));
                        },
          error: function() 
                        {  
                            $( "#dialog-new" ).dialog( "close" );
                            $("#badmsg").html("Could not create request: Use the force next time.");
                            $('#badmsgdiv').fadeIn(1500).delay(3000).fadeOut(1500);
                        }

                    });
                }
            }
        }
    });
Derek
  • 69
  • 1
  • 2
  • 7
  • In general I don't think you should be making dialog boxes responsive. Dialogs should be small and concise. Hence they should fit on any screen anyway! If they are big then reconsider your design. – ZorleQ Jul 12 '13 at 18:18
  • I don't know what is the best practice for this but IMHO dialog boxes should be implemented for smaller screens. I don't find it easy to deal with dialogs on my phone. – Learner Jul 12 '13 at 18:21
  • It's not my website. A former employee designed it and at the time it was only used for desktops. Now my manager wants it to be accessible from mobile devices. So I have to make it responsive. If i had the skills/time to redesign the entire thing, believe me I would. – Derek Jul 12 '13 at 18:22

1 Answers1

2

I tried the demo from this answer and it worked when i resize my laptop browser. haven't tried on mobile, though.

Responsive jQuery UI Dialog ( and a fix for maxWidth bug )

the demo here: http://codepen.io/jasonday/pen/amlqz

edit:
looks like it works with:
jquery-1.10.1.js
jquery-ui-1.9.2.js

$( "#dialog-new" ).dialog({
      autoOpen: true,
        width: 'auto', // overcomes width:'auto' and maxWidth bug
        height: 300,
        maxWidth: 600,
        modal: true,
        fluid: true, //new option
        resizable: false,
        open: function(event, ui){ 
           fluidDialog(); // needed when autoOpen is set to true in this codepen
        },

        buttons: {
            "Clear Form": function() {
      ....
});

// run function on all dialog opens
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

// remove window resize namespace
$(document).on("dialogclose", ".ui-dialog", function (event, ui) {
    $(window).off("resize.responsive");
});

function fluidDialog() {
    var $visible = $(".ui-dialog:visible");
    // each open dialog
    $visible.each(function () {
        var $this = $(this);
        var dialog = $this.find(".ui-dialog-content").data("dialog");
        // if fluid option == true
        if (dialog.options.maxWidth && dialog.options.width) {
            // fix maxWidth bug
            $this.css("max-width", dialog.options.maxWidth);
            //reposition dialog
            dialog.option("position", dialog.options.position);
        }

        if (dialog.options.fluid) {
            // namespace window resize
            $(window).on("resize.responsive", function () {
                var wWidth = $(window).width();
                // check window width against dialog width
                if (wWidth < dialog.options.maxWidth + 50) {
                    // keep dialog from filling entire screen
                    $this.css("width", "90%");

                }
              //reposition dialog
              dialog.option("position", dialog.options.position);
            });
        }

    });
}
Community
  • 1
  • 1
abromli
  • 46
  • 2
  • Could you possibly post how to implement that into my current code. I'm not a very strong coder. :( – Derek Jul 12 '13 at 18:43