Need help with jQuery conflict please

[boogily]

I am developing a site where the client has a specific need for a left sided scrollbar that can be uniquely styled (so just using RTL direction wouldn't work -- it doesn't work in all browsers anyways). The site is set up in Joomla 1.7. The slider is jQuery.

Messing with *no conflict* doesn't help. The weird thing is that it works on some pages, and not others, even though those pages are not set up any differently (just single article from the same menu) and from the same menu. Oh, and it actually does work in IE.

Working page:
http://vps5283.inmotionhosting.com/~...ndex.php/about

Broken page (suspected conflict):
http://vps5283.inmotionhosting.com/~...ex.php/coolers

Here is the article content

<p><b>Insulated Shipping Coolers</b><br />Ensure that your temperature-sensitive products arrive at their destinations in top condition with high-quality insulated shipping coolers from Great Northern. With our wide range of cooler options, you will be sure to find a cooler solution that is ideal for your application.</p>
<div class="clear"><a href="images/lightbox/commercial/Coolers/Thermalite-pu.jpg" rel="sexylightbox[group]"><img src="images/icons/commercial/coolers/thermalite-insulated-covers.png" width="76" height="87" alt="thermalite-insulated-covers" class="fltlft" /></a>
    <p class="iconpad"><b>Thermalite Insulated Coolers</b><br />Stock and custom-molded EPS coolers that are FDA approved for direct food contact.</p>
</div>
<div class="clear"><a href="images/lightbox/commercial/Coolers/Arctic-Pak-pu.jpg" rel="sexylightbox[group]"><img src="images/icons/commercial/coolers/arctic-pak-coolers.png" width="76" height="87" alt="arctic-pak-coolers" class="fltlft" /></a>
    <p class="iconpad"><b>Artic Pak Coolers</b><br />Shipping coolers with interlocking extenders for a customized solution.</p>
</div>
<div class="clear"><a href="images/lightbox/commercial/Coolers/Igloo-Pak-pu.jpg" rel="sexylightbox[group]"><img src="images/icons/commercial/coolers/igloo-pak-coolers.png" width="76" height="87" alt="igloo-pak-coolers" class="fltlft" /></a>
    <p class="iconpad"><b>Igloo Pak Coolers</b><br />Shipping containers with EPS foam panel inserts for effective thermal barrier protection.</p>
</div>
<div class="clear">
    <p class="iconpad"><b>Eco Coolers</b><br />100%-biodegradable cooler inserts made from cornstarch.</p>
</div>
<div class="clear"><a href="images/lightbox/commercial/Coolers/Gel-Ice-pu.jpg" rel="sexylightbox[group]"><img src="images/icons/commercial/coolers/accessories.png" width="76" height="87" alt="accessories" class="fltlft" /></a>
    <p class="iconpad"><b>Accessories</b><br />Nontoxic, reusable, drip-proof gel ice refrigerant packs.</p>
</div>
<p class="clear">Our packaging specialists can also help create customized molded and fabricated coolers in any size to meet a wide range of requirements, from conforming cooler dimensions that meet stringent size specifications to molding a cooler to fit a specific application.</p>
<p><b>Download Coolers Stock Listing Chart (PDF)</b> &lt;link to coolers specs PDF&gt;<br /> Call 800-236-3671 or e-mail <a href="mailto:dstubing@greatnortherncorp.com">dstubing@greatnortherncorp.com</a> for current sizes, pricing and availability.</p>

I checked and there is nothing wrong with any of that. Here is my system info

PHP Built On	 Linux vps5283.inmotionhosting.com 2.6.18-028stab091.2 #1 SMP Fri Jun 3 00:02:40 MSD 2011 x86_64
Database Version	 5.0.92-community
Database Collation	 utf8_general_ci
PHP Version	 5.2.17
Web Server	 Apache
WebServer to PHP Interface	 cgi
Joomla! Version	 Joomla! 1.7.0 Stable [ Ember ] 19-Jul-2011 14:00 GMT
Joomla! Platform Version	 Joomla Platform 11.1 Stable+Modified [ Ember ] 01-Jun-2011 06:00 GMT
User Agent	 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.218 Safari/535.1

Please, I have no idea what is causing this conflict. Thanks for any help with this

[boogily]

*banging my head on a wall

Can anyone please help me? Does anyone charge to debug anything like this?

[boogily]

Making good progress. If the content is just barely large enough to enable the custom scroller, it freezes. I narrowed it down to

append(elem.children())

inside of the scrollpane.js file. More surrounding code here

function initialise(s)
			{

				var /*firstChild, lastChild, */isMaintainingPositon, lastContentX, lastContentY,
						hasContainingSpaceChanged, originalScrollTop, originalScrollLeft,
						maintainAtBottom = false, maintainAtRight = false;

				settings = s;

				if (pane === undefined) {
					originalScrollTop = elem.scrollTop();
					originalScrollLeft = elem.scrollLeft();

					elem.css(
						{
							overflow: 'hidden',
							padding: 0
						}
					);
					// TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should
					// come back to it later and check once it is unhidden...
					paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
					paneHeight = elem.innerHeight();

					elem.width(paneWidth);
					
					pane = $('<div class="jspPane" />').css('padding', originalPadding).append(elem.children());
					container = $('<div class="jspContainer" />')
						.css({
							'width': paneWidth + 'px',
							'height': paneHeight + 'px'
						}
					).append(pane).appendTo(elem);

					/*
					// Move any margins from the first and last children up to the container so they can still
					// collapse with neighbouring elements as they would before jScrollPane 
					firstChild = pane.find(':first-child');
					lastChild = pane.find(':last-child');
					elem.css(
						{
							'margin-top': firstChild.css('margin-top'),
							'margin-bottom': lastChild.css('margin-bottom')
						}
					);
					firstChild.css('margin-top', 0);
					lastChild.css('margin-bottom', 0);
					*/
				} else {
					elem.css('width', '');

					maintainAtBottom = settings.stickToBottom && isCloseToBottom();
					maintainAtRight  = settings.stickToRight  && isCloseToRight();

					hasContainingSpaceChanged = elem.innerWidth() + originalPaddingTotalWidth != paneWidth || elem.outerHeight() != paneHeight;

					if (hasContainingSpaceChanged) {
						paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
						paneHeight = elem.innerHeight();
						container.css({
							width: paneWidth + 'px',
							height: paneHeight + 'px'
						});
					}

http://vps5283.inmotionhosting.com/~...jscrollpane.js
Line 106. Hope this helps!!!!!!!

[boogily]

Okay. Turns out the content size doesn't matter.
Even funnier, the .js file starts at line 263, this code

elem.trigger('jsp-initialised', [isScrollableH || isScrollableV]);

[boogily]

In IE it says it is a permission issue with jQuery

finally {
							fired = [ context, args ];
							firing = 0;
						}

It says permission denied?!?

[boogily]

HAH!!!! narrowed it down to email addresses. If anywhere there is a .com and the a space after it, it causes the conflict. Why? Only God knows

*update even is the xx@xxx.com is in the href it still misfires.

[boogily]

Alright! after nearly 3 weeks, it turns out to be a native email cloaking plugin in the content management system that conflicts with the jQuery when an email address gets called.

I just disabled the plugin and installed a more compatible version. I know nobody helped with this, but just in case someone else runs into it, I hope it helps