closingtags </> – Page 9 – web development and then some
jQuery Parallax

Scrolling Shadows

This plugin is derived from the same idea that was posted here, except in a much simpler form and using HTML5 to control the shadow attributes.
The jQuery looks like this:
function calculateShadow(object){

/* 12/5/13 Dylan Hildenbrand */

var blur =“blur”);
var spread =“spread”);
var xpos =“xpos”);
var dir =“direction”);

var ypos = null;
ypos = (jQuery(window).scrollTop() /‘speed’));
else {
ypos = -(jQuery(window).scrollTop() /‘speed’));

object.css(“box-shadow”, xpos+”px “+ypos+”px “+blur+”px “+spread+”px rgba(0, 0, 0, 0.5)”);


var object = jQuery(“#object”);

jQuery( window ).resize(function() {

jQuery(window).scroll(function () {
<div id=”content” class=”site-content” role=”main”>
<!– Elements on object set parameters for box shadow
data-direction: move shadow up or down
data-blur: shadow blur
data-spread: shadow spread
data-speed: speed of shadow movement; less means faster
data-xpos: x-position of shadow
data-ypos: y-position of shadow
<div id=”object” data-blur=”10″ data-spread=”3″ data-xpos=”10″ data-ypos=”20″ data-speed=”8″ data-direction=”down”>
</div><!– #content –>


Live shadow effects on an element

So I got this idea while I was working on a site that used some parallax effects. I thought, “wouldn’t it be cool to be able to change the box-shadow on an element as you scroll past it?” It would give the illusion of the users point of view being a light source that was shining on the page. Well I told a talented friend about this idea and before I could even grasp how to achieve this, he had it all whipped up! But he did it in an even better way than I had previously thought. Take a look at the jsfiddle and see for yourself.

Plugins WordPress

Edit Hopper

The purpose of this plugin is to allow WordPress admin’s to more easily navigate through child and parent pages. This plugin will create a widget in the WordPress admin interface on a Page Edit screen. It will show any child or parent pages and allow you to navigate to those pages by simply clicking the link for that page. The .zip can be downloaded here. Similarly, you can take the following code and copy it into your theme’s functions.php file.
function edit_hopper_main(){
echo “<div class=’ultimate-container’>”;
echo “<div class=’hopper-title’><strong>Click a page to go to the edit page</strong></div></br>”;

$current = get_post($id);
$parvar = $current->post_parent;
if($parvar) {
echo “<div class=’hopper-parent-link’><a href='” . get_edit_post_link( $parvar) . “‘>”
. get_post($parvar)->post_title . “</a></div>”;

echo “<div class=’hopper-current-link’>”.get_post( $id)->post_title. “</div>”;
$args = array(
‘post_type’ => ‘page’,
‘child_of’ => (get_post($id)->ID));
$children = get_pages($args);
foreach ($children as $child) {
echo “<div class=’hopper-child-link’><a href='” . get_edit_post_link($child->ID) . “‘>”
. get_post($child->ID)->post_title . “</a></div>”;

echo “</div>”;

function edit_hopper_custom_box() {
$screens = array( ‘post’, ‘page’ );

foreach ( $screens as $screen ) {

__( ‘Edit Screen Page Hopper’, ‘edit_hopper_textdomain’ ),
add_action( ‘add_meta_boxes’, ‘edit_hopper_custom_box’ );