Javascript problem, conflicts with my IH4 and Zen Lightbox plugins

[Feznizzle]

Hi,

An attempt to fix a problem with the CSS Click-Show-Hide menu caused a major conflict with IH4 and Zen Lightbox.

Can someone take a look and tell me what I did wrong? Happy to buy you a cup(s) of coffee if you can help me figure this out!

I edited this file:
includes/templates/My_Template/common/tpl_header.php

Just below <div id="headerWrapper"> I added this:

<script>
$(document).ready(function() { 

	// Go to any link that is clicked without waiting.
	$('a').click(function(){
		link = $(this).attr("href");
		window.location = link;
	});

// bc
	catUrl = $('div#navBreadCrumb a:nth-child(2)').attr("href");
	catText = $('div#navBreadCrumb a:nth-child(2)').text();
	//alert(catUrl);
	
	subCatUrl = $('div#navBreadCrumb a:nth-child(3)').attr("href");
	subCatText = $('div#navBreadCrumb a:nth-child(3)').text();
	//alert(subCatUrl);
	
	// last bc item
	lastCrumb = $('div#navBreadCrumb a:last').attr("href");
	
	// main Categories
	$('ul[class=tree-menu] li.top-section-open a.on:first').attr("href", catUrl);
	
	// assign sub menu href
	$('ul[class=tree-menu] li.top-section-open a.on:last').attr("href", lastCrumb);

});
</script>

That fixed my menu and I was super happy... until I discovered that it screwed up my Zen Lightbox. I think maybe there is a better place to put it?

Here is the entire code for my tpl_header.php (before the addition of the script):

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
 */
?>

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>

<div id="header-lan-curr">
<?php require(DIR_WS_MODULES . 'sideboxes/languages_header.php'); ?>
<?php require(DIR_WS_MODULES . 'sideboxes/currencies_header.php'); ?>
<div class="clearBoth"></div>
</div>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>



<div id="headerWrapper">

<br class="clearBoth" />

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div></div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>

<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>

<div id="header-right">
<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
    <ul class="back">
    <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a> | </li>
<?php if ($_SESSION['customer_id']) { ?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a> | </li>
    <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | </li>
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a> | </li>
<?php } } ?>

												
    <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.HEADER_ICON_CART ?>" alt="cart icon" class="cart-icon"  /><? echo $_SESSION['cart']->count_contents();?> item(s) - <? echo $currencies->format($_SESSION['cart']->show_total());?></a> | </li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<?php }?>
</ul>
</div>
<br class="clearBoth" />
</div>
<!--eof-navigation display-->

<br class="clearBoth" />

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
<div class="clearBoth"></div>

<div id="header-promo"><?php echo HEADER_TITLE_PROMO1; ?></div>

</div>


</div>

<br class="clearBoth" />

<!--eof-branding display-->






<!--eof-header logo and navigation display-->



<!--bof-optional categories tabs navigation display-->
<?php require($template->get_template_dir('tpl_modules_categories_tabs.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_categories_tabs.php'); ?>
<!--eof-optional categories tabs navigation display-->

<!--bof-header ezpage links-->
<?php if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<?php require($template->get_template_dir('tpl_ezpages_bar_header.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_header.php'); ?>
<?php } ?>
<!--eof-header ezpage links-->

</div>
<!--bof-mega menu display-->
<?php require($template->get_template_dir('tpl_mega_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_mega_menu.php');?>
<!--eof-mega menu display-->
<div class="clearBoth"></div>


<?php } ?>

I would be deeply grateful to anybody who can spot what I did wrong!

Thanks,
Mike

[DrByte]

You didn't say "how" it "screwed up" the lightbox.

And the actual URL would be helpful for some direct testing and looking at JS console errors.

[Feznizzle]

You are right, I totally forgot the most important part! Doah!

Here is the URL:
http://2staging.apswittcosales.com/

[Feznizzle]

When you add the code in, it fixes the category menu beautifully. But the conflict can best be demonstrated by clicking on a product image and watching Zen Lightbox fail to load:
http://2staging.apswittcosales.com/C...e_Testing_Demo

[Design75]

I went to your site, and clicked around, but I can not see anyting wrong. The slideshow works, as does Zen Lightbox ????? Not sure what the sidebox is supposed to do.

I did see these lines in your sourcecode

<div class="leftBoxContainer" id="categoriescss" style="width: 180px">
 <h3 class="leftBoxHeading" id="categoriescssHeading">Categories</h3>
<link rel="stylesheet" type="text/css" href="includes/templates/sheffield_blue/css/categories_css.css" />

The css line should be in your header, and not in the sidebox div. Remove the line, and rename categories_css.css to stylesheet_categories_css.css, this way it will auto-load.

[Feznizzle]

Hi Design75,

I removed the css line and renamed the css file, thanks for the tip!

Yesterday I removed the code that was screwing up my Zen Lightbox. But it is now back in place, hope it is in you to look again!

The code fixes a problem with my category menu on the left. The problem with that menu was that you could drill down to a category and select a product to view, but the menu then would not allow you to click on the immediate category and be presented with the list of products again.

But I have put that code back in, so now the menu functions perfectly... but the lightbox is totally screwed up again.

I'm pretty desperate, supposed to be launching at the end of this week. I deeply appreciate your help!

Thanks,
Mike

[DrByte]

When you add the code in, it fixes the category menu beautifully. But the conflict can best be demonstrated by clicking on a product image and watching Zen Lightbox fail to load:
http://2staging.apswittcosales.com/C...e_Testing_Demo

First thing I see in Chrome's javascript error console is this:
Failed to load resource: the server responded with a status of 404 (Not Found) http://2staging.apswittcosales.com/jquery.easing.1.3.js
Uncaught ReferenceError: jQuery is not defined jscript_xjquery.easing.1.3.js:39


So, it makes me wonder why you've called the file jscript_xjquery.easing.1.3.js ... was the "x" supposed to stop it from loading? Or order things alphabetically?

[DrByte]

Also, in looking at the raw HTML, I see that you're triggering the jQuery Easing code before jQuery itself is even loaded.
And then you're loading TWO versions of jQuery on the same page!

<script type="text/javascript" src="includes/templates/sheffield_blue/jscript/jscript_xjquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_textarea_counter.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"  type="text/javascript"></script>
<script src="/jquery.easing.1.3.js"  type="text/javascript"></script>


<script language="javascript" type="text/javascript"><!--
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
function popupWindowPrice(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<script type="text/javascript" src="includes/templates/sheffield_blue/jscript/jquery-1.4.4.min.js"></script>

[numinix]

Additionally try downloading and installing CSS/JS Loader and then build your auto_loaders, that done properly will usually solve most of the java-script problems like these. Be sure to always use the newest version if possible.

[DrByte]

Additionally try downloading and installing CSS/JS Loader

I've seen more sites get broken using that than I care to know. It's not compatible with a number of other popular plugins. Use at own risk.