0

I am trying to resize an colorbox containing an iframe. The following code works fine on normal sites but in Drupal it is having problems. Can anyone suggest what I am doing wrong? The colorbox is supposed to resize to the size of the content plus a specified offset in the Resize function.

(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: "" 
        }, options); 

        //Resize the colorbox
        function Resize_Box(){
            var x = $("body").width();
            var y = $("body").height()+30;
            parent.$.fn.colorbox.resize({
                innerWidth: 600,
                innerHeight: y
            });
        }

        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        $(element).before("<div class='nav-container'><div class='inner-container'><ul id='steps'></ul></div></div>");

        steps.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");

            // 2
            var name = $(this).find("legend").html();
            $("#steps").append("<li id='stepDesc" + i + "'><div class='circle'></div></li>");

            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
            Resize_Box();
        });

        //Create the previous button
        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
                //Only resize if going back to the first step since it has fewer options
                if(i==1){
                    Resize_Box();
                }
            });
        }

        //Create the next button
        function createNextButton(i) {
            var stepName = "step" + i;
            if(i != count-1)
            {
                $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next notvalid'>Next ></a>");
                $("#" + stepName + "Next").bind("click", function(e) {
                    var currentq = document.querySelector('div#step'+i+' input[type=radio]').name;
                    if($('input[name='+currentq+']:checked').length > 0) {
                        $("#" + stepName).hide();
                        $("#step" + (i + 1)).show();
                        if (i + 2 == count)
                            $(submmitButtonName).show();
                        selectStep(i + 1);
                        //Only resize if going from the first step since all other steps have more options
                        if(i == 0) {
                            Resize_Box();
                        }
                    }
                });
            } else {
                $("#" + stepName + "commands").append("<input id='SaveAccount' type='submit' value='Submit' class='next notvalid'/>");
            }
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }
    }
})(jQuery);
0

Try replacing $ with jQuery. By default I don't believe Drupal allows the $ as a shortcut due to potential compatibility issues with other libraries.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.