Solved

debugging  Image Carousel on Homepage

Posted on 2011-02-24
21
626 Views
Last Modified: 2012-05-11
Trying to debug this site's homepage carousel : http://tinyurl.com/65mrwrd . There must be a javascript conflict causing the carousel to freeze and not rotate the Slideshow images. I turned off all plugins that could possibly conflict, but slider refused to operate. Checked, and yes, images for slider are loaded. No immediate errors shown by Firebug though. I am trying to use Firebug's Script debugging capabilities to debug, but am still pretty new to Firebug JavaScript debugging. After setting random breakpoints I did not get useful data and Firebug started saying it was disabled on reload while it was not. And there are many scripts being loaded. How can I efficiently debug the image carousel? Is there a better way to go about it?
0
Comment
Question by:rhandalthor
  • 13
  • 8
21 Comments
 

Author Comment

by:rhandalthor
ID: 34969769
Perhaps it is NextGen jQuery Cycle conflicting with the theme's jQuery Cycle. Not sure yet, how I can remedy that..
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 total points
ID: 34969945
Make sure your theme has this before any jquery calls in the header.php:
<?php wp_head(); ?>

Open in new window


Also make sure this is just before the <head> tag:
<?php wp_enqueue_script("jquery"); ?>

Open in new window


And last thing is make sure this is included in the footer just before the closing </body> tag:
<?php wp_foot(); ?>:

Open in new window

0
 

Author Comment

by:rhandalthor
ID: 34970054
So header.php:
<?php 
	// Includes the jQuery framework
	if( !is_admin()){
		wp_deregister_script('jquery');
		wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');
		wp_enqueue_script('jquery');
		// wp_enqueue_script('foxycart', 'https://domain.foxycart.com/files/foxycart_includes.js');
	}
	
	// calls hook to WordPress head functions
	wp_head(); 
	?>

Open in new window


and footer.php:
<?php wp_footer(); //leave for plugins ?>

</body>

Open in new window


should be OK, right?
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34970261
The 'foxycart' is being commented out, but that isn't your issue.

One thing I dont see is this:
<?php wp_enqueue_script("jquery"); ?>

Open in new window

0
 

Author Comment

by:rhandalthor
ID: 34970326
I do have that in the line before foxycart. See earlier pasted code and here once more:

      
<?php 
	// Includes the jQuery framework
	if( !is_admin()){
		wp_deregister_script('jquery');
		wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');
		wp_enqueue_script('jquery');
		// wp_enqueue_script('foxycart', 'https://domain.foxycart.com/files/foxycart_includes.js');
	}
	
	// calls hook to WordPress head functions
	wp_head(); 
	?>

Open in new window


This code is loaded when you are not an admin... Not sure why the developer did that though..
0
 

Author Comment

by:rhandalthor
ID: 34970368
Here a larger snippet from header.php:

<?php 
	// Includes the jQuery framework
	if( !is_admin()){
		wp_deregister_script('jquery');
		wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');
		wp_enqueue_script('jquery');
		// wp_enqueue_script('foxycart', 'https://domain.foxycart.com/files/foxycart_includes.js');
	}
	
	// calls hook to WordPress head functions
	wp_head(); 
	?>
	
	<!-- Feed link / Pingback link -->
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	
	<!-- Favorites icon -->
	<link rel="shortcut icon" href="<?php echo $themePath ?>images/favicon.ico" />
	
	<!-- Style sheets -->
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>css/reset.min.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>css/menu.min.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>js/fancybox/jquery.fancybox-1.3.4.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>css/tooltip.min.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>style-default.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $cssPath ?>jg-style-customizations.css" />
	

	
	<!-- jQuery utilities -->
	<script type="text/javascript">
		var themePath = '<?php echo $themePath ?>'; // for js functions 
	</script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.easing.1.3.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/hoverIntent.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.bgiframe.min.js"></script>
	<!-- Drop down menus -->
	<script type="text/javascript" src="<?php echo $themePath ?>js/superfish.min.js"></script>
	<script type="text/javascript" src="<?php echo $themePath ?>js/supersubs.min.js"></script>
	<!-- <script type="text/javascript" src="<?php echo $themePath ?>js/jquery.curvycorners.packed.js"></script> -->
	
	<!-- AJAX Form submission -->
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.form.js"></script>
	
	<?php 
	// Tool Tips
	if (get_theme_var('toolTipsActive') !== '' || get_theme_var('toolTipsAllTitles') == true) {
		echo '<!-- Tooltips -->';
		echo '<script type="text/javascript" src="'. $themePath .'js/jquery.cluetip.min.js"></script>';
		echo '<script type="text/javascript" src="'. $themePath .'js/toolTipOptions.js"></script>';
		?>
		<script type="text/javascript">
		  jQuery(document).ready(function() {
			// select items to apply tooltip function
			$j('.tip').cluetip({showtitle: false, arrows: true, splitTitle: '|'});
			$j('.tipInclude').cluetip({attribute: 'rel', showtitle: false, arrows: true}); // external file indluded tips
			<?php 
			if (get_theme_var('toolTipsAllTitles') == true) { ?>
				$j('a[title != ""]').each( function() {
					// don't apply to any links in the drop down menu
					if ( !$j(this).parents('.sf-menu').length ) {
						$j(this).cluetip({showtitle: false, arrows: true, splitTitle: '|'});
					}
				});
			<?php 
			} ?>
		  });
		</script>
		<?php
	}
	?>
	
	<?php 
	// Ribbon Scroll Effect
	if (get_theme_var('ribbonScrollActive') !== '') {
		echo '<!-- Ribbon Scroll Effect -->';
		echo '<script type="text/javascript" src="'. $themePath .'js/ribbonScroll.js"></script>';
	}
	?>
	<!-- Input labels -->
	<script type="text/javascript" src="<?php echo $themePath ?>js/jquery.overlabel.min.js"></script>
	

	<?php 
	// Anchor tag scrolling "smooth scroll" or "scrollTo"
	if (get_theme_var('anchorScrollingActive') !== '') {
		echo '<!-- Anchor tag scrolling effects -->';
		echo '<script type="text/javascript" src="'. $themePath .'js/jquery.scrollTo-min.js"></script>';
		echo '<script type="text/javascript" src="'. $themePath .'js/jquery.localscroll-min.js"></script>';
		?>
		<script type="text/javascript">
		  jQuery(document).ready(function() {
			// initialize anchor tag scrolling effect (scrollTo)
			$j.localScroll();
		  });
		</script>
		<?php
	}
	?>

