Остановка jQuery для перехода к недавно загруженному контенту - PullRequest
Новая
       5

Остановка jQuery для перехода к недавно загруженному контенту

3 голосов
/ 22 октября 2009

У меня есть div с заменой на определенные действия пользователя. Эти действия выполняются в заменяемом элементе div, и в случае, если div слишком велик, чтобы полностью поместиться в окне просмотра, наряду с кнопками, используемыми для его изменения под ним, браузер перейдет на вершину вновь загруженного дела. Что раздражает.

Кто-нибудь знает способ остановить это? Приветствия.

Вот код jQuery. ChartContent - это маленькая капля html 

function UpdateChartImage(ChartContent) {
//do updates on div here 
    var existingChart = $("#" + $(ChartContent).attr("id"));
    existingChart.fadeOut("fast", function() { existingChart.replaceWith(ChartContent); }).fadeIn("fast");
}

Кстати, я не позволил кнопке вести себя по умолчанию, поэтому я не думаю, что это связано с этим.

Ответы [ 8 ]

2 голосов
/ 27 октября 2009

У меня была похожая проблема по другому сценарию. Если начальная высота тела равна или превышает конечную высоту тела, нет проблем. Если он пойдет в обратном направлении, порт просмотра перейдет к верхней части экрана. Что я сделал, так это вычислил высоту конца тела и предварительно установил его до того, как пришел контент. Я взял ваш пример и поместил его в полуфункциональную HTML-страницу. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
    function UpdateChartImage(ChartContent) {
        //do updates on div here
        var existingChart = $("#content");
        existingChart.fadeOut("fast", function() { 
            existingChart.html(ChartContent);

            // sets body's height to match the end-height
            $(document.body).height($(document.body).height());
        }).fadeIn("fast");
    }

    $(function() {
        $('#div_change').click(function(){
        UpdateChartImage("asdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshadasdkaskdh asdkjhasdkh asdkhas daskdhaskdh asdkhasdkjshad")
        })
    });
</script>
</head> 

<body style="padding: 0; margin: 0;"> 
    <div id="header" style="height: 200px; background-color: #0FF;">this is the header</div>
    <div id="content" style=""></div>
    <div id="footer" style="height: 200px; background-color: #ced;">this is the footer</div>
    <a id="div_change">click me to change the body's div content</a>
</body>
</html>

Надеюсь, это поможет!

1 голос
/ 27 октября 2009

Вот что происходит, когда вы запускаете код:

Элемент div постепенно скрывается. Когда fadeOut завершается, он полностью скрыт (отображение не установлено). Браузер регулирует высоту страницы и переходит к ее концу. Затем появляется новый div. Браузер не делает никаких прыжков - он остается на прежнем месте. Вам кажется, что после fadeIn он прыгнул на вершину недавно добавленного div. Установите медленную скорость анимации, чтобы лучше понять, что происходит.

Я считаю, что самый простой способ решить вашу проблему - это использовать абсолютное позиционирование для кнопок, запускающих анимацию. У старого и нового div одинаковая высота? Если да, будет очень легко вычислить верхнее положение кнопок.

0 голосов
/ 17 марта 2013 
event.preventDefault();

работал для меня.

0 голосов
/ 10 мая 2010

У меня тоже была эта проблема, и я обнаружил, что решение было настолько легким, что было трудно понять, по крайней мере, для моего случая.

Попробуйте добавить еще один div к обновляемому div и установите его в положение: относительный;

Это сработало для меня. Конечно, содержимое, показанное ниже, будет по-прежнему прыгать, если содержимое изменится, но полоса прокрутки не переместится вверх страницы.

Пример: 

<div style="position: relative;">
  <div id="ajax_update">
    //This is what jQuery will update.
  </div>
</div>
0 голосов
/ 27 октября 2009

Это не так просто ответить с небольшой информацией, которую вы дали. Полный пример поможет вам получить необходимую помощь.

Во всяком случае, я подозреваю, что любой из этих:

  1. У вас есть якоря (упомянутые в Truppo), и предотвращение дефолта не поддерживается для инициируемого события, или вы неправильно его предотвращаете. Попробуйте вернуть false в обратном вызове события, атрибуте onclick / on [event] или полностью удалить якоря, чтобы увидеть, имеет ли это какое-либо значение. Было бы полезно, если бы вы могли показать нам, как вы связываете свое событие, и html элемента, с которым вы его связываете.
  2. В загружаемом вами контенте есть сценарии, которые заставляют страницу прокручиваться. «включенные теги сценария оцениваются при вставке в DOM» (http://docs.jquery.com/Ajax/jQuery.ajax#options)
0 голосов
/ 22 октября 2009

Вы делаете что-то подобное? 

<a href="#" onclick="[your jQuery call]">

Часть href="#" заставит вашу страницу перейти наверх при нажатии на ссылку.

0 голосов
/ 22 октября 2009

Если я понимаю, что вы имеете в виду, вам может потребоваться сохранить положение прокрутки тела во временной переменной перед обновлением, а затем установить сохраненную прокрутку в теле после. 

window.st = document.body.scrollTop;
window.sl = document.body.scrollLeft;

//do updates on div here

document.body.scrollTop = window.st;
document.body.scrollLeft = window.sl;

EDIT:

Если вы используете обработчики событий jquery, попробуйте вернуть false для этих событий, это может помешать странице прыгнуть вверх. 

$('#item').click (function () {  
    // stuff here  
    return false;//prevent page from jumping at the top when long page items are rendered
});
0 голосов
/ 22 октября 2009

Кажется, что ваша страница обновляется во время обновления содержимого, поэтому, прежде чем выполнять обновление, получите контейнеры $ .width () и $ .height () и установите для них эти значения с помощью $ .css (). Это остановит перемещение контейнера во время изменений содержимого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...