Solved

Missing something simple, jQuery Tabs in Tabs

Posted on 2010-08-29
13
615 Views
Last Modified: 2012-05-10
Hello, I for some odd reason can't see where I'm having a mistake in this code for a jQueryTools tabs in inside a tab.

 
$("ul.products_category_list").tabs("div#productArea > div.products", {effect: 'slide'});


$(".navArea .nav").tabs($(this).siblings("div.pages > div.page"), {effect: 'fade'});

$('.prev').live('click',function(){
	setTimeout(function(){
		var Cindex= $(this).closest(".navArea .nav").data("tabs").getIndex()-1;
		$(this).closest(".navArea .nav").data("tabs").seekTo(Cindex, 2);
	}, 5);
});
$('.next').live('click',function(){
	setTimeout(function(){
		var Cindex= $(this).closest(".navArea .nav").data("tabs").getIndex()+1;
		$(this).closest(".navArea .nav").data("tabs").seekTo(Cindex, 2);
	}, 5);
});

Open in new window


I think I have it right.. The goal is to have the "Choose Your Fabric:" items as the tabs (which work) and the inner tabs that is the pager at the right with the next and prev links.

Here is the live test area.

Pardon some of the delays on load,  have not refactored that just yet as I got held down on this :/ ...

Now do to the inner tabs not working I am think that is the cause for the $('.next') type links are not working.. that needs to as well..

Thank you for the help.. Cheers -Jeremy


<div class="pagewrapper" style="height: 728px;">
        <div class="content"> 
          <div class="main">



			<div id="cateline"><span>Choose Your Fabric:</span><ul class="products_category_list">


             <li> <a href="http://173.203.188.218/products/viewcategory/1/19.html" class="current">Cotton</a>&nbsp;&nbsp;</li>
    
   

             <li> <a href="http://173.203.188.218/products/viewcategory/2/19.html">Linen</a>&nbsp;&nbsp;</li>
    
   

             <li> <a href="http://173.203.188.218/products/viewcategory/3/19.html">Wool</a>&nbsp;&nbsp;</li>
    
   
</ul>
</div>
<div id="productArea">

<div rel="pro_1" class="products pro_1" style="display: block;">


<div class="navArea">
        <a href="#"><span class="prev">Prev</span></a> 
        <ul class="nav">
<li><a href="#0">1</a></li><li class="active"><a href="#1">2</a></li></ul>
        <a href="#"><span class="next">Next</span></a>
</div>
<div class="pro_1 pages">

<div class="page" style="left: -515px;">

  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb1" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_1/p1.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp1.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283108063"></a>
</span>

<span class="pro_name">Black and White Window Pane</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>


<span class="pro_price">Price: $35</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="medb7amoduleform_1">
<div class="hidden">
<input type="hidden" value="Cart,medb7a,default,0" name="mact">
<input type="hidden" value="19" name="medb7areturnid">
<input type="hidden" value="1" name="medb7aproduct">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="medb7acart_returnto">
</div>


<select name="medb7acart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="medb7acart_submit" class="submit">

</form>
 
  </div>
    </div>




  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb4" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_4/p1.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp1.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283108063"></a>
</span>

<span class="pro_name">item 3</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer  adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet  dolore magna aliquam erat volutpat.</span>


<span class="pro_price">Price: $35</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="mb8d9cmoduleform_2">
<div class="hidden">
<input type="hidden" value="Cart,mb8d9c,default,0" name="mact">
<input type="hidden" value="19" name="mb8d9creturnid">
<input type="hidden" value="4" name="mb8d9cproduct">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="mb8d9ccart_returnto">
</div>


<select name="mb8d9ccart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="mb8d9ccart_submit" class="submit">

</form>
 
  </div>
    </div>




  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb5" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_5/p1.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp1.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283108063"></a>
</span>

<span class="pro_name">item 335</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer  adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet  dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet,</span>


