Hi there, I'm creating a one page ordering system that lets kids and
parents order lunch.

http://clients.blazemelbourne.com.au/cc/order.php

It's designed to allow multiple kids and weeks per page, swapping the
active ones around using jquery.

Works splendidly in almost every browser except Firefox. On Firefox 3
it's just really really slow and jerky. On Firefox 1-2 it's just as
slow and particulary on 1 and 1.5 the animation is displayed very
poorly - the biggest problem is that Firefox 1-2 are throwing up the
error console every time a function is executed - and there are no
errors displayed, it's just bringing an empty window up.

Here is my code:

$(document).ready(function(){

        // Get container width

        var contWidth = 0;
        $("#container > div").each(function() {
                var object = $(this);
                contWidth += object.width();
        });
        $("#container").width(contWidth);

        // Mark first kid as selected

        $("#container > .kid:first-child").addClass("selected");
        $("#kidmenu li:first-child").children().addClass("active");

        // Mark first weeks as selected

        $("#container > .kid > .week:first-child").addClass("selected");
        $("#weekmenu li:first-child").children().addClass("active");

        // Change kid

        $("#kidmenu li a").click(function() {
                changeKid(this);
        });

        function changeKid(item) {
                // Calculates index
                var ki = $("#kidmenu > li > a").index(item);

                // Selects current kid
                var sk = $("#container .kid:eq(" + ki + ")");
                sk.addClass("selected");
                sk.siblings().removeClass("selected");

                // Marks menu item as active
                $(item).addClass("active");
                $(item).parent().siblings().children().removeClass("active");

                // Correct active week menu
                var swi = $('.week',sk).index($('.week.selected',sk));
                $("#weekmenu > li:eq(" + swi + ") > a").addClass("active");
                $("#weekmenu > li:eq(" + swi +
")").siblings().children().removeClass("active");

                // Moves container
                var distance = ki*870;
                $("#container").animate({left:-(distance)},1000);
        };

        // Change week

        $("#weekmenu li a").click(function() {
                changeWeek(this);
        });

        function changeWeek(item) {
                // Calculates index
                var wi = $("#weekmenu > li > a").index(item);

                // Select current week
                var sw  = $("#container > .selected > .week:eq(" + wi +")");
                sw.addClass("selected");
                sw.siblings().removeClass("selected");

                // Mark menu item as active
                $(item).addClass("active");
                $(item).parent().siblings().children().removeClass("active");

                // Moves kid
                var distance = wi*600;
                $("#container > 
.selected").animate({marginTop:-(distance)},1000);

        };

        // label tables odd/even

        $(document).ready(function(){
                $("#container table.menu:even").addClass("even");
                $("#container table.menu:odd").addClass("odd");
        });


});


I'm currently using the uncompressed version of jquery 1.2.6.

Check out the actual link for the html.

If anyone has had any similar problems with sliding jquery windows and
error console windows in Firefox it be great to here what you did to
fix em up.

All the best

Reply via email to