A Way to Stop JQUERY conflicts in Classipress and Wordpress
I notice that from so many posts in the forum that people have just as much trouble as I have on occasion trying out a plugin or putting in some custom javascript hungry widget. Javascript CONFLICT. And now there are so many versions of jquery called for that go with different functions and built-in plugins.
It's not uncommon to see a slider stop running or the Tabs on the homepage just disappear because of something you wanted to test out that also requires its own jquery.
I just today manually installed a side-slider, one of those gizmos that has a clickable button flush on the screen. Click the button and out slides some information, or a form, or a menu...whatever.
When I put it on the page, coding it into the header and footer and adding extra CSS styling and calling for a particular version of jquery, the top Featured Listing slider stopped working, no output, no movement, AND the TABS stopped displaying!
I am enclosing my mod of the theme-header.php to give you an idea of how you can fix problems when you add something new... this is how I got the functions I wanted working including the sliders and tabs....ENDING the Jquery conflict.
I also strongly suggest to the Classipress developers:
If the theme-enqueue and theme-header.php files were re-written to dynamically ISOLATE each jquery script from its mate when they are called for it would solve a lot of people's problems that I am reading about on a daily basis in the forum.
This is an example of isolating one script so that it did NOT kill the Slider and the Ajax tabs used for "Featured Listings", "Most Popular"...etc
<?php global $app_abbr; ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <?php appthemes_meta(); ?>
<title><?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?></title>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php if ( get_option('feedburner_url') <> "" ) echo get_option('feedburner_url'); else echo get_bloginfo_rss('rss2_url').'?post_type='.APP_POS T_TYPE; ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php if ( file_exists(TEMPLATEPATH.'/images/favicon.ico') ) { ?><link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon.ico" type="image/x-icon" /><?php } ?>
<?php if ( is_singular() && get_option('thread_comments') ) wp_enqueue_script('comment-reply'); ?>
<?php wp_head(); ?>
<?php // THE SCRIPT THAT LOADS NEXT WAS KILLING THE SLIDER AND THE TABS ... THEY DID NOT SHOW ?>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.
js"></script>
<?php // THIS ENABLED MY SIDE SLIDER ALONG WITH THE CLASSIPRESS SLIDER AND THE TABS -- ALL WORK BECAUSE OF THE FOLLOWING CODE TO ISOLATE IT FOR JUST MY FUNCTION WITHOUT KILLING EVERYTHING ELSE ON THE PAGE --
IT REFERS TO A BUTTON BUT THIS IS JUST A MEANS TO AN END -- THERE IS NO BUTTON USED BUT THE FUNCTION IS PART OF THE SOLUTION ?>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">var jQuery_1_3_2 = $.noConflict(true);
(function($) { $('<button>Use jQuery 1.3.2</button>') .click(function() { alert('Top: ' + $(this).offset().top + '\n' + 'jQuery: ' + $.fn.jquery); }) .appendTo('body');})(jQuery_1_3_2);
jQuery(document).ready(function($) { $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; });});</script>
<?php // CLASSIPRESS SHOULD LOAD ALL JAVASCRIPT, PARTICULARLY JQUERY, WITH SOMETHING LIKE THE PRECEDING CODE WHICH STOPS CONFLICTS ?>
</head>
<body <?php body_class(); ?>> <?php appthemes_before(); ?>
<div class="container">
<?php if ( get_option('cp_debug_mode') == 'yes' ) { ?><div class="debug"><h3><?php _e('Debug Mode On','appthemes'); ?></h3><?php print_r($wp_query->query_vars); ?></div><?php } ?>
<?php appthemes_before_header(); ?>
<?php appthemes_header(); ?> <?php appthemes_after_header(); ?>
<?php include_once( TEMPLATEPATH . '/includes/theme-searchbar.php' ); ?>
Reply With Quote