<span class="pro_price">Price: $35</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="m8ffc4moduleform_3">
<div class="hidden">
<input type="hidden" value="Cart,m8ffc4,default,0" name="mact">
<input type="hidden" value="19" name="m8ffc4returnid">
<input type="hidden" value="5" name="m8ffc4product">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="m8ffc4cart_returnto">
</div>


<select name="m8ffc4cart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="m8ffc4cart_submit" class="submit">

</form>
 
  </div>
    </div>




  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb6" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_6/p1.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp1.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283108063"></a>
</span>

<span class="pro_name">item 63</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer  adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet  dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet.</span>


<span class="pro_price">Price: $35</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="m7ab9fmoduleform_4">
<div class="hidden">
<input type="hidden" value="Cart,m7ab9f,default,0" name="mact">
<input type="hidden" value="19" name="m7ab9freturnid">
<input type="hidden" value="6" name="m7ab9fproduct">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="m7ab9fcart_returnto">
</div>


<select name="m7ab9fcart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="m7ab9fcart_submit" class="submit">

</form>
 
  </div>
    </div>


</div><div style="display: none; left: -515px;" class="page">

  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb7" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_7/p1.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp1.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283108063"></a>
</span>

<span class="pro_name">item 78</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Sa diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&nbsp; Lorem ipsum dolor sit amet, consectetuer adipisc ng elit,sed diam.</span>


<span class="pro_price">Price: $45</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="m40a88moduleform_5">
<div class="hidden">
<input type="hidden" value="Cart,m40a88,default,0" name="mact">
<input type="hidden" value="19" name="m40a88returnid">
<input type="hidden" value="7" name="m40a88product">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="m40a88cart_returnto">
</div>


<select name="m40a88cart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="m40a88cart_submit" class="submit">

</form>
 
  </div>
    </div>

</div></div></div>
<div style="display: none;" rel="pro_2" class="products pro_2">


<div class="navArea">
        <a href="#"><span class="prev">Prev</span></a> 
        <ul class="nav">
<li><a href="#0">1</a></li><li><a href="#1">2</a></li></ul>
        <a href="#"><span class="next">Next</span></a>
</div>
<div class="pro_2 pages">

<div class="page" style="left: 0px;">

  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb2" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_2/p1.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp1.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283108063"></a>
</span>

<span class="pro_name">item 2</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>


<span class="pro_price">Price: $35</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="mc624emoduleform_6">
<div class="hidden">
<input type="hidden" value="Cart,mc624e,default,0" name="mact">
<input type="hidden" value="19" name="mc624ereturnid">
<input type="hidden" value="2" name="mc624eproduct">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="mc624ecart_returnto">
</div>


<select name="mc624ecart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="mc624ecart_submit" class="submit">

</form>
 
  </div>
    </div>




  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb8" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_8/p2.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp2.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283112888"></a>
</span>

<span class="pro_name">Linen 1</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">aliquam erat volutpat.Lorem ipsum dolor sit ame Lorem ipsum dolor sit amet, consectetuer   adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet   dolore magna t.</span>


<span class="pro_price">Price: $35</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="mfe29cmoduleform_7">
<div class="hidden">
<input type="hidden" value="Cart,mfe29c,default,0" name="mact">
<input type="hidden" value="19" name="mfe29creturnid">
<input type="hidden" value="8" name="mfe29cproduct">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="mfe29ccart_returnto">
</div>


<select name="mfe29ccart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="mfe29ccart_submit" class="submit">

</form>
 
  </div>
    </div>




  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb9" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_9/p2.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp2.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283112888"></a>
</span>

<span class="pro_name">Linen 13</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer   adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet   dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet,</span>


<span class="pro_price">Price: $12</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="m45ae4moduleform_8">
<div class="hidden">
<input type="hidden" value="Cart,m45ae4,default,0" name="mact">
<input type="hidden" value="19" name="m45ae4returnid">
<input type="hidden" value="9" name="m45ae4product">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="m45ae4cart_returnto">
</div>


