Click here to Skip to main content
15,887,027 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionGet selected Li from UL Pin
indian14323-Feb-15 15:02
indian14323-Feb-15 15:02 
AnswerRe: Get selected Li from UL Pin
Matt U.24-Mar-15 9:59
Matt U.24-Mar-15 9:59 
AnswerRe: Get selected Li from UL Pin
Simewu15-Jun-15 15:23
professionalSimewu15-Jun-15 15:23 
QuestionHiding a button which doesn't have an ID or Name Pin
indian14322-Feb-15 8:52
indian14322-Feb-15 8:52 
SuggestionRe: Hiding a button which doesn't have an ID or Name Pin
Kornfeld Eliyahu Peter23-Feb-15 6:07
professionalKornfeld Eliyahu Peter23-Feb-15 6:07 
GeneralRe: Hiding a button which doesn't have an ID or Name Pin
indian14323-Feb-15 12:05
indian14323-Feb-15 12:05 
AnswerRe: Hiding a button which doesn't have an ID or Name Pin
enhzflep27-Feb-15 5:48
enhzflep27-Feb-15 5:48 
QuestionNew to JQuery Pin
indian14319-Feb-15 9:08
indian14319-Feb-15 9:08 
Hi,

I have a js file in which code is written as below, I am not understand some of the statements from here, can you please let me know why and in which contexts we use these statements.

