Загружается страница путем сползания вниз по вертикали

Мне интересно и пытаться это сделать, как только пользователь нажмет на ссылку в моем меню, страница загружается, начиная с верхней части страницы, скользя по вертикали. EG; Нажмите ссылку> Новая страница красиво (возможно, ослабевая) в положение сверху сверху.Загружается страница путем сползания вниз по вертикали

Я знаю, что это возможно с .slide в jQuery, но до сих пор мне не повезло.

Я пытаюсь сделать это на сайте Wordpress.

Любые предложения?

нерест из оригинального вопроса на:Getting page content via wrapper in WP to slide in

источник

2012-02-09 Fred Randall

Пожалуйста, не отправляйте повторяющиеся вопросы. – Brad

Возможный дубликат [Получение содержимого страницы через оболочку в WP для вставки] (http://stackoverflow.com/questions/9154595/getting-page-content-via-wrapper-in-wp-to-slide-in) – Brad

Вот быстрый, почти полностью Codeless объяснение, как я делаю, что на одном из наших сайтов ...

Требуется JQuery, основной ajaxing и а пользовательский шаблон.

Для Wordpress вы захотите создать обработчик ajax для запроса своего сообщения, страницы или того, что вы загружаете. Сначала вы создаете новую страницу и назовите ее ajax_handler или все, что вы найдете полезным. Затем вы делаете эту страницу приватной, чтобы она не отображалась в вашем меню.

Затем вам нужно создать пользовательский обработчик, который в этом случае является просто настраиваемым шаблоном. Для этого вы можете просто скопировать page.php и переименовать его в ajax_handler.php, а затем добавить стандартный комментарий к шаблону, чтобы он отображался в списке шаблонов и удалял все, что характерно для файла page.php, - по существу, вы не назовете что-то, чего не хотите на данный момент, но сохраняйте основные положения прямого вызова wp.

Затем вы назначаете этот шаблон на свою новую страницу.

В этой странице вы можете сделать простое заявление, как ...

if(isset($_GET['request'])) 
{ 
    switch($_GET['request']) 
    { 
     case "article": 
      // run the wp query to fetch whatever it is you're trying to load in 

      die(json_encode(array("title" => "test", "body" => "sample content"))); 

      // obviously you would encode the results from the query 
     break; 
     default: 

     break; 
    } 
}

то на вашем сайте, вы бы Jquery слушателя или событие, которое делает вызов Ajax ...

$(document).ready(function(){ 
    $('#link').on('click', function(){ 
     $.ajax({ 
      'url': 'http://www.yourdomain.com/ajax_handler', //whatever your permalink to that new page is 
      'type': 'get', 
      'data': {id:'1', request: 'article'}, //whatever the id is you want. You can fetch this any number of ways so I assume you know how to do it 
      'dataType': 'json', 
      'success': function(data){ 
       $('#slider_div h1').html(data.title); 
       $('#slider_div p').html(data.body); 
       $('#slider_div').animate({top: '0%'}, 1000); 
      } 
     }); 
    }); 
});

и, наконец, ваш HTML будет иметь простой DIV, который просто толкаемых над страницей с основным CSS ...

<div id="slider_div"> 
    <h1>title to replace</h1> 
    <p>body text to replace</p> 
</div>

и CSS:

#slider_div{ 
    width:100%; 
    height:100%; 
    background:#fff; 
    position:absolute; 
    z-index:999; 
    top:-100%; 
}

Этот ответ предполагает, что вы имеете некоторое представление о том, что вы делаете. Я ничего не тестировал, но я действительно помог кому-то сделать такую же вещь сегодня. Html и css могут отличаться, но концепция остается неизменной. Надеюсь, поможет.

источник

2012-02-09 02:29:16

Загружается страница путем сползания вниз по вертикали

ответ

Смежные вопросы