SitePoint Sponsor

User Tag List

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

    Jquery tabs - having trouble linking to using text links

    Hi there,

    I'm building a shop using the opencart system, which includes a tabbed content ares based on the jquery tabs script. However, I need to link to each of the tabs from a separate menu. I know this can be done, as there are numerous explanations about how to using the jquery tabs.js script. However, no matter which way I try it simply won't work for me. Here's the code I'm using:

    Code:
    <script type="text/javascript"> 
    $(document).ready(function(){
    var $tabs = $('#tabs').tabs(); // first tab selected
    $('#tab-review').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
    });
    });
    </script>
    And the link to a tab:
    Code:
    <a href="desktops/mac?product_id=41/#tab-review">Reviews</a>
    And this is the tab html:

    Code:
    <div id="tabs" class="htabs"><a href="#tab-description">Description</a>
                <a href="#tab-review">Reviews (0)</a>
                <a href="#tab-related">Related Products (1)</a>
          </div>
      <div id="tab-description" class="tab-content"><div>
    	
    </div>
          <div id="tab-review" class="tab-content">
        
      </div>
          <div id="tab-related" class="tab-content">
       
              </div>
      </div>
    Any help is most appreciated.

    Cheers,
    Dan

    ps. I'm using version 1.5.2.1

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas? There's no help from the opencart community so far.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,681
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The HTML code that you are using for your tabs is very non-standard, which might explain why you are having so much trouble.

    Using a more standard technique such as this, you will have much less trouble.

    HTML Code:
    <div id="tabs" class="htabs">
        <ul>
            <li><a href="#tab-description">Description</a></li>
            <li><a href="#tab-review">Reviews (0)</a></li>
            <li><a href="#tab-related">Related Products (1)</a></li>
        </ul>
        <div id="tab-description" class="tab-content"></div>
        <div id="tab-review" class="tab-content"></div>
        <div id="tab-related" class="tab-content"></div>
    </div>
    Code javascript:
    $(function () {
        $('#tabs').tabs();
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, I try and get the opencart tab system working with the code you've given me. I appreciate your help.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I've just used your code, and though your javascript didn't do the trick, I've used the following javascript that I found in an old thread on stack overflow - and it works perfectly:

    Code:
    $(document).ready(function() {
        if(window.location.hash.length > 1) {
            $('a[href="' + window.location.hash + '"]').click();
        }
    });
    Any ideas why this has worked?

    Thanks,
    Dan

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,681
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dantheman50_98 View Post
    Any ideas why this has worked?
    Because it's using a technique that is separate and divorced from the automatic technique that the jQuery tabs automatically uses.

    For the record, this is the full code for the jQuery tabs one that is fully tested and works:

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<title>jQuery UI Example Page</title>
    		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
    		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    		<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    		<script type="text/javascript">
            $(function(){
                $('#tabs').tabs();
            });
    		</script>
    	</head>
    	<body>
    		<h2 class="demoHeaders">Tabs</h2>
    		<div id="tabs" class="htabs">
    			<ul>
    				<li><a href="#tab-description">Description</a></li>
    				<li><a href="#tab-review">Reviews (0)</a></li>
    				<li><a href="#tab-related">Related Products (1)</a></li>
    			</ul>
    			<div id="tab-description" class="tab-content"></div>
    			<div id="tab-review" class="tab-content"></div>
    			<div id="tab-related" class="tab-content"></div>
    		</div>
    	</body>
    </html>
    The styles are important, since the code for jQuery tabs adjusts what is visible by setting different styles on the different sections.
    That might explain why you haven't been seeing much happen, because your CSS styles haven't correctly been made use of.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is interesting. I'd prefer to use the default method, especially as with the solution I found results in the browser automatically scrolling down to the tab - a possible usability issue I'm sure.

    Well all the scripts in your example are there, plus a load of others; so perhaps there's a conflict of some sort:

    Code:
    <?php if (isset($_SERVER['HTTP_USER_AGENT']) && !strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6')) echo '<?xml version="1.0" encoding="UTF-8"?>'. "\n"; ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>">
    <head>
    <title><?php echo $title; ?></title>
    <base href="<?php echo $base; ?>" />
    <?php if ($description) { ?>
    <meta name="description" content="<?php echo $description; ?>" />
    <?php } ?>
    <?php if ($keywords) { ?>
    <meta name="keywords" content="<?php echo $keywords; ?>" />
    <?php } ?>
    <?php if ($icon) { ?>
    <link href="<?php echo $icon; ?>" rel="icon" />
    <?php } ?>
    <?php foreach ($links as $link) { ?>
    <link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
    <?php } ?>
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/opc/stylesheet/stylesheet.css" />
    <?php foreach ($styles as $style) { ?>
    <link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
    <?php } ?>
    <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript" src="catalog/view/javascript/jquery/ui/external/jquery.cookie.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/colorbox/colorbox.css" media="screen" />
    <script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/common.js"></script>
    <script> 
    </script> 
    <?php foreach ($scripts as $script) { ?>
    <script type="text/javascript" src="<?php echo $script; ?>"></script>
    
    <?php } ?>
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/opc/stylesheet/ie7.css" />
    <![endif]-->
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="catalog/view/theme/opc/stylesheet/ie6.css" />
    <script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">
    DD_belatedPNG.fix('#logo img');
    </script>
    <![endif]-->
    <?php echo $google_analytics; ?>
    </head>
    I've removed the link to the main stylesheet, but the link still wouldn't change the default tab, so it appears that it isn't css-related.

    And here's the tabs.js code:

    Code:
    $.fn.tabs = function() {
    	var selector = this;
    	
    	this.each(function() {
    		var obj = $(this); 
    		
    		$(obj.attr('href')).hide();
    		
    		$(obj).click(function() {
    			$(selector).removeClass('selected');
    			
    			$(selector).each(function(i, element) {
    				$($(element).attr('href')).hide();
    			});
    			
    			$(this).addClass('selected');
    			
    			$($(this).attr('href')).fadeIn();
    			
    			return false;
    		});
    	});
    
    	$(this).show();
    	
    	$(this).first().click();
    };
    
    <!-- code to make the text links point to a specific tab -->
    $(document).ready(function() {
        if(window.location.hash.length > 1) {
            $('a[href="' + window.location.hash + '"]').click();
        }
    });
    <!-- end of code -->
    Thanks again,
    Dan


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
  •