1. ELMS.Constructs.Popup = function (parameters) {
2. jQuery.fn.convertLinkToPopupWithClose = 
3. this.containerDiv = $("<div class='container'></div>").css (xxxx...),


I am not use what are these why are we trying to assign them to some values? how, where and when should we use them? Can you please explain them little bit?

if (!ELMS.Constructs) {
    ELMS.Constructs = {};
}

ELMS.Constructs.Popup = function (parameters) {
    var _that = this;

    this.offset = 10;
    this.parameters = parameters;
    this.displayed = false;

    this.waitElement = ELMS.Common.generateWaitDiv("Loading Popup...");

    this.outsideContainerDiv = $("<div class=\"popup\"></div>")
        .css({
            width: "450px",
            top: this.parameters.y.toString() + "px",
            left: this.parameters.x.toString() + "px",
            overflow: "hidden",
            paddingRight: "10px",
            paddingBottom: "10px",
            height: "400px"
        });

    this.containerDiv = $("<div class='container'></div>")
        .css({
            position: "relative",
            marginTop: this.offset.toString() + "px",
            width: "100%",
            paddingBottom: "36px",
            height: "100%"
        })
        .appendTo(this.outsideContainerDiv);

    //this.iframeContainerDiv = $("<div></div>")
    //        .css({
    //            width: "100%"
    //        })
    //        .height(this.parameters.height ? this.parameters.height : 400);

    $("<div class='handle'></div>").appendTo(this.outsideContainerDiv);

    this.createTitle = function (title) {
        _that.titleH2 = $("<h2>" + title + "</h2>");
        _that.containerDiv.prepend(_that.titleH2);
    };

    if (this.parameters.title)
        this.createTitle(parameters.title);

    //this.iframeContainerDiv.appendTo(this.containerDiv);

    this.setTitle = function (title) {
        if (!this.titleH2)
            this.createTitle(title);
        else
            this.titleH2.text(title);
    };

    this.iframe = $('<iframe class="popup" frameBorder="0" allowTransparency="true" name="PopupIframe"></iframe>')
        .css({
            width: "100%",
            height: "100%",//(this.parameters.height ? this.parameters.height : 400).toString() + "px",
            position: "absolute",
            zIndex: 1,
            marginTop: "25px",
            top: 0
        });

    this.iframe.appendTo(this.outsideContainerDiv);

    this.preClose = function () {
        if (_that.parameters.preCloseFunction)
            if (!_that.parameters.preCloseFunction(_that))
                return false;

        return true;
    };

    this.runningInternalClose = false;
    this.internalCloseFunction = function () {
        if (_that.runningInternalClose)
            return;

        _that.runningInternalClose = true;
        if (_that.iframe[0].contentWindow && _that.iframe[0].contentWindow.ELMS && _that.iframe[0].contentWindow.ELMS.Common.isDirty)
            if (!confirm("There are unsaved changes.  Would you like to leave this page?  Any unsaved changes will be lost."))
                return false;

        if (!_that.preClose())
            return false;

        if (_that.parameters.closeDestroys)
            _that.destroy.apply(_that, arguments);
        else
            _that.hide.apply(_that, arguments);

        if (_that.parameters.closeInformsParent) {
            var message = { action: "Close" };

            if (_that.parameters.closePayload)
                message.payload = _that.parameters.closePayload;

            _that.sendMessage(message);
        }

        _that.runningInternalClose = false;

        return true;
    };

    this.upperClose = $("<image alt='Close Popup' border='0' src='" + ELMS.Common.root + "/images/Popup-Close-Button.png' />")
        .css(
            {
                position: "absolute",
                border: "none",
                fontSize: 0,
                backgroundColor: "transparent",
                height: "25px",
                width: "25px",
                right: "0",
                top: "0",
                cursor: "pointer"
            }
            )
        .click(this.internalCloseFunction)
        .appendTo(this.outsideContainerDiv);

    if (this.parameters.showFooter) {
        this.footer = $("<div class=\"footer\"></div>")
            .css({
                position: "absolute",
                bottom: 0,
                width: "95%",
                marginLeft: "2%",
                zIndex: 3
            });


        if (this.parameters.showClose) {
            if (event.target.toString().match(/[^\/]+$/)[0].toString().split('?')[0].toString().split('&')[0].toString() != "Popup_ViewWaitingList.aspx") {
                this.closeButton = $("<button style=\"background:transparent url('" + ELMS.Common.root + "/Image.axd?t=Close&r=211&g=211&b=211&p=20&h=25') left top no-repeat;\">Close</button>").appendTo(this.footer);
                ELMS.Common.handleDynamicButtonImages(this.closeButton);

                this.closeButton.click(this.internalCloseFunction);
            }
        }

        this.footer.appendTo(this.containerDiv);
    }

    this.messageCallbacks = [];
    this.addMessageCallback = function (callback) {
        this.messageCallbacks.push(callback);
        return this;
    };

    var _popup_this = this;
    this.sendMessage = function (payload) {
        if (payload.action.toLowerCase() == "resize") {
            this.resize({ width: payload.payload.width, height: payload.payload.height });
        } else if (payload.action.toLowerCase() == "redirect") {
            _popup_this.destroy();
            ELMS.Common.getTopLevelWindow().ELMS.Common.wait();
            ELMS.Common.getTopLevelWindow().location.href = ELMS.Common.resolveUrl(payload.payload.url || payload.payload.redirectUrl);
        } else if (_popup_this.messageCallbacks.length == 0 && payload.action.toLowerCase() == "close") {
            if (_popup_this.parameters.showClose && _popup_this.closeButton)
                _popup_this.internalCloseFunction();
            else
                _popup_this.destroy();
        } else {
            for (var i = 0, callback; callback = _popup_this.messageCallbacks[i]; i++) {
                callback(_popup_this, payload);
            }

            $(ELMS.Common.getTopLevelWindow().document).trigger("ELMS:ReceivePopupMessage", [ _popup_this , payload ]);
        }
    };

    this.setPreCloseFunction = function (preCloseFunction) {
        this.parameters.preCloseFunction = preCloseFunction;
    };

    this.show = function (title, element) {
        if (element) {
            ELMS.Common.dimElementBackground(element);
        } else {
            ELMS.Common.dimBackground();
        }

        var div = this.outsideContainerDiv,
            body = ELMS.Common.getTopLevelWindow().document.body;

        if (div.parent().length > 0) {
            div.show();
        } else {
            if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
                var html = $("html")[0];

                if (html.scrollTop > 0)
                    div.css("top", (25 + html.scrollTop).toString() + "px");
            } else {
                var bodyScrollTop = document.scrollTop ? document.scrollTop : body.scrollTop;
                if (bodyScrollTop > 0)
                    div.css("top", (25 + bodyScrollTop).toString() + "px");
            }

            div.appendTo(body);

            if (!this.parameters.sourceIframe && !this.parameters.sourceElement && this.parameters.url)
                this.iframe.prop("src", this.parameters.url);

            if (!this.parameters.sourceIframe)
                this.wait();

            this.iframe.load(this.iframeLoaded);

            if (this.parameters.sourceIframe)
                this.iframeLoaded({ target: this.iframe[0] });

            div.draggable({ handle: ".handle" });
        }

        this.displayed = true;

        return this;
    };

    this.dimBackground = function () {
        var div = this.outsideContainerDiv,
            height = div.height() - this.offset,
            width = div.width() + 1;

        $("<div class='dimBG'></div>")
            .css({
                position: "absolute",
                top: this.offset.toString() + "px",
                left: 0,
                height: height.toString() + "px",
                width: width.toString() + "px",
                background: "transparent url('" + ELMS.Common.root + "/images/Transparent-Bg.png') left top repeat",
                zIndex: 3
            })
            .appendTo(div);

        //Disable the upper-right close button -- this technically breaks the boundary of our BG cover, so someone could click it.
        this.upperClose.css("cursor", "default").off("click", this.internalCloseFunction);
    };

    this.undimBackground = function () {
        this.outsideContainerDiv.find(".dimBG").remove();
        this.upperClose.css("cursor", "pointer").click(this.internalCloseFunction);
    };

    this.wait = function (message) {
        this.outsideContainerDiv.data("oldHeight", this.outsideContainerDiv.height());
        this.outsideContainerDiv.height(this.containerDiv.outerHeight() + 10);

        this.waitElement.find("p").text(message);

        this.dimBackground();
        this.waitElement.appendTo(this.containerDiv).center(this.containerDiv);
    };

    this.unwait = function () {
        this.outsideContainerDiv.height(this.outsideContainerDiv.data("oldHeight"));

        this.undimBackground();
        this.waitElement.remove();
    };

    this.iframeContentLoaded = function (popup) {
        if (popup) {
            //ELMS.ActivePopup = popup;

            var urlChanged = popup.currentUrl && popup.currentUrl != popup.iframe[0].contentWindow.location.href;
            popup.currentUrl = popup.iframe[0].contentWindow.location.href;

            if (popup.iframe[0].contentWindow.ELMS)
                popup.iframe[0].contentWindow.ELMS.ParentPopup = popup;

            $(popup.iframe[0].contentWindow).resize(function () {
                if (!popup.resizing)
                    popup.resize({ basedOnContent: true });
            });

            if (popup.parameters.showTitle && !popup.parameters.title) {
                var text = $(popup.iframe[0].contentDocument).find(".title,h2").first().remove().text();

                if (popup.titleH2)
                    popup.titleH2.text(text);
                else
                    popup.createTitle(text);
            }

            var actionButtons = $(popup.iframe[0].contentDocument.body).find(".action-buttons");
            if (popup.parameters.showFooter && actionButtons.length > 0) {
                var clone;

                if (urlChanged && popup.parameters.processedActionButtons) {
                    this.footer.find(".action-buttons").remove();
                    popup.parameters.processedActionButtons = false;
                }

                if (popup.parameters.processedActionButtons) {
                    clone = this.footer.find(".action-buttons").find("button,input[type='submit']").remove();
                    popup.parameters.processedActionButtons = false;
                }

                if (!popup.parameters.processedActionButtons) {
                    popup.parameters.processedActionButtons = true;

                    clone = actionButtons.clone().css({
                        float: "left",
                        margin: 0,
                        padding: 0,
                        border: "none",
                        width: "auto"
                    });

                    if (popup.parameters.showClose && this.closeButton.parent().length > 0) {
                        this.closeButton.before(clone);

                        if (actionButtons.find("input[value='Cancel']").length > 0)
                            this.closeButton.remove();
                    } else
                        clone.appendTo(this.footer);
                }

                var sourceButtons = actionButtons.find("button,input[type='submit']");
                clone.find("button,input[type='submit']").each(function (index, button) {
                    var sourceButton = sourceButtons[index];
                    button = $(button);
                    button
                        //.off("click")
                        .click(function (event) {
                            $(sourceButton).click();
                        });

                    button.data(popup.iframe[0].contentWindow.$(sourceButton).data());

                    //This is a bit weird, but the event needs to be attached to the JQuery instance in the iframe.
                    //At the time this code is executed, $ by itself references the host page's JQuery instance.
                    popup.iframe[0].contentWindow.$("#" + sourceButton.id)
                        .on("prop", function (event) {
                            button.prop.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("attr", function (event) {
                            button.attr.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("removeProp", function (event) {
                            button.removeProp.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("removeAttr", function (event) {
                            button.removeAttr.apply(button, [].splice.call(arguments, 1));
                        });
                });

                popup.containerDiv.height(popup.containerDiv.height() - actionButtons.height());
                actionButtons.hide();

                if (popup.parameters.showClose && actionButtons.has("input[type='submit'][value='Close']").length > 0)
                    this.closeButton.remove();
            }

            if (popup.parameters.sourceElement) {
                var form = $("#form1")[0];

                if (form.removeAttribute)
                    form.removeAttribute("target");
                else
                    form.target = null;

                form.action = form.action.substring(0, form.action.length - 6);
            }

            popup.unwait();

            window.setTimeout(function () {
                popup.resize({ load: true, urlChanged: urlChanged });
            }, 250);
        }
    },

    this.iframeLoaded = function (event) {
        var popup = ELMS.WebControls.Popup.getPopup(event.target);
        
        if (popup.parameters.sourceIframe && popup.parameters.sourceIframe.tagName && popup.parameters.sourceIframe.tagName == "IFRAME") {
            popup.iframe[0].contentWindow.document.open();

            var html = $(popup.parameters.sourceIframe.contentWindow.document.documentElement).html();

            if ($.browser.msie)
                html = html.replace(/\<script/gi, "<script defer='true'");

            popup.iframe[0].contentWindow.document.write(html)
            popup.iframe[0].contentWindow.document.close();
        }

        $(event.target.contentDocument).ready
        (
            function () {
                popup.iframeContentLoaded(popup);
            }
        );
    };

    this.hide = function (parameters) {
        parameters = $.extend({ destroy: true, runCloseFunction: false }, parameters);
        if (parameters.runCloseFunction && !_that.preClose.call(this))
            return;

        var topWindow = ELMS.Common.getTopLevelWindow();
        if (this.displayed) {
            if (parameters.destroy)
                this.outsideContainerDiv.remove();
            else
                this.outsideContainerDiv.hide();  //just hiding

            if (parameters.element) {
                ELMS.Common.undimElementBackground(element);
            } else {
                ELMS.Common.undimBackground();
            }

            this.displayed = false;
        }

        if (parameters.destroy) {
            var popups = topWindow.ELMS.Page.Popups;

            for (var i = 0, popup; popup = popups[i]; i++) {
                if (popup == this)
                    popups.splice(i, 1);
            }
        }

        return this;
    };

    this.resize = function (parameters) {
        this.resizing = true;
        parameters = $.extend({ height: null, width: null, basedOnContent: false, load: false, urlChanged: false }, parameters);

        //If nothing sent in, ignore!!
        if (!parameters.height && !parameters.width && !parameters.basedOnContent && !parameters.load)
            return;

        parameters.widthSupplied = parameters.width != null;
        parameters.heightSupplied = parameters.height != null;

        var iframeBody = this.iframe[0].contentDocument ? this.iframe[0].contentDocument.body : this.iframe[0].contentWindow.document.body,
            titleH2Height = null;

        if (this.titleH2)
            titleH2Height = this.titleH2.outerHeight();

        if ((!this.parameters.height && parameters.load) || parameters.basedOnContent) {
            //this.iframeContainerDiv.height(0);

            parameters.height = iframeBody.clientHeight;// + ($.browser.msie ? 35 : 0);
        } else if (this.parameters.height)
            parameters.height = this.parameters.height;

        if (parameters.heightSupplied)
            this.parameters.height = parameters.height;

        if (parameters.height)
            this.containerDiv.animate({ height: parameters.height + (titleH2Height || 10) }, 250); //10 is offset of top margin
            //this.containerDiv.height(parameters.height);

        if ((!this.parameters.width && parameters.load) || parameters.basedOnContent) {
            if (parameters.basedOnContent || parameters.urlChanged || (parameters.load && !this.widthResized)) {
                parameters.width = iframeBody.scrollWidth - 10;//10 - right padding on container div for close button's transparency effect// + ($.browser.msie ? 75 : 25);

                this.widthResized = true;
            }
        } else if (this.parameters.width)
            parameters.width = this.parameters.width;

        if (parameters.widthSupplied)
            this.parameters.width = parameters.width;

        if (parameters.width)
            this.outsideContainerDiv.width(parameters.width);

        //this.iframe.css("height", "100%");

        this.outsideContainerDiv.height(this.containerDiv.height() + 400);

        if (titleH2Height != null)
            this.iframe.css("margin-top", (titleH2Height + 11).toString() + "px"); //11 is 10 for offset of top margin plus 1 for border of h2

        var _that = this;
        window.setTimeout(function () { _that.resizing = false; }, 250);
    };

    this.destroy = function (parameters) {
        this.hide(parameters);
        ELMS.Common.unregisterPopup(this);
    };

    if (this.parameters.sourceElement) {
        var _popup = this;

        $(this.parameters.sourceElement).click(
            function (event) {
                var form = $("#form1")[0];

                form.target = "PopupIframe";

                var qs = ELMS.Common.parseQueryString(form.action);
                if (typeof qs.Popup == "undefined")
                    form.action += (Object.keys(qs).length == 0 ? "?" : "&") + "Popup";

                _popup.show();
            });
    }
}

var control =
    {
        name: "Popup",
        getPopup: function (iframeOrUrl) {
            for (var i = 0, popup; popup = ELMS.Common.getTopLevelWindow().ELMS.Page.Popups[i]; i++) {
                if (typeof iframeOrUrl == "string") {
                    if (popup.parameters.url == iframeOrUrl ||
                        (popup.iframe && popup.iframe[0].contentWindow.location.href == iframeOrUrl))
                        return popup;
                } else {
                    if (popup.iframe) {
                        if (popup.iframe[0] == iframeOrUrl)
                            return popup;
                    } else {
                        if (popup.parameters.url == iframeOrUrl.src)
                            return popup;
                    }
                }
            }

            return null;
        },
        createPopup: function (parameters) {
            if (parameters.width)
                parameters.widthProvided = true;

            parameters = $.extend({ x: 20, y: 20, showClose: false, showTitle: true, closeDestroys: true, showFooter: true }, parameters);

            if (!parameters.url && !parameters.sourceElement && !parameters.sourceIframe) {
                alert("parameters.url must be specified (Popup.createPopup).");
                return;
            }

            if (parameters.showClose)
                parameters.showFooter = true;

            if (parameters.url) {
                var qs = ELMS.Common.parseQueryString(parameters.url),
                qsCount = 0;
                if (!qs.Popup) {
                    for (var prop in qs)
                        if (prop != parameters.url)
                            qsCount++;

                    parameters.url += (qsCount == 0 ? "?" : "&") + "Popup";
                }
            }

            var topWindow = ELMS.Common.getTopLevelWindow();
            parameters.headerHeight = topWindow.$("#header").height();
            if (parameters.headerHeight && parameters.headerHeight > parameters.y)
                parameters.y = parameters.headerHeight + 50;

            var popup = new ELMS.Constructs.Popup(parameters);

            if (!topWindow.ELMS.Page.Popups) {
                topWindow.ELMS.Page.Popups = [];
            }
            topWindow.ELMS.Page.Popups.push(popup);
            ELMS.Common.registerPopup(popup);

            if (popup.parameters.sourceIframe && popup.parameters.sourceIframe.tagName && popup.parameters.sourceIframe.tagName == "IFRAME") {
                popup.iframe.css("display", "block");
                popup.show();
            }

            return popup;
        },
        convertLinkToPopupWithClose: function (event, informParentOnClose) {
            return ELMS.WebControls.Popup.convertLinkToPopup(event, { showClose: true, closeInformsParent: informParentOnClose | false });
        },
        convertLinkToPopup: function (event, parameters) {
            event.preventDefault();
            event.stopPropagation();

            var hyperlink = $(event.target).closest("a")[0],
                parameters = $.extend(
                    {
                        url: hyperlink.href,
                        caller: hyperlink,
                        event: event,
                        buttonSelector: ".buttons",
                        usesHelp: false,
                        title: event.target["title"]
                    }, parameters);

            var popup = ELMS.WebControls.Popup.createPopup(parameters);

            if (ELMS.Page.receivePopupMessage)
                popup.addMessageCallback(ELMS.Page.receivePopupMessage);

            popup.show();

            return popup;
        }
    };

ELMS.Common.registerWebControl(control);

jQuery.fn.convertLinkToPopup = function () {
    this.each(function (index, element) {
        $(element).click(ELMS.WebControls.Popup.convertLinkToPopup);
    });
};

jQuery.fn.convertLinkToPopupWithClose = function () {
    this.each(function (index, element) {
        $(element).click(ELMS.WebControls.Popup.convertLinkToPopupWithClose);
    });
};

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

AnswerRe: New to JQuery PinPopular
Richard MacCutchan19-Feb-15 21:30
mveRichard MacCutchan19-Feb-15 21:30 
GeneralRe: New to JQuery Pin
indian14320-Feb-15 11:35
indian14320-Feb-15 11:35 
GeneralRe: New to JQuery Pin
Richard MacCutchan20-Feb-15 21:47
mveRichard MacCutchan20-Feb-15 21:47 
GeneralRe: New to JQuery Pin
Amarnath S23-Feb-15 5:29
professionalAmarnath S23-Feb-15 5:29 
QuestionGetting text from UL using jquery Pin
indian14319-Feb-15 8:55
indian14319-Feb-15 8:55 
AnswerRe: Getting text from UL using jquery Pin
Dennis E White20-Feb-15 4:56
professionalDennis E White20-Feb-15 4:56 
QuestionI want to move slider/carousel automatically without clicking first to start Pin
Member 1048773918-Feb-15 9:31
Member 1048773918-Feb-15 9:31 
AnswerRe: I want to move slider/carousel automatically without clicking first to start Pin
ZurdoDev19-Feb-15 4:18
professionalZurdoDev19-Feb-15 4:18 
AnswerRe: I want to move slider/carousel automatically without clicking first to start Pin
Santosh K. Tripathi31-Mar-15 1:59
professionalSantosh K. Tripathi31-Mar-15 1:59 
QuestionHelp with arrays assignmet Pin
WebDesignStudent17-Feb-15 6:51
WebDesignStudent17-Feb-15 6:51 
GeneralRe: Help with arrays Pin
PIEBALDconsult17-Feb-15 6:59
mvePIEBALDconsult17-Feb-15 6:59 
GeneralRe: Help with arrays Pin
PIEBALDconsult17-Feb-15 7:13
mvePIEBALDconsult17-Feb-15 7:13 
QuestionGetting started with Javascript Pin
Atinesh16-Feb-15 6:37
Atinesh16-Feb-15 6:37 
AnswerRe: Getting started with Javascript Pin
Richard MacCutchan16-Feb-15 7:44
mveRichard MacCutchan16-Feb-15 7:44 
AnswerRe: Getting started with Javascript Pin
Amarnath S23-Feb-15 5:27
professionalAmarnath S23-Feb-15 5:27 
AnswerRe: Getting started with Javascript Pin
Anshul Shukla23-Feb-15 5:29
Anshul Shukla23-Feb-15 5:29 
AnswerRe: Getting started with Javascript Pin
Gerd Wagner24-Feb-15 9:41
professionalGerd Wagner24-Feb-15 9:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.