Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

Question

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

It's time for a new challenge to push my learning curve. I've never ventured into the world of ajax before, but it seems like a skill I need to acquire. What better opportunity to learn than by implementing it on a fresh portfolio site.

The main idea behind this website is to have content slide behind folds at the edges of the 960 grid. Clicking on a link causes the current content to slide out into its respective fold, which then adjusts in size to accommodate new content blocks sliding in from under the folds. I've managed to achieve this somewhat with news using the Wordpress loop and basic jquery, although adjusting fold height remains a challenge as new content loads.

I'm starting with this (http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html) as a foundation, but it doesn't quite meet my vision.

Instead of setting up a jsfiddle, here's how the site currently looks

EDIT: Apologies for rambling without posing a question:

How can I create a sequence where clicking on an internal link triggers these events:

Content box slides out -> Content changes -> Fold expands -> New content slides in

EDIT 2: Upon reflection, I realize I haven't been clear again. While I understand loading content via ajax, my struggle lies in handling different page layouts. For instance:

The homepage features three recent projects sliding down from a top fold, a news post sliding in from the left, and a list of news posts sliding in from the right.

The Work/Play pages display blocks sliding down from a top fold.

Contact consists of full-width folds filling the 960 grid. The same layout applies to the about page, though there might be a sidebar added later.

How can I enable AJAX to recognize the current loaded content and adjust accordingly?

Thank you in advance for any assistance!

jquery ajax html wordpress css

Answer 1

Answer №1

You have a clear idea of what needs to be done, so here is an untested outline on how to make it work.

 function animateInDone () {
      // implement actions here
 }

 function foldReady () {
      // scale the fold for the content and display it on screen
      $('#contentBox').animate(
           {'left':'100px'},
           400,
           'swing',
           complete: animateInDone
      );
 }

 function contentLoadDone (responseText, textStatus, XMLHTTPStatus) {
      // new content loaded and displayed in div using .load()
      if (textStatus == 'success') {
           // adjust the fold size
           $('#fold').animate(
                {height:'350px'}, 
                400, 
                'swing', 
                foldReady
           );
      } else {
           // handle errors
      }
 }

 function animateOutDone () {
      // load new content using .load or .ajax
      $('#contentBox').load(
           'newcontent.html',
           complete:contentLoadDone
      );
 }

 function contentChange () {
      // animate the content box out
      $('#contentBox').animate(
           {'left':window.innerWidth},
           400,
           'swing',
           complete: animateOutDone
      );
 }

If you need details on the exact syntax for the .animate call, refer to the documentation links below:

In addition to EDIT 2: You should maintain the UI state somewhere, like using a variable to store the current page or creating a class hierarchy with different UI animations for each page.

var pageHome = function () {
    this.animIn = function () {
       // animate home page in
    }

    this.animOut = function (newpage) {
       // animate home page out and set newpage.animIn as the callback after animation
    }
}

var pageNow = pageHome;
pageNow.animIn();

I personally find function objects quite useful.

Answer 2

You have a clear idea of what needs to be done, so here is an untested outline on how to make it work.

 function animateInDone () {
      // implement actions here
 }

 function foldReady () {
      // scale the fold for the content and display it on screen
      $('#contentBox').animate(
           {'left':'100px'},
           400,
           'swing',
           complete: animateInDone
      );
 }

 function contentLoadDone (responseText, textStatus, XMLHTTPStatus) {
      // new content loaded and displayed in div using .load()
      if (textStatus == 'success') {
           // adjust the fold size
           $('#fold').animate(
                {height:'350px'}, 
                400, 
                'swing', 
                foldReady
           );
      } else {
           // handle errors
      }
 }

 function animateOutDone () {
      // load new content using .load or .ajax
      $('#contentBox').load(
           'newcontent.html',
           complete:contentLoadDone
      );
 }

 function contentChange () {
      // animate the content box out
      $('#contentBox').animate(
           {'left':window.innerWidth},
           400,
           'swing',
           complete: animateOutDone
      );
 }

If you need details on the exact syntax for the .animate call, refer to the documentation links below:

In addition to EDIT 2: You should maintain the UI state somewhere, like using a variable to store the current page or creating a class hierarchy with different UI animations for each page.

var pageHome = function () {
    this.animIn = function () {
       // animate home page in
    }

    this.animOut = function (newpage) {
       // animate home page out and set newpage.animIn as the callback after animation
    }
}

var pageNow = pageHome;
pageNow.animIn();

I personally find function objects quite useful.

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

Answer №1

Similar questions

Refresh iOS / iPad website only upon scrolling, not when utilizing anchor links

What is the solution to prevent a CSS flex column from expanding to fill the width in a row with three

How can I show the real width of an image on a mobile device?

Execute JavaScript function after the reset button has been clicked

The checkbox is failing to display as checked even after its value has been dynamically set to true

Saving downloaded web pages as an HTML document

The continuation of unraveling the mystery of utilizing `overflow-y:scroll` in a horizontal slider

steps for setting up an endless scroll masonry grid

Element widths are displaying uneven alignment

What is the best way to customize the icon-bar in react-bootstrap's Navbar?

Adding a button input and deleting non-functional parent elements

Switching views in AngularJS by using a controller to control the content displayed in the

Experience unique website functionalities across Windows/Android and Apple ecosystems

Working with arrays of multiple checkboxes in jQuery

Is there a way to alter the appearance of an HTML element without an ID using a JavaScript function?

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

How to Build a Number Spinner Using Angular Material?

Ways to enlarge the diameter of the inner circle

Laravel 4 not receiving data from Angular $http PUT request in 'multipart/form-data' format

PHP unable to display HTML form element using its designated ID attribute