Question

I am using this plugin ..but this plugin http://jquerymsgbox.ibrahimkalyoncu.com/ is not working in IE7.

Can anyone help me in fixing the issue..Please tell me what is the issue ..why this plugin is not working in IE7.Thanks in advance

Answer 1

Any way…the issue is solved here is the updated plugin code…

/*
jQuery.msgBox plugi-in 
Copyright 2011, Halil İbrahim Kalyoncu
*/
jQuery.msgBox = msg;
function msg (options) {
    var isShown = false;
    var typeOfValue = typeof options;
    var defaults = {
        content: (typeOfValue == "string" ? options : "Message"),
        title: "Warning",
        type: "alert",
        autoClose: false,
        timeOut: 0,
        showButtons: true,
        buttons: [{ value: "Ok"}],
        inputs: [{ type: "text", name:"userName", header: "User Name" }, { type: "password",name:"password", header: "Password"}],
        success: function (result) { },
        beforeShow: function () { },
        afterShow: function () { },
        beforeClose: function () { },
        afterClose: function () { },
        opacity: 0.1
    };
    options = typeOfValue == "string" ? defaults : options;
    if (options.type != null) {
        switch (options.type) {
            case "alert":
                options.title = options.title == null ? "Warning" : options.title;
                break;
            case "info":
                options.title = options.title == null ? "Information" : options.title;
                break;
            case "error":
                options.title = options.title == null ? "Error" : options.title;
                break;
            case "confirm":
                options.title = options.title == null ? "Confirmation" : options.title;
                options.buttons = options.buttons == null ? [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}] : options.buttons;
                break;
            case "prompt":
                options.title = options.title == null ? "Log In" : options.title;
                options.buttons = options.buttons == null ? [{ value: "Login" }, { value: "Cancel"}] : options.buttons;
                break;
            default:
                image = "alert.png";
        }
    }
    options.timeOut = options.timeOut == null ? (options.content == null ? 500 : options.content.length * 70) : options.timeOut;
    options = $.extend(defaults, options);
    if (options.autoClose) {
        setTimeout(hide, options.timeOut);
    }
    var image = "";
    switch (options.type) {
        case "alert":
            image = "alert.png";
            break;
        case "info":
            image = "info.png";
            break;
        case "error":
            image = "error.png";
            break;
        case "confirm":
            image = "confirm.png";
            break;
        default:
            image = "alert.png";
    }

    var buttons = "";
    $(options.buttons).each(function (index, button) {
        buttons += "<input class=\"msgButton\" type=\"button\" name=\"" + button.value + "\" value=\"" + button.value + "\" />";
    });

    var inputs = "";
    $(options.inputs).each(function (index, input) {
        var type = input.type;
        if (type=="checkbox" || type =="radio") {
            inputs += "<div class=\"msgInput\">" +
            "<input type=\"" + input.type + "\" name=\"" + input.name + "\" "+(input.checked == null ? "" : "checked ='"+input.checked+"'")+" value=\"" + (typeof input.value == "undefined" ? "" : input.value) + "\" />" +
            "<text>"+input.header +"</text>"+
            "</div>";
        }
        else {
            inputs += "<div class=\"msgInput\">" +
            "<span class=\"msgInputHeader\">" + input.header + "<span>" +
            "<input type=\"" + input.type + "\" name=\"" + input.name + "\" value=\"" + (typeof input.value == "undefined" ? "" : input.value) + "\" />" +
            "</div>";
        }
    });

    var divBackGround = "<div class=\"msgBoxBackGround\"></div>"
    var divTitle = "<div class=\"msgBoxTitle\">" + options.title + "</div>";
    var divContainer = "<div class=\"msgBoxContainer\"><div class=\"msgBoxImage\"><img src=\"../images/" + image + "\"/></div><div class=\"msgBoxContent\"><p><span>" + options.content + "</span></p></div></div>";
    var divButtons = "<div class=\"msgBoxButtons\">" + buttons + "</div>";
    var divInputs = "<div class=\"msgBoxInputs\">" + inputs + "</div>";

    if ($("div.msgBox").length == 0) {
        if (options.type == "prompt") {
            $("body").append(divBackGround + "<div class=\"msgBox\">" + divTitle + "<div>" + divContainer + (options.showButtons ? divButtons + "</div>" : "</div>") + "</div>");
            $("div.msgBoxImage").remove();
            $("div.msgBoxButtons").css({"text-align":"center","margin-top":"5px"});
            $("div.msgBoxContent").css({"width":"100%","height":"100%"});
            $("div.msgBoxContent").html(divInputs);
        }
        else {
            $("body").append(divBackGround + "<div class=\"msgBox\">" + divTitle + "<div>" + divContainer + (options.showButtons ? divButtons + "</div>" : "</div>") + "</div>");
        }
    }
    else {
        if (options.type == "prompt") {
            $("div.msgBox").html(divTitle + "<div>" + divContainer + (options.showButtons ? divButtons + "</div>" : "</div>"));
            $("div.msgBoxImage").remove();
            $("div.msgBoxContent").css("width", "100%");
            $("div.msgBoxContent").html(divInputs);
        }
        else {
            $("div.msgBox").html(divTitle + "<div>" + divContainer + (options.showButtons ? divButtons + "</div>" : "</div>"));
        }
    }

    var width = $("div.msgBox").width();
    var height = $("div.msgBox").height();
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    var top = windowHeight / 2 - height / 2;
    var left = windowWidth / 2 - width / 2;

    show();

    function show() {
        if (isShown) {
            return;
        }
        $("div.msgBox").css({ opacity: 0, top: top - 50, left: left });
        $("div.msgBoxBackGround").css({ opacity: options.opacity });
        options.beforeShow();
        $("div.msgBoxBackGround").css({ "width": $(document).width(), "height": getDocHeight() });
        $("div.msgBox,div.msgBoxBackGround").fadeIn(0);
        $("div.msgBox").animate({ opacity: 1, "top": top, "left": left }, 200);
        setTimeout(options.afterShow, 200);
        isShown = true;
        $(window).bind("resize", function (e) {
            var width = $("div.msgBox").width();
            var height = $("div.msgBox").height();
            var windowHeight = $(window).height();
            var windowWidth = $(window).width();

            var top = windowHeight / 2 - height / 2;
            var left = windowWidth / 2 - width / 2;

            $("div.msgBox").css({ "top": top, "left": left });
        });
    }

    function hide() {
        if (!isShown) {
            return;
        }
        options.beforeClose();
        $("div.msgBox").animate({ opacity: 0, "top": top - 50, "left": left }, 200);
        $("div.msgBoxBackGround").fadeOut(300);
        setTimeout(function () { $("div.msgBox,div.msgBoxBackGround").remove(); }, 300);
        setTimeout(options.afterClose, 300);
        isShown = false;
    }

    function getDocHeight() {
        var D = document;
        return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight));
    }

    function getFocus() {
        $("div.msgBox").fadeOut(200).fadeIn(200);
    }

    $("input.msgButton").click(function (e) {
        e.preventDefault();
        var value = $(this).val();
        if (options.type != "prompt") {
            options.success(value);
        }
        else {
            var inputValues = [];
            $("div.msgInput input").each(function (index, domEle) {
                var name = $(this).attr("name");
                var value = $(this).val();
                var type = $(this).attr("type");
                if (type == "checkbox" || type == "radio") {
                    inputValues.push({ name: name, value: value,checked: $(this).attr("checked")});
                }
                else {
                    inputValues.push({ name: name, value: value });
                }
            });
            options.success(value,inputValues);
        }
        hide();
    });

    $("div.msgBoxBackGround").click(function (e) {
        if (!options.showButtons || options.autoClose) {
            hide();
        }
        else {
            getFocus();
        }
    });
};

//function msg (content, title, type) {
//    msg({content:content,title:title,type:type});
//}

tested with IE7,IE8,Firefox 9..
Important lesson learned: Plugin previous code is trying to create new message box DIV in HTML tag. Due to some reason IE7 is not showing message box div which is a direct child of HTML tag . I have changed the plugin code to create message box div inside body tag and not html tag,so the plugin is now working fine in IE7,IE8,Firefox9.