JQuery – Webdevils

JS Content Manager 2

These pens add a few features to content manager.

The first example adds transitions in four directions. I modified the showView method, adding parameters which describe the transition.

showView(newView, exit, start, enter)

newView – The view to show
exit – an object with properties describing the how the current view will exit
start – an object with properties describing where the new view should be positioned before it enters.
enter – an object with properties describing how the new view will enter

I also added four helper methods to to create transitions that slide in from four directions.

pushLeft(newView)
pushRight(newView)
pushUp(newView)
pushDown(newView)

In the example you’ll see the buttons all execute a pushRight(). Try changing these to pushUp, or pushDown.

Transition Manager 3

This example keeps the views in an array, something like [A, B, C]. It chooses the transition based on the relationship and position of the current view to the new view.

If the new view (A for example) is to the left of the current view (B, for example) in the array the transition is pushRight(). If the new view (C for example) is to the right of the current view (B for example) the transition is push left.

To do this I added an array, viewsArray, and added all of the views to the array. I also added a new function: showViewInArray(newView). This function finds the index of the current view, and the new view and compares them, and decides which method to call: pushLeft(), or pushRight().

jQuery content manager

Managing content in your Single Page Applications. This example adds and removes elements from the DOM to manage a series of view elements.

http://codepen.io/soggybag/pen/avNrVO

There is a video tutorial of this example here.

jQuery – Sliding content

Here are is a codepen example of content sliding around in a full screen content view port.

http://codepen.io/soggybag/pen/ojxRdY

jQuery/JS Page Scroll

Here are a few examples showing a scrolling page. These examples are built with absolute and relative positioned elements. Motion is handled with jQuery, using the scrollTop, and scrollLeft properties.

WordPress – jQuery

WordPress will load jQuery automatically without you having to add the files yourself. I’ve seen a different methods, some of which do not always work. Here’s the method I use that seems to work reliably.

The following would be added to your functions.php file. If you don’t have a functions.php yet, create one, in your theme folder.

<?php 
function theme_init() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
	}
}
add_action('init', 'theme_init');

Note! There can be no characters, this include spaces, or extra lines, in front of the tag. This is good practice. Extra characters outside of the php tag will cause the server to create HTTP header and send it to the browser before WordPress is ready.

If you already have a funtions.php file in your theme, you can add the snippet above, without the <?php.

WordPress loads jQuery in “No Conflict” mode. This means that jQuery will be accessed through the variable jQuery rather than the $. To work with this easily, set up your document ready actions like this:

jQuery(function($){ // Notice the $ here!
	$("#box>div>div").eq(0).siblings().hide();
	$("#box>ul>li.slide-thumb").click(function(event){
		var index = $(this).index();
		$("#box>div>div.slides").fadeOut(400).eq(index).fadeIn(400)
	});
});

Notice here, that jQuery (note the uppercase Q!) replaces the $ outisde the ready function. While inside the function I’ve used the $. This is possible by including the $ as a parameter to the function inside jQuery(function($){}). Placing this variable here allows jQuery to assign itself to this name, so inside of the function you can use that variable in place of jQuery.