Open in new window

0
 

Author Comment

by:rhandalthor
ID: 34970388
Perhaps the scripts after wp_head() are causing problems. Not sure yet why and how to solve that.
0
 

Author Comment

by:rhandalthor
ID: 34970864
For the slider I found this code further down the line:

// output the javascript for the Cycle Plug-in (Default)
            
echo '<!-- Cycle Slide Show -->';
		if (!$jQueryCycle) {
			echo '<script type="text/javascript" src="'. $themePath .'js/jquery.cycle.all.min.js"></script>';
		$jQueryCycle = true; // plug-in included (prevents 2nd include by dynamic skin changer)
}
		
?>

Open in new window

0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34970926
I'm not sure, but there seems to be a lot of jquery scripts working in your theme. You may want to read up on the jquery noconflict page:
http://api.jquery.com/jQuery.noConflict/
0
 

Author Comment

by:rhandalthor
ID: 34970935
Anyone?
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:rhandalthor
ID: 34970946
Ok, will do some more reading...
0
 

Author Comment

by:rhandalthor
ID: 34971154
The jQuery loaded in $themePath ."js/jquery-1.4.min.js already has a jQuery noconflict addition in the end:

// this starts the no conflict mode... (not default, added for theme)
var $j = jQuery.noConflict();
var $j = jQuery.noConflict();

Open in new window


which is used as $j in the header after the jQuery library is loaded. So all jQuery variable conflicts should be avoided.  See http://api.jquery.com/jQuery.noConflict/

Still lost here...
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34971490
I just noticed your <?php wp_enqueue_script("jquery"); ?> that you said is in front of the cart is commented out.

If it is commented out it won't work. The <?php wp_enqueue_script("jquery"); ?> is what plug-ins use to hook into your theme, if it isn't correctly added then you could be having issues related to that.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34971503
You should add the <?php wp_enqueue_script("jquery"); ?> to your header.php, just before the <body> tag.
0
 

Author Comment

by:rhandalthor
ID: 34971819
It is not commented out. And otherwise we would not have it loaded on the site and shown in the source code, right? Here a link o the whole header: http://javascript.pastebin.com/EKCGnNrz . Perhaps I should enqueue all script using wp_enqueue or somehow try to reduce scripts used. Not sure yet how.
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 500 total points
ID: 34972153
Do you see the // in front of it? This is commented out. See here: http://php.about.com/od/learnphp/qt/php_comments.htm
0
 

Author Comment

by:rhandalthor
ID: 34972391
Thanks Jeremy. There are a few  PHP comments using // which only affect the line they are put in front of. Somehow I cannot see that affecting the line which loads jQuery. On line 20 I see :
wp_register_script('jquery', ($themePath ."js/jquery-1.4.min.js"), false, '1.4.2');

Open in new window

And on the website itself: http://tinyurl.com/65mrwrd the jQuery library is loaded as well. When I check the source I see:
<script type='text/javascript' src='http://www.domain.com/wp-content/themes/parallelus-unite/js/jquery-1.4.min.js?ver=1.4.2'></script>

Open in new window

 Where do you think that jQuery script comes from?
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 500 total points
ID: 34972773
I was looking at a different line.

I haven't used this because I try to minimize my scripts and keep my websites running smooth, but this is another way to solve WordPress jquery related conflicts:
 
Wrap your scripts like this:
(function($) {
    // $() will work as an alias for jQuery() inside of this function
})(jQuery);

Open in new window

SOURCE: http://wpengineer.com/2028/small-tips-using-wordpress-and-jquery/



Or you could try this method of using the no conflict:
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/jquery14.js"></script> 
<script type="text/javascript"> 
    var ang = jQuery.noConflict();
</script>
<script type="text/javascript" src="http://mlep.com/~avalon/wordpress/wp-content/themes/twentyten/facebox/facebox.js"></script> 
<script type="text/javascript"> 
   // other jQuery Codes here...
</script>

Open in new window

SOURCE:http://stackoverflow.com/questions/3420517/resolving-conflict-between-multiple-jquery-files


0
 

Author Comment

by:rhandalthor
ID: 34977404
Found the issue. The jQuery Cycle code was loaded, but the script dictating the slider's configuration was not added after a previous customization by another developer. It is running now.
0
 

Author Closing Comment

by:rhandalthor
ID: 34977408
Found the missing jQuery Cycle config snippet and added it. Slider is running again now.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34977548
Good, I'm glad it's working now.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now