Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Missing something simple, jQuery Tabs in Tabs

Posted on 2010-08-29
13
Medium Priority
?
618 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
  • 10
  • 3
13 Comments
 
LVL 13

Accepted Solution

by:
Murali Murugesan earned 1500 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 1500 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 1500 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

783 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