I need to set display: block on div then find an anchor within that div

Question

I'm nearly finished with this project but I have been beating my head against this problem for a day or so.

Big picture: Im trying to create a link that will jump between tabs and find an anchor.

Details: I need to create a link which triggers the function that hides the current div (using display: none)/shows another div (display: block;) and then goto an anchor on the page.

My first intuition was to do: code:

<a onClick="return toggleTab(6,6);" href="#{anchor_tab_link_name}">{anchor_tab_link_name}</a>

Since the onClick should return true and then execute the anchor. However it loads but never goes to the anchor.

Here is the toggleTab function to give some context:

function toggleTab(num,numelems, anchor, opennum,animate) {
    if ($('tabContent'+num).style.display == 'none'){
        for (var i=1;i<=numelems;i++){
            if ((opennum == null) || (opennum != i)){
                var temph = 'tabHeader'+i;
                var h = $(temph);
                if (!h){
                    var h = $('tabHeaderActive');
                    h.id = temph;
                }
                var tempc = 'tabContent'+i;
                var c = $(tempc);
                if(c.style.display != 'none'){
                    if (animate || typeof animate == 'undefined')
                        Effect.toggle(tempc,'appear',{duration:0.4, queue:{scope:'menus', limit: 3}});
                    else
                        toggleDisp(tempc);
                }
            }
        }
        var h = $('tabHeader'+num);
        if (h)
            h.id = 'tabHeaderActive';
        h.blur();
        var c = $('tabContent'+num);
        c.style.marginTop = '2px';
        if (animate || typeof animate == 'undefined'){
            Effect.toggle('tabContent'+num,'appear',{duration:0.4, queue:{scope:'menus', position:'end', limit: 3}});
        }else{
            toggleDisp('tabContent'+num);
        }

    }
}

So I posted this on a coding forum and a person told me that my tab code was done in prototype.

And that I should "Long story short: don't use onclick. Attach the data to the A tag and handle the click event yourself (using preventDefault() or similar) to do your tab-setting stuff, then when it's done, manually set your location to the hash tag."

I do understand what he is suggesting but I don't know how to implement it because I don't know much about javascript syntax.

If you can provide any hints or suggestions it would be amazing.

Update:

I tried to implement the solution below like this:

The link:

<a id="trap">trap</a>

Then adding the following js to the top of the page:

<script type="javascript">
document.getElementById("trap").click(function() { // bind click event to link
  tabToggle(6,6);
  var anchor = $(this).attr('href');

  //setTimeout(infoSupport.gotoAnchor,600, anchor);
  jumpToAnchor();

  return false;

});

 //Simple jump to anchor point
function jumpToAnchor(){
     location.href = location.href+"#trap";
}
//Nice little jQuery scroll to id of any element
function scollToId(id){
   window.scrollTo(0,$("#"+id).offset().top);
}

</script>

But unfortunately it simply doesn't seem to work for me. When I click the text simply nothing happens.

Anyone notice any apparent mistakes? I'm not used of working with javascript.

Answer 1

I found a lot simpler solution:

$(function(){
    jumpToTarget('spot_to_go'); //This is what you put inside your function when the link is clicked.

  function jumpToTarget(target){
    var target_offset = $("#"+target).offset();
    var target_top = target_offset.top;
    $('html, body').animate({scrollTop:target_top}, 500);
}
});

Working demo:

http://jsbin.com/ivure/3/edit

So on the click event you do something like this:

//Untested
$('#trap').click(function(){
  tabToggle(6,6);
  var anchor = $(this).attr('href');
  jumpToTarget(anchor);
  return false;

});

​

Answer 2

Apparently a small delay was all I needed.

I used this for the link. This is preferred for my situation since I'm batch generating many of these links.

<a href="javascript:toggleTab(6,6);jumpToAnchor('trap');">trap</a>

Then I used this vanilla javascript

 //Simple jump to anchor point
  function jumpToAnchor(target){
    setTimeout("window.location.hash=target",450);
}

This loads the link and instantly goes to the location. No jerkiness or anything.