jquery – Blue Lily Studios

For those scripting developers who enjoy the flexibility of using jQuery to deliver front end solutions to their website users.

One common obstacle from developers who like to incorporate scripts from third parties are instances of on jQuery conflicts that cause the scripts to misfire or not run at all.

What tends to happen is that the original developer created their script in isolation. Working in isolation and focusing on their task, they overlooked the fact that one day their script would be used in a setting that supported multiple jQuery scripts.

Because they were working in isolation, they referenced the jQuery session with a default of ‘$’
ie… $(document).ready(function(){

Working in their own lab, this is fine, but if the next or previous script writer also used the same ‘$’ reference, both scripts will conflicit and stop working.

The work around
Give each individual session a unique name…. NOT ‘$’

var jq = $.noConflict();
jq(document).ready(function(){
    jq(“button”).click(function(){
        jq(“p”).text(“jQuery is still working!”);
    });
});

I recently created a theme and then wanted to add a routine to show my Post categories in a vertical hierarchical menu.
This routine lists the top level category with a count of child posts.
On clicking a category name, the child posts are revealed.

I tried to use a plugin ‘collapse categories’ which should have worked, but the plugin doesn’t work with Bootstrap.css or jquery.1.10+

The routine uses a combination of PHP, Javascript & jQuery.
Work with the routine on the sidebar of the Post of this blog.
The css styles are listed at the bottom of the page

<?php
// set the arguments for the query
$args = array(
‘post_type’ => ‘post’,
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘hide_empty’ => 1,
‘depth’ => 1,
‘posts_per_page’ => -1
);

$categories = get_categories( $args );

// echo each category and create ul (list) for their child posts
echo “<div class=’pcl_category’>”;
foreach ( $categories as $category ) {
echo “<h2 onclick=\”unhide(‘”.$category->slug.”‘);\”>”; //
echo $category->name .” (“.$category->category_count.”)”;
echo “</h2>”;

$args[‘category’] = $category->term_id;
$posts = get_posts($args); ?>

<div class=”post_cat_list”>
<ul id=”<?php echo “pcl_”.$category->slug;?>”>
<?php foreach($posts as $post) { ?>
<li><a href=”<?php the_permalink()?>”><?php the_title(); ?></a></li>
<?php } ?>
</ul>
</div>
<?php }
echo “</div>”;

// reset query after you’re finished with it
wp_reset_query();
?>

// use standard javascript to work with cookies.
// cookies will determine which category list is open

function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

// use jquery to hide/reveal category lists using jQuery routines

$(function() {
$(‘[id^=”pcl_”]’).hide();
$menuID = readCookie(‘pcl_category’);
$(“#pcl_”+$menuID).show();
});

function unhide($menuID){
$(‘[id^=”pcl_”]’).hide();
$(“#pcl_”+$menuID).delay(50).fadeIn(500);
writeCookie(‘pcl_category’,$menuID,30);
};
</script>

Tag: jquery

jquery conflicts – how to avoid

Displaying categories in sidebar using javascript, jquery & php