Jump to content

jQuery one page navigation


piearcy

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

 

 

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. 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.