Question

I hope you guys can help me with this.

The navigation, tabmenunav has 3 small dots at the bottom of the tabs, I need to calculate the height of each tab and position them at the bottom. at the moment are all in position absolute and doesn’t look good.

Demo:
http://jsfiddle.net/QxgDr/24/

Jquery

(function tabszIndex() {

$('ul.tabmenu > li > a').each(function(e) {
    $("#tabmenunav").append("<a href='javascript:void(0);' class=''>&#8226;</a>");
});

$('ul.tabmenu > li > a').click(function(e) {
    var selectedTabIndex = $(this).parent().attr('id').substring(3); //parseInt(this.hash.substring(4));
    $('ul.tabmenu a').removeClass('active');
    $(this).addClass('active');
    $('#tabmenunav a').removeClass('active');
    $('#tabmenunav a').eq($(this).parent().index()).addClass('active');
    var i = 0;
    $('.tabmenu li').css('z-index', function(index) {
        var z = index < selectedTabIndex ? 1 : (index > selectedTabIndex ? --i : 0);
        return z
    });
    e.preventDefault();
});
$('#tabmenunav a').click(function() {
    var idx = $(this).index();
    $('> a', $('ul.tabmenu > li').eq(idx)).trigger('click');

})
var lastTabIndex = $('.tab').length - 1;
$('.tab').each(function(i) {
    if (i != lastTabIndex) {
        $(this).append("<a href='javascript:void(0)' class='next-tab mover'>Next Tab &#187;</a>");
    }
    if (i != 0) {
        $(this).append("<a href='javascript:void(0)' class='prev-tab mover'>&#171; Prev Tab</a>");
    }
});
var tabMenu = $('.tab');
$('.next-tab, .prev-tab').click(function() {
    var newTabIndex = $(this).hasClass('next-tab') ? 1 : -1;
    var idx = (parseInt($(this).parents('li').attr('id').substring(3)) + newTabIndex);
    $('ul.tabmenu > li#tab' + idx + ' > a').trigger('click');
});
$('> a', $('ul.tabmenu > li').eq(0)).trigger('click');

})();

Answer 1

One of the first things that came to mind was the use of offset(). Documentation. You can use that to both capture the location of an element and then turn around and use that to set the location of another element. I have used this technique to modify your jsfiddle here.

Here is what I added:

var offsetGoal = $("#Overview").offset();
$("#Features").offset({ top: offsetGoal.top, left: (offsetGoal.left+100) });
$("#Technical").offset({ top: offsetGoal.top, left: (offsetGoal.left+200) });

Perhaps that will work for you.

Edit: Oops, I just noticed that you were asking about shifting the three small dots. I came up with the following to adjust their position which you might find useful.

I decided to calculate the number of li elements that you have in your menu (assuming you eventually have more) and multiply that by a set number of pixels to adjust by.

// However many elements in our tab menu should reinforce how far down to shift the navigation elements.
var shiftDotsBy = $(".tabmenu>li").size() * 3;
// Find the current position and just shift it downward
var dotsCurrentPos = $("#tabmenunav").offset();
$("#tabmenunav").offset({top: (dotsCurrentPos.top+shiftDotsBy), left: dotsCurrentPos.left});

Working example.

Edit: This jsfiddle has been updated and shifts the dots based on which tab has been clicked and their relative height difference. Here is the approach:

// tab index is one-based; assuming each tab is twenty pixels lower than the previous one
var shiftDotsBy = (selectedTabIndex - 1) * 20;
var dotsCurrentPos = $("#tabmenunav").offset();
// Based on the original position of the dots determined outside this event, shift the dots by how far each tab extends down
$("#tabmenunav").offset({top: (dotsOrigPos.top+shiftDotsBy), left: dotsCurrentPos.left});

Taking these ideas you should have lots of control over how you want your dots to appear and shift around.