Solved

Missing something simple, jQuery Tabs in Tabs

Posted on 2010-08-29
13
603 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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 4

Author Comment

by:jeremyBass26
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 13

Assisted Solution

by:Murali Murugesan
Murali Murugesan earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
tk for trying
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now