PupStar Posted February 20, 2011 Share Posted February 20, 2011 Hi Guys, I am playing with jQuery tabs but for the life of me can not get the tabs to function correctly The code I have is this <script> $(function() { $( "#tabs" ).tabs({ event: "mouseover" }); }); </script> <div class="tabs"> <div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1"><?php echo TEXT_PRODUCT_DESCRIPTION_TAB_TITLE; ?></a></li> <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-2"><?php echo TEXT_PRODUCT_DOWNLOADS_TITLE; ?></a></li> </ul> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2"> <div id="sidebar_documents"> <?php if (tep_session_is_registered('customer_id')) { //Document Manager if (DOCUMENTS_SHOW_PRODUCT_INFO == 'True') { include_once (DIR_WS_MODULES . FILENAME_DOCUMENTS); } }else{ echo tep_customer_greeting(); } ?> </div> </div> </div> Now I know first instincts people will say well he aint closed the <div>'s on these 2 lines <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2"> <div id="sidebar_documents"> <?php if (tep_session_is_registered('customer_id')) { //Document Manager if (DOCUMENTS_SHOW_PRODUCT_INFO == 'True') { include_once (DIR_WS_MODULES . FILENAME_DOCUMENTS); } }else{ echo tep_customer_greeting(); } ?> </div> but if I do it screws up the layout completely urgh :blink: So the issue is that the content aint inside each tab and when I do click on a tab it is acting as a proper link and redirecting to index.php The original code and instructions come from here. Would someone mind casting an eye over and see if they can see what I have done wrong/missed. Thanks Mark Link to comment Share on other sites More sharing options...
npn2531 Posted February 20, 2011 Share Posted February 20, 2011 I adapted the code below from the same link. Do it like this and it will match the themeroller theme you are using as well: on product_info.php about line 187 just below the </div> (it will work just about anywhere, but that spot seems to be a logical place) add this: <!--tabs--> <script> $(document).ready(function() { $("#tabs").tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$('#example').tabs();</code></pre> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </div> <div id="fragment-3"> Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /> Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <!--/tabs--> I have a demo and instructions for this at: www dot css-oscommerce dot com/jquery-themeroller-tabs-for-oscommerce-2-3/ (Ideally you would paste the javascript snippet , the <script>etc etc </script>, in the head of product_info.php and the html in the body. However, that’s not easy to do in OSCommerce 2.3. You could paste the snippet in the head located in template_top.php, but then it would appear on all catalog pages. In any case it will work fine as I have posted it here) Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
PupStar Posted February 20, 2011 Author Share Posted February 20, 2011 Do it like this: on product_info.php about line 187 just below the </div> (it will work just about anywhere, but that spot seems to be a logical place) add this: <!--tabs--> <script> $(document).ready(function() { $("#tabs").tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> Sorry mate your code did not produce tabs for me but just show the <li></li> Also my code was essentially the same as yours but with extra styling. Mark <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$('#example').tabs();</code></pre> </div> <div id="fragment-2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit<br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit </div> <div id="fragment-3"> Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br /> Lorem ipsum sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> </div> <!--/tabs--> I have a demo and instructions for this at: www dot css-oscommerce dot com/jquery-themeroller-tabs-for-oscommerce-2-3/ (Ideally you would paste the javascript snippet , the <script>etc etc </script>, in the head of product_info.php and the html in the body. However, that’s not easy to do in OSCommerce 2.3. You could paste the snippet in the head located in template_top.php, but then it would appear on all catalog pages. In any case it will work fine as I have posted it here) Sorry mate your code did not work it was just a list of <li>'s Your code is essentially the same as mine minus the extra styling. Any thoughts on my code would be appreciated. Thanks Mark Link to comment Share on other sites More sharing options...
npn2531 Posted February 20, 2011 Share Posted February 20, 2011 That code works, you can see it here on a vanilla 2.3 test site, alpha-clear dot com/catalog/product_info dot php?products_id=28 You need to add the '#fragment-1,2, etc' and the cooresponding 'id="fragment-1,2,etc " ' in your code. The extra 'ui' styling you have is not needed, as the id=tabs should pick up all that anyway. (at least on a stock install 2.3 stylesheet.css) Also The container div with the class=tabs you have in your code is not needed. Perhaps those two things are an issue. Check and make sure your snippet looks like this: <script> $(document).ready(function() { $("#tabs").tabs(); }); </script> Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
blr044 Posted February 20, 2011 Share Posted February 20, 2011 you may take a look at www - dot - greatdiscounts4u - dot - com/28pc-element-stainless-steel-cookware-p-4.html to see how I am using my product tabs if you like. Not quit sure if it is proper, but it works for me. Link to comment Share on other sites More sharing options...
PupStar Posted February 20, 2011 Author Share Posted February 20, 2011 That code works, you can see it here on a vanilla 2.3 test site, alpha-clear dot com/catalog/product_info dot php?products_id=28 You need to add the '#fragment-1,2, etc' and the cooresponding 'id="fragment-1,2,etc " ' in your code. The extra 'ui' styling you have is not needed, as the id=tabs should pick up all that anyway. (at least on a stock install 2.3 stylesheet.css) Also The container div with the class=tabs you have in your code is not needed. Perhaps those two things are an issue. Check and make sure your snippet looks like this: <script> $(document).ready(function() { $("#tabs").tabs(); }); </script> sorry mate what I should have said was that I cut and pasted your complete code into my product_info and it only showed the <li>'s and no tabs. Link to comment Share on other sites More sharing options...
PupStar Posted February 20, 2011 Author Share Posted February 20, 2011 ok I have even updated my version of jquery to see if that will make any difference but alas neither solution works. Link to comment Share on other sites More sharing options...
npn2531 Posted February 20, 2011 Share Posted February 20, 2011 Make sure you have references to both the main Jquery file and the ui file in product_info.php. Older versions should be okay. For example <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> or if you have them on your site, this would be the stock 2.3 references (this includes the appropriate css file): <link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" /> <script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script> Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
PupStar Posted February 20, 2011 Author Share Posted February 20, 2011 Make sure you have references to both the main Jquery file and the ui file in product_info.php. Older versions should be okay. For example <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> or if you have them on your site, this would be the stock 2.3 references (this includes the appropriate css file): <link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" /> <script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script> nice one that sorted the tabbing problem woohoo :thumbsup: Now for some reason the contents of tab-2 do not show urgh <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#tabs").tabs(); }); </script> <div class="tabs"> <div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1"><?php echo TEXT_PRODUCT_DESCRIPTION_TAB_TITLE; ?></a></li> <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-2"><?php echo TEXT_PRODUCT_DOWNLOADS_TITLE; ?></a></li> </ul> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-2"> <div> <?php if (tep_session_is_registered('customer_id')) { //Document Manager if (DOCUMENTS_SHOW_PRODUCT_INFO == 'True') { include_once (DIR_WS_MODULES . FILENAME_DOCUMENTS); } }else{ echo tep_customer_greeting(); } ?> </div> </div> </div> Link to comment Share on other sites More sharing options...
npn2531 Posted February 20, 2011 Share Posted February 20, 2011 You have a typo?, there is no closing </div> after: <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?> Oscommerce site: OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120 Link to comment Share on other sites More sharing options...
PupStar Posted February 20, 2011 Author Share Posted February 20, 2011 You have a typo?, there is no closing </div> after: <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"><?php echo stripslashes($product_info['products_description']); ?> thanks again, I had a stray </div> at the end of the file which was screwing up the layout :blush: Mark Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.