Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

debugging  Image Carousel on Homepage

Posted on 2011-02-24
21
Medium Priority
?
644 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
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
 

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 2000 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 2000 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’s Wrong with Your Cloud Strategy ?

Even as many CIOs are embracing a cloud-first strategy, the reality is that moving to the cloud is a lengthy process and the end-state is likely to be a blend of multiple clouds—public and private. Learn why multicloud solutions matter in this webinar by Nimble Storage.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

636 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