SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery colorbox within a jquery tab, results in colorbox failing

    Hello there,

    I'm building a shop using opencart, and I'm trying to move the code for jquery colorbox into a jquery tab, but as soon as I place it there it stops working. Outside of the tabs it works fine.

    Here' the code opencart uses to display the colorbox on a page:

    Code:
    <div class="product-info">
    
            <div class="left">
    
                <div class="image"><a href="http://url/image/cache/data/img/product-492x654.jpg" title="product title" class="colorbox" rel="colorbox"><img src="http://url/image/cache/data/img/product-401x533.jpg" title="product title" alt="product alt tag" id="image" /></a></div>
    
    </div></div></div>
    I'm using standard jquery ui tabs code using a ul for the main tabs and divs for the content.

    I assume this is the actual jquery scripts clashing, but I know nothing about these things, so if anyone can help me to get this working it'd be most appreciated.

    Thank you,
    Dan

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dantheman50_98 View Post
    I assume this is the actual jquery scripts clashing, but I know nothing about these things, so if anyone can help me to get this working it'd be most appreciated.
    Sure thing. Show us what you're doing that's not working well, and we'll try to get it working for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul - here's the code that opencart from the php within the tab I'm talking about:


    Code:
      <div id="tabs" class="htabs">
    
        <ul>
    
            <li><a href="#tab-introduction">Introduction</a></li>
    
         <li><a href="#tab-why-organic-whey">Why</a></li>
    
        <li><a href="#tab-nutritional-info">Nutritional Info</a></li>       
        <li><a href="#tab-review">Reviews (0)</a></li>
    </ul>
    
      <div id="tab-introduction" class="tab-content">
    
    <section>
    
     <h2>Product</h2>
     <p>
    
    	Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>
    
    <p>
    
    	Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia</p>
    
    <div class="price">Price:                22.99                <br />
                </div>
    
                      <div class="cart">
    
            <div>Qty:          <input type="text" name="quantity" size="2" value="1" />
    
              <input type="hidden" name="product_id" size="2" value="42" />
    
              &nbsp;<input type="button" value="Add to Cart" id="button-cart" class="button" />
    
              </div>
     </div>
    
          </section>
    
    <section>   
    
     <div class="product-info">
    
            <div class="left">
    
                <div class="image"><a href="http://127.0.0.1:4001/1521/image/cache/data/img/packaging_no_bubbles-492x654.jpg" title="Product" class="colorbox" rel="colorbox"><img src="http://127.0.0.1:4001/1521/image/cache/data/img/packaging_no_bubbles-401x533.jpg" title="Product" alt="Product" id="image" /></a></div>
    
                    </div>
    
        </div></section></div>
    
    
      <div id="tab-why" class="tab-content">
    
    next tab.....

    And this is the head of the page, so you can see which jquery files are involved:

    Code:
    <!doctype html>
    
    <!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
    
    <!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
    
    <!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
    
    <!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
    
    <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
    
    <!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Product</title>
    
    <base href="http://127.0.0.1:4001/1521/" />
    
    <link href="http://127.0.0.1:4001/1521/image/data/cart.png" rel="icon" />
    
    <link href="http://127.0.0.1:4001/1521/Product" rel="canonical" />
    
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/opc/css/style.css" />
    
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
    
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />
    
    <!-- http://t.co/dKP3o1e -->
    
    <meta name="HandheldFriendly" content="True">
    
    <meta name="MobileOptimized" content="320">
    
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0">
    
    <!-- For all browsers -->
    
    <link rel="stylesheet" href="catalog/view/theme/opc/css/style.css">
    
    <link rel="stylesheet" media="print" href="catalog/view/theme/opc/css/print.css">
    
    <!-- For progressively larger displays -->
    
    <link rel="stylesheet" media="only screen and (min-width: 480px)" href="catalog/view/theme/opc/css/480.css">
    
    <link rel="stylesheet" media="only screen and (min-width: 540px)" href="catalog/view/theme/opc/css/540.css">
    
    <link rel="stylesheet" media="only screen and (min-width: 680px)" href="catalog/view/theme/opc/css/680.css">
    
    <link rel="stylesheet" media="only screen and (min-width: 768px)" href="catalog/view/theme/opc/css/768.css">
    
    <link rel="stylesheet" media="only screen and (min-width: 992px)" href="catalog/view/theme/opc/css/992.css">
    
    <!-- For Retina displays -->
    
    <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="catalog/view/theme/opc/css/2x.css">
    
    
    
    <!--[if (lt IE 9) & (!IEMobile)]>
    
    <script src="js/libs/selectivizr-min.js"></script>
    
    <link rel="stylesheet" href="catalog/view/theme/opc/css/480.css">
    
    <link rel="stylesheet" href="catalog/view/theme/opc/css/540.css">
    
    <link rel="stylesheet" href="catalog/view/theme/opc/css/680.css">
    
    <link rel="stylesheet" href="catalog/view/theme/opc/css/768.css">
    
    <link rel="stylesheet" href="catalog/view/theme/opc/css/992.css">
    
    <![endif]-->
    
    <!-- JavaScript -->
    
    <script src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
    
    <script src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
    
    <script src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>
    
    <script src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
    
    <script src="catalog/view/javascript/jquery/tabs.js"></script>
    
    <script src="catalog/view/javascript/common.js"></script>
    
    <script src="catalog/view/javascript/plugins.js"></script>
    
    <script src="catalog/view/javascript/script.js"></script>
    
    <script src="catalog/view/javascript/mylibs/helper.js"></script>
    
    <script src="catalog/view/javascript/libs/modernizr-2.0.6.min.js"></script>
    
    
    
    <!-- For iPhone 4 -->
    
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
    
    <!-- For iPad 1-->
    
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
    
    <!-- For iPhone 3G, iPod Touch and Android -->
    
    <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
    
    <!-- For Nokia -->
    
    <link rel="shortcut icon" href="img/l/apple-touch-icon.png">
    
    <!-- For everything else -->
    
    <link rel="shortcut icon" href="/favicon.ico">
    
    
    
    <!--iOS. Delete if not required -->
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    
    <link rel="apple-touch-startup-image" href="img/splash.png">
    
    
    
    <!--Microsoft. Delete if not required -->
    
    <meta http-equiv="cleartype" content="on">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <!--[if lt IE 7 ]><script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script><![endif]-->
    
    
    
    <!-- http://t.co/y1jPVnT -->
    
    <link rel="canonical" href="/">
    
    </head>
    And this is an opencart product demo page with a product image using the colorbox, as I'd like it to work with one of the tabs (which are also on this page):
    http://demo.opencart.com/index.php?r...&product_id=30

    Thanks again Paul - I appreciate your help with this!

    Dan

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just used the error console in chrome while loading the webpage, and the following error comes up:

    Uncaught ReferenceError: display is not defined (line 174)

    Here's where this error message is related to

    Code:
    <script type="text/javascript">
                        $mjs(document).je1('domready', function() {
                          var olddisplay = display; (this is line 174)
                          window.display = function (view) {
                            MagicZoomPlus.stop();
                            olddisplay(view);
                            MagicZoomPlus.start();
                          }
    I don't know if this is of any help...

    Thanks,
    Dan

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great - I've finally figured it out! The <div id="tabs" class="htabs"> needed to be closed after the </ul> - it now works.


Bookmarks

Posting Permissions

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