<select name="m45ae4cart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="m45ae4cart_submit" class="submit">

</form>
 
  </div>
    </div>




  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb10" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_10/p2.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp2.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283112888"></a>
</span>

<span class="pro_name">Linen 16</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer   adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet   dolore magna aliquam erat volutpat.Lorem ipsum dolor sit amet,</span>


<span class="pro_price">Price: $65</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="m9f130moduleform_9">
<div class="hidden">
<input type="hidden" value="Cart,m9f130,default,0" name="mact">
<input type="hidden" value="19" name="m9f130returnid">
<input type="hidden" value="10" name="m9f130product">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="m9f130cart_returnto">
</div>


<select name="m9f130cart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="m9f130cart_submit" class="submit">

</form>
 
  </div>
    </div>


</div><div style="display: none; left: 0px;" class="page">

  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb11" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_11/p2.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp2.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283112888"></a>
</span>

<span class="pro_name">Linen 199</span>
<span class="pro_dis">Description:</span>
<span class="pro_details">Lorem ipsum dolor sit amet, consectetuer  adipisc ng elit,sed diam nonummy nibh euismod tincidunt ut laoreet  dolore magna aliquam erat volutpat.</span>


<span class="pro_price">Price: $15</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="m7a28dmoduleform_10">
<div class="hidden">
<input type="hidden" value="Cart,m7a28d,default,0" name="mact">
<input type="hidden" value="19" name="m7a28dreturnid">
<input type="hidden" value="11" name="m7a28dproduct">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="m7a28dcart_returnto">
</div>


<select name="m7a28dcart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="m7a28dcart_submit" class="submit">

</form>
 
  </div>
    </div>

</div></div></div>
<div style="display: none;" rel="pro_3" class="products pro_3">


<div class="navArea">
        <a href="#"><span class="prev">Prev</span></a> 
        <ul class="nav">
<li><a href="#0">1</a></li></ul>
        <a href="#"><span class="next">Next</span></a>
</div>
<div class="pro_3 pages">

<div class="page">

  <div class="ProductDirectoryItem">


<span class="img"><span class="imgZoom"></span>
<a rel="cb3" class="zoom cboxElement" href="http://173.203.188.218/uploads/Products/product_3/p1.jpg"><img alt="" class="pro_img" src="http://173.203.188.218/uploads/SuperSizerTmp/sCCp1.-w200-h185-p0-q85-F-----S1-ccentercenter.jpg?1283108063"></a>
</span>

<span class="pro_name">item3</span>
<span class="pro_dis">Description:</span>
<span class="pro_details"></span>


<span class="pro_price">Price: $0</span>

  
    <div class="pro_add">
  
<form class="cms_form" action="http://173.203.188.218/collections.html" method="post" id="m0deb7moduleform_11">
<div class="hidden">
<input type="hidden" value="Cart,m0deb7,default,0" name="mact">
<input type="hidden" value="19" name="m0deb7returnid">
<input type="hidden" value="3" name="m0deb7product">
<input type="hidden" value="http://173.203.188.218/collections.html&amp;ajax=true" name="m0deb7cart_returnto">
</div>


<select name="m0deb7cart_quantity" class="submit">
<option value="na">Quantity</option>
<option label="1" value="1">1</option>
<option label="2" value="2">2</option>
<option label="3" value="3">3</option>
<option label="4" value="4">4</option>
<option label="5" value="5">5</option>
<option label="6" value="6">6</option>
<option label="7" value="7">7</option>
<option label="8" value="8">8</option>
<option label="9" value="9">9</option>
</select>

<br>
<input type="submit" value="Add To My Cart" name="m0deb7cart_submit" class="submit">

</form>
 
  </div>
    </div>

</div></div></div>

</div>
          </div>
        </div>
      </div>

Open in new window

0
Comment
Question by:jeremyBass26
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 3
13 Comments
 
LVL 13

Accepted Solution

