Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    Need help with jQuery conflict please

    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
    Code:
    <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
    Code:
    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
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #2
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    *banging my head on a wall

    Can anyone please help me? Does anyone charge to debug anything like this?
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #3
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Making good progress. If the content is just barely large enough to enable the custom scroller, it freezes. I narrowed it down to
    Code:
    append(elem.children())
    inside of the scrollpane.js file. More surrounding code here
    Code:
    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!!!!!!!
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #4
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    Okay. Turns out the content size doesn't matter.
    Even funnier, the .js file starts at line 263, this code
    Code:
    elem.trigger('jsp-initialised', [isScrollableH || isScrollableV]);
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #5
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    In IE it says it is a permission issue with jQuery
    Code:
    finally {
    							fired = [ context, args ];
    							firing = 0;
    						}
    It says permission denied?!?
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #6
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts
    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.
    Last edited by boogily; 09-14-2011 at 09:03 PM.
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"

  • #7
    Regular Coder boogily's Avatar
    Join Date
    Jul 2009
    Posts
    275
    Thanks
    18
    Thanked 4 Times in 4 Posts

    Solved

    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
    Joomla Development Company and MN SEO
    "Joomla development from design to SEO"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •