I receive a few emails every month asking how I built this website, or a specific piece of functionality on this site. Here is a list (which I plan on updating regularly) with the most common questions.
Q: How do you load your WordPress pages with Ajax?
A: Here it is at a high level.
1) I built the site as a standard html/css/javascript site without ajax and without WordPress code. Layout complete without content. All links are regular a href links – this helps with backwards compatibility later.
2) Added in the WordPress code to pull in content without ajax. Make sure all content that changes from page to page is wrapped in a consistent div, which I call container.
3) I use jQuery to hijack clicks on every href link. If there isn’t target=”_blank” or a class of “override” I then load the page being called using ajax. I grab the url, look for the div of container (defined above) and load just that content keeping the header and footer consistent. I also use JQuery address to change the url and title of the page.
4) When the content is finished loading I fire jQuery calls to fade in the content and reposition the highlight bar under the nav. I also make additional calls to add any page specific JS back in as it gets stripped out by loading the page via ajax.
5) Finally I modified my .htaccess file to add a www. to every page. I also added javascript that adds the hash into the url, jQuery Address code to load the proper page if someone deep links.
Q: What javascript library is used to animate your work on the homepage?
A: I’m using jQuery for most of the motion on the site, but the image module on the homepage is done with a custom script. I was a Flash (Actionscript) developer for years so animating with JS comes naturally to me.
When the open button is clicked three things happen – the up arrow is swapped with a down arrow, I animate the margin between images from 100px to 5px to pull them closer together while animating the height of the container holding all of the images from 280px to 870px. Since the container is smaller than the content shown (and the overflow is hidden) pulling the images closer to each other and growing the height of the box at the same time moves the images into view. Clicking the close button just reverses the animation.
Q: How did you modify your WordPress theme to work on mobile devices and tablets?
I wrote a blog post a few months ago covering this, as well as how I am handling responsive images on this site.
http://www.ericpaulsnowden.com/blog/#/2011/12/building-my-first-responsive-website-using-foundation/
Hope some of this helps! More to come soon.
Eric
--
Posted on: 06/23/2012
Comments