by:
Murali Murugesan earned 500 total points
ID: 33555553
can u try the same screen with FireFox  & Firebug plugin .Check for any script errors, if you have any please post it here..
0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33555578
Sorry already checked there.. no errors, try many different iterations in the console too..

I'm sure when you look and try it out it'll be something easy... tk
0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33555582
this is where I currently am at.

$(".navArea .nav").tabs("div.pages > div.page", {effect: 'fade'});


$('.next').live('click',function(){
alert('next');
var Cindex= $(this).closest(".navArea").data("tabs").getIndex()+1;
alert(Cindex);
$(this).closest(".navArea").data("tabs").seekTo(Cindex, 2);
});

$('.prev').live('click',function(){
var Cindex= $(this).closest(".navArea").data("tabs").getIndex()-1;
$(this).closest(".navArea").data("tabs").seekTo(Cindex, 2);
});
0
PowerShell Core for Advanced Linux Administrators

Understand advanced principals around Powershell Core with a focus on the Linux Administrator.  This course covers how to administer numerous environments across multiple platforms including Linux, Azure, AWS, and Google Cloud from a single shell instance.

 
LVL 4

Author Comment

by:jeremyBass26
ID: 33555669
Ok.. it's getting close.. so right now if you try it out live it's tabing on the first tabs in the first tab of the parent tabs.. but the second tabs in the secound tab of the parent tabs goes back to the first tab. :/ closer for sure..

now if I click .next here I get

"$(this).closest(".nav").eq(daIndex).data("tabs") is undefined" as the error.

tk
$("ul.products_category_list").tabs("div#productArea > div.products", {effect: 'slide'});


$("div.products .nav").each(function(){
$(this).tabs($(this).closest("div.products").find("div.page"), {effect: 'fade'});
});


$('a.next').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
       var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $(this).closest(".nav").eq(daIndex).data("tabs").getIndex()+1;
	alert(Cindex);
	$(this).closest(".nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);
});

$('a.prev').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
       var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $(this).closest(".nav").eq(daIndex).data("tabs").getIndex()-1;
	$(this).closest(".nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);
});

Open in new window

0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33555677
ok.. basicly the same code.. works in IE (less the next and prev links)... but doesn't in FF.. grrr getting closer..


again here is the live test area  http://173.203.188.218/#/collections.html
$("ul.products_category_list").tabs("div#productArea > div.products", {effect: 'slide'});


$("div.products .nav").each(function(){
$(this).tabs($(this).closest("div.products").find("div.page"), {effect: 'fade'});
});


$('a.next').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
       var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $(this).closest(".nav").data("tabs").eq(daIndex).getIndex()+1;
	alert(Cindex);
	$(this).closest(".nav").data("tabs").eq(daIndex).seekTo(Cindex, 2);
});

$('a.prev').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
       var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $(this).closest(".nav").data("tabs").eq(daIndex).getIndex()-1;
	$(this).closest(".nav").data("tabs").eq(daIndex).seekTo(Cindex, 2);
});

Open in new window

0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33555942
here is a version I get and error form.. I made it to the secound alert..



So this is a little closer to the right path I think...
I have an error right now of

$("div.products .nav").eq(daIndex).data("tabs").seekTo is not a function
[Break on this error] $("div.products .nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);

$("ul.products_category_list").tabs("div#productArea > div.products", {effect: 'slide'});

$("div.products .nav").each(function(){
$(this).tabs($(this).closest("div.products").find("div.page"), {effect: 'fade'});
});

$('a.next').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
        //alert(daIndex);
	var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()+1;
	//alert(Cindex);
	$("div.products .nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);
});

$('a.prev').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()-1;
	$("div.products .nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);
});

Open in new window

0
 
LVL 13

Assisted Solution

by:Murali Murugesan
Murali Murugesan earned 500 total points
ID: 33556489
checkout the following.

1. alert( $("div.products .nav").eq(daIndex).data("tabs"));  -- it can be null

2. check daIndex value, and look into the view source for that particular element.

3. Make sure you don't have more than one element id with the same name.



0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33558418
1. alert( $("div.products .nav").eq(daIndex).data("tabs"));  -- it can be null -- what.. not it can't to work..

2. check daIndex value, and look into the view source for that particular element. --- duh

3. Make sure you don't have more than one element id with the same name.
--- duh and if you would look at the could you'd know what this was just stabbing in the dark.. what one of these items have an id .. hmmm?

Look if you’re just going to stab in the dark with me you not going to get any points.. that as I'm the one solving it.. right?


right now the only thing that is not working is the next and prev...
finsh that.. then you get it, I finishes it then on to my solution is the winner.  Thank you for the help.. Cheers
$("ul.products_category_list").tabs("div#productArea > div.products", {effect: 'slide'});


$("div.products .nav").each(function(){
	$(this).tabs($(this).closest("div.products").find("div.page"), {effect: 'fade'});
});


$('a.next').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()+1;
	//alert(Cindex);
	$("div.products .nav").eq(daIndex).data("tabs").click(Cindex);
});

$('a.prev').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()-1;
	//alert(Cindex);
	$("div.products .nav").eq(daIndex).data("tabs").click(Cindex);
});

Open in new window

0
 
LVL 13

Assisted Solution

by:Murali Murugesan
Murali Murugesan earned 500 total points
ID: 33559432
I'm least concerned about your points.

Moreover its not the solution i was giving you, its just a pointers where you might take a additional look.

For your info,. try out naming a textbox & submit button with the same name and try calling the submit() method on that and you will see what i mean by the same id....

"finsh that.. then you get it, I finishes it then on to my solution is the winner"
>> this is known to every EE member and nothing new about it.

I hope you would get your winning solution soon.
good luck

-Murali*
0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33562944
Look sorry if that had tone.. wasn't meant.. still at that, I understand if there is a dbl id that the first gets found and the dom lookup stops there.  See I even know the whys.  :D ...

Regardless.. thank you for trying.. cheers -Jeremy
0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33587929
if I can just get to the

$('a.next').live('click',function(e){
        e.stopPropagation();  
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
      var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()+1;
      //alert(Cindex);
      $("div.products .nav").eq(daIndex).data("tabs").click(Cindex);
});

$('a.prev').live('click',function(e){
        e.stopPropagation();  
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
      var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()-1;
      //alert(Cindex);
      $("div.products .nav").eq(daIndex).data("tabs").click(Cindex);
});



I'll be good to go.. any ideas?  tk and cheers -Jeremy
0
 
LVL 4

Author Comment

by:jeremyBass26
ID: 33605124
well this was it..



      $('a.next').live('click',function(e){
                  e.stopPropagation();  
                  e.preventDefault();
                  $('.error').hide();
                  var daIndex= $(this).closest("div.products").index();
            $("div.products .nav").eq(daIndex).data("tabs").next();
            if($("div.products .nav").eq(daIndex).data("tabs").getIndex()!=0){
                  $('a.prev').show();
            }
                  var total=$(this).siblings('.nav').find('a:last').index()+1;
                  if($("div.products .nav").eq(daIndex).data("tabs").getIndex()==total){
                        $('a.next').hide();
                  }
      });

      $('a.prev').live('click',function(e){
                  e.stopPropagation();  
                  e.preventDefault();
                  $('.error').hide();
                  var daIndex= $(this).closest("div.products").index();
            $("div.products .nav").eq(daIndex).data("tabs").prev();
            if($("div.products .nav").eq(daIndex).data("tabs").getIndex()==0){
                  $('a.prev').hide();
            }
                  var total=$(this).siblings('.nav').find('a:last').index()+1;
                  if($("div.products .nav").eq(daIndex).data("tabs").getIndex()!=total){
                        $('a.next').show();
                  }
      });
0
 
LVL 4

Author Closing Comment

by:jeremyBass26
ID: 33605127
tk for trying
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question