jQuery one page navigation

[piearcy]

Going to be a bit of code in this one. Basically I have a one page site that I'm using jQuery to navigate the page to make it appear as more than one page. Here is that particular code. 

$(document).ready(function() {  
        var offset = $("#tab-menu").offset();
        var topPadding = 15;
        $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
        $("#tab-menu").stop().animate({
        marginTop: $(window).scrollTop() - offset.top + topPadding
        });
        } else {
        $("#tab-menu").stop().animate({
        marginTop: 0
        });
        };
        });
        });
        $(function() {
        //Get all the LI from the #tabMenu UL
        $('#tab-menu > li').click(function(){
        $('#tab-menu > li').removeClass('selected');
        $(this).addClass('selected');
        $('.tab-content div.tab').slideUp('slow');
        $('.tab-content div.tab:eq(' + $('#tab-menu > li').index(this) + ')').slideDown('slow');
        }).mouseover(function() {
        $(this).addClass('mouseover');
        $(this).removeClass('mouseout');   
        }).mouseout(function() {
        $(this).addClass('mouseout');
        $(this).removeClass('mouseover');    
        });
        });

You will also notice I'm keeping that side menu close to the top of the page if you scroll down. 

 

This is all well and good. But I need to make this site responsive and the way I do that typically is to create a select menu as follows. 

$(function() {
     
      $("<select />").appendTo("#tab-menu");
      
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("#tab-menu select");
      
      $("#tab-menu a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("#tab-menu select");
      });
      
      $("#tab-menu select").change(function() {
       window.location = $(this).find("option:selected").val();
     });
   
   });

Now my problem runs into that last part there where it's wanting to change window location. So I have removed that part and put in the follow which doesn't seem to work. 

$(document).ready(function() {  
        
        $('#tab-menu select').change(function(){
        $('.tab-content div.tab').slideUp('slow');
        $('.tab-content div.tab:eq(' + $("#tab-menu select").index("option:selected").val() + ')').slideDown('slow');
        }).mouseover(function() {
        $(this).addClass('mouseover');
        $(this).removeClass('mouseout');   
        }).mouseout(function() {
        $(this).addClass('mouseout');
        $(this).removeClass('mouseover');    
        });
        });

Can anyone help me figure out how to make the select menu function properly to go to the tab I'm wanting it to go to just as my <li> elements work when it's full size? 

 

If not I'm going to scrap the jQuery and just navigate to different pages because that is easy. 

 

Thanks!

[piearcy]

Perhaps I had too much code in the first or maybe not enough. 

 

First, here is the HTML. 

<ul id="tab-menu">
  <li>link1</li>
  <li>link2</li>
  <li>link3</li>
  <li>link4</li>
</ul>

The relevant parts of the jQuery which work for my line items...

$('#tab-menu > li').click(function(){
    $('.tab-content div.tab').slideUp('slow');
    $('.tab-content div.tab:eq(' + $('#tab-menu > li').index(this) + ')').slideDown('slow');

(I removed the mouse over and active states etc. from the above so yes, I know I'm not closing the above but that's because I removed code beneath the relevant part) I could have added the )}; but I'm assuming you all know it's there.)

 

I'm making this responsive. I have that menu on the left and making it stay at the top of the page regardless of where you scroll. OBVIOUSLY this will not work for a phone so I get rid of the line items and populate a selection menu. The code is in my original post and that functions as it should. Though I did change it from populating with the links to removing links and populating with the > li. 

 

But now I need that tab to work using my selection menu. Here is what I've tried. I get no errors in console but it still does not work. I've tried .html, .attr, .text, .val and all of which do nothing other than slide up the previous but it's not sliding down the tab I'm looking for. Here's what I have currently. 

$("#tab-menu select").change(function() {
    var txt = jQuery(this).find("option:selected").html();
   $('.tab-content div.tab').slideUp('slow');
   $('.tab-content div.tab:eq(' + $(txt).index(this) + ')').slideDown('slow');
});

Of course this doesn't work either. 

 

I would love you forever if you can help me here. :-)

 

Thanks

[piearcy]

I added a console.log just to see what value I'm getting returned. 

console.log(txt);
      $('.tab-content div.tab').slideUp('slow');
      $('.tab-content div.tab:eq(' + $(txt).index(this) + ')').slideDown('slow');

And sure enough, I'm getting the text of the line item. So my problem has to be with the last line. 

$('.tab-content div.tab:eq(' + $(txt).index(this) + ')').slideDown('slow');

I've tried changing (txt) to (this) and (this) to (txt)  and different variations and still can't get it to do what I want it to do. 

[Q695]

This should help: http://www.cinemahaven.com/webmaster-tutorial-jquery-ajax-php-tutorial-swap-out-page-content-on-your-website-using-php-video_06fda13e5.html

[piearcy]

This should help: http://www.cinemahaven.com/webmaster-tutorial-jquery-ajax-php-tutorial-swap-out-page-content-on-your-website-using-php-video_06fda13e5.html

 

 

Not really because that's not what I'm doing. Odd that Adam has stuff over on that domain though. 

 

What Adam is talking about there is swapping content out using jQuery and PHP using Ajax. I'm not swapping out per se. I'm tabbing through data. And with a selection menu I don't need an on click event. I need an on change event for that selection menu to work. I can make it tab through content using the on click event and targeting the <li>. What I'm having trouble with is the on change event targeting the #tab-menu selection. 

 

As stated, I printed to console the value I'm getting back with my code and it's correct. The old tab does indeed slide up. What I'm not getting is the new tab sliding up as it should. 

 

Thanks though. 

[Q695]

onchange then it gets the value would work the same way.