Forums

Raza

hi everyone,

I'm trying to add this moving/sliding tab into my page. Here's its demo page: http://www.queness.com/resources/html/movetab/index.html

I've done everything to make it work but its not, take a look: http://www.tradeglobus.com/index2.php

Can anyone point out what mistake I'm doing ?

JamesMD

I see you have jQuery 1.3.2 linked directly above the code, but you also have jQuery 1.6.2 as your dependency for other plugins and functions on the site. There's no need for the extra jQuery link. The plugin you're using works with 1.8.2, so it will work with anything less (considering it was built on 1.3.2).

Check this. This is the script being used with the latest jQuery, so no problems. It could be that you a have a conflict, regardless of defining noConflict in your code. It could be a CSS conflict, the classes are pretty common names such as "tabs", "content" and "panel".

Check for absolute references to the code. :)

Raza

Thanks for reply James

Well, at first I used jQuery 1.8.3 but I changed it to the exact version which was used in its tutorial. Its working on both versions of jQuery on my local pc & even on a page where no jquery is being used.

I understand it could be the CSS conflict, but I just tried to remove the noConflict code, & its working now.....but the jquery image slider has stopped working.

So I guess there's no problem with CSS.

Any idea ?

Thanks in advance bro :)

jamy_za

Is this still a problem? It seems to be working to me.

Raza

yes jamy, its working but only if I remove the noConflict code. then other jquery stuff stops working.

its really confusing now :(

jamy_za

You're including 3 versions of jQuery, never a good idea.

change this:

  <script>
      var $mtb = jQuery.noConflict(true);
      $mtb(function() {
          $mtb( "#moving_tab" ).tabs({
                  event: "mouseover"
          });
      });
  </script>

to this:

  <script type="text/javascript">
      jQuery(function($){
          $("#moving_tab").tabs({
              event: "mouseover"
          });
      });
  </script>

Raza

I tried it but same results, cant get it to work without adding noConflict code.

here's the full code:

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

  <script type="text/javascript">
  jQuery(function($){
        $("#moving_tab").tabs({
            event: "mouseover"
        });
  });
  </script>

  <script type="text/javascript">

  $(document).ready(function () {

  //set the default location (fix ie 6 issue)
  $('.lava').css({left:$('span.item:first').position()['left']});

  $('.item').mouseover(function () {
    //scroll the lava to current item position
    $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});

    //scroll the panel to the correct content
    $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
  });

  });

  </script>

  <style>
  #moving_tab {
  /* hide overlength child elements*/
  overflow:hidden;

  /* all the child elements are refering to this width */
  width:300px;

  /* fix ie 6 overflow bug */
  position:relative

  /* styling */
  border:1px solid #ccc;  
  margin:0 auto;
  }

  #moving_tab .tabs {
    /* enable absolute position for .lava */
    position:relative;  
    height:30px;

    /* styling */
    padding-top:5px;
    cursor:default;
  }

  #moving_tab .tabs .item {
    /* enable z-index */
    position:relative;
    z-index:10;

    /* display in one row */
    float:left;
    display:block;

    /* width = half size of #moving_tab */
    width:150px;

    /* height = height of .tabs */
    text-align:center;
    font-size:14px;
    font-weight:700;  
  }

  #moving_tab .tabs .lava {
    /* Set it to absolute */
    position:absolute;
    top:0; left:0;

    /* display the lava in bottom most layer */
    z-index:0;    

    /* width = half size of #moving_tab */
    width:150px;

    /* height = height of .tabs */
    height:30px;

    /* styling */
    background:#abe3eb;

  }

  #moving_tab .content {
    /* enable absolute position for .panel */ 
    position:relative;
    overflow:hidden;

    /* styling */
    background:#abe3eb;
    border-top:1px solid #d9fafa;
  }

  #moving_tab .panel {
    /* width is width of #moving_tab times 2 */
    position:relative;
    width:600px;
  }

  #moving_tab .panel ul {
    /* display in one row */
    float:left;

    /* width is the same with #moving_tab */
    width:300px;

    /* remove all styles */
    padding:0;
    margin:0;
    list-style:none;
  }
    /* styling */
    #moving_tab .panel ul li {
      padding:5px 0 5px 10px; 
      border-bottom:1px dotted #fff;
    }
  </style>

  <div id="moving_tab">
  <div class="tabs">
  <div class="lava"></div>
  <span class="item">Popular Posts</span>
  <span class="item">Recent Posts</span>

  </div>

  <div class="content">           
  <div class="panel">           
    <ul>
      <li><a href='#'>Panel 01 Item 01</a></li>
      <li><a href='#'>Panel 01 Item 02</a></li>
      <li><a href='#'>Panel 01 Item 03</a></li>
      <li><a href='#'>Panel 01 Item 04</a></li>
      <li><a href='#'>Panel 01 Item 05</a></li>
    </ul>
    <ul>
      <li><a href='#'>Panel 02 Item 01</a></li>
      <li><a href='#'>Panel 02 Item 02</a></li>
      <li><a href='#'>Panel 02 Item 03</a></li>
      <li><a href='#'>Panel 02 Item 04</a></li>
      <li><a href='#'>Panel 02 Item 05</a></li>     
    </ul>           
  </div>

  </div>  
  </div>

jamy_za

Part of debugging is to fix things which may not actually be the problem. Before I can help I'll need you to only include the latest version of jQuery. Also the page has 211 HTML errors. http://validator.w3.org/check?uri=http://www.tradeglobus.com/index2.php&charset=(detect+automatically)&doctype=Inline&group=0

Raza

ok bro, I'm doing this error correction & jquery version, then I'll update you tomorrow.

tell me one thing, should I include the same latest jQuery everywhere ? or should I just include the latest jquery once ?

jamy_za

Include the latest jQuery once in the <head> element. Usually you would include jQuery just before the closing body tag but due to the fact that you have scripts opening in random areas in the body it's best to include it in the head.

treehouse : what would you like to learn today?

Forums

jQuery Moving Tabs !