JQuery ведет себя очень странно - PullRequest
Новая
       13

JQuery ведет себя очень странно

1 голос
/ 06 июля 2010

У меня есть сценарий jQuery, который появляется и исчезает между контейнерами внутри их родительского контейнера.В зависимости от нажатой кнопки (дизайн, веб) он определяет, какой контейнер (#design, #web) исчезает, а какой - на своем месте.

Теперь суть здесь, оба этиконтейнеры (#design, #web) отличаются по высоте, поэтому, когда я постепенно исчезаю между этими контейнерами, страница переходит на определенную позицию сразу после завершения вызова функции fadeIn().Эта позиция (x, y) в точности совпадает с позицией, в которой находилась бы страница, если бы внутри родительского контейнера (т. Е. Пустого контейнера) не было видно никаких контейнеров (#design, #web)и страница была прокручена вплоть до дна .

Кто-нибудь еще сталкивался с этим раньше?Любой совет очень ценится, так как эта проблема беспокоит меня бесконечно.

PS.Я проверил это в Firefox и Safari, и оба показали ту же проблему.

// edit 1: Вот URL, который вы можете проверить: http://toolboxstudio.co.za/version3/?page=packages

Если вы хотите увидеть, как контейнер будет выглядеть пустым: http://toolboxstudio.co.za/version3/?page=packages#empty,, затем вы можете нажать кнопку (Дизайн или Веб) чуть ниже баннера.Это будет постепенно корректно отображаться и переключаться между ними.Убедитесь, что ваша страница умещается только на целую страницу с пустым контейнером без лишнего пространства под нижним колонтитулом.Затем нажмите на кнопки и прокрутите маленькие пути вниз, переключаясь между двумя кнопками.Вы поймете, что я имею в виду при переходе по страницам.

Вот код: 

$("div.design.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.web.button").removeClass("active");

    if ($("div.web_content").is(":visible")) {
        $("div.web_content").fadeOut(function () {
            $("div.design_content").fadeIn();
        });
    } else {
        $("div.design_content").fadeIn();
    }
    window.location.hash = "#design";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("hello");     
});

$("div.web.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.design.button").removeClass("active");

    if ($("div.design_content").is(":visible")) {
        $("div.design_content").fadeOut(function () {
            $("div.web_content").fadeIn();
            return false;
        });
    } else {
        $("div.web_content").fadeIn();
        return false;
    }
    window.location.hash = "#web";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("world");
});

Ответы [ 2 ]

1 голос
/ 06 июля 2010

Здравствуйте, Анриетта Комбринк, вы совершенно забыли упомянуть событие в обработчике событий щелчка,

Я думаю, что return false достаточно,

, пожалуйста, удалите следующие строки 

e.returnValue = false;
e.preventDefault();

, поскольку вы не указали e (событие), вы не можете использовать returnValue , protectDefault

Я думаю, это должно работать, еслипожалуйста, дайте нам знать

Хорошего дня !!

1 голос
/ 06 июля 2010

Я думаю, я исправил это, изменив код на это: 

$("div.design.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.web.button").removeClass("active");

    if ($("div.web_content").is(":visible")) {
        $("div.web_content").fadeOut();
        $("div.design_content").fadeIn();
            return false;
    } else {
        $("div.design_content").fadeIn();
    }
    window.location.hash = "#design";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("hello");     
});

$("div.web.button a").click(function () {
    $(this).parent("div").addClass("active");
    $("div.design.button").removeClass("active");

    if ($("div.design_content").is(":visible")) {
        $("div.design_content").fadeOut();
        $("div.web_content").fadeIn();
    } else {
        $("div.web_content").fadeIn();
    }
    window.location.hash = "#web";
    resizeWindow();

    e.returnValue = false;
    e.preventDefault();

    return false;

    alert("world");
});

@ galambalazs:

Нет, я не думаю, что это все, поскольку я удалил это первым, и ничего не изменилось. Я просто не подозревал, что это будет ошибкой функции обратного вызова, которую я сделал, и это будет причиной.

Извините, я действительно часами боролся с этим, StackOverflow всегда мое последнее средство. А потом я просто решил что-то попробовать, и это помогло.

Извините, я не могу загрузить код, чтобы вы могли понять, что я имею в виду под словом «это работает», SEACOM недоступен, и у нас ограниченные ресурсы, наш порт FTP заблокирован.

...