0

I've tried searching the database on this website however I still haven't found the specific answer to my problem.

When I click the links in the tabs the page goes to the top, I need that to stop. http://www.pcigeomatics.com/index.php?option=com_content&view=article&id=65&Itemid=7

nonemauro
  • 23
  • 3
  • 3
    Don't ask people to reverse-engineer your page. Post a simple example. – Diodeus - James MacFarlane Nov 05 '12 at 21:32
  • This is not a duplicate. It's a different problem entirely. Please look at their code, you will see that they already have `return false`. – davehale23 Nov 05 '12 at 22:05
  • There are a couple of ways to do this. This question will show you: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 I generally have the onClick function return false, which prevents the browser from following the link. – Schleis Nov 05 '12 at 21:34

1 Answers1

1

The reason it is 'scrolling' to the top is not because of the return false. It's because in this code:

//On Click Event
$("ul.tabs_ip li").click(function() {

    $("ul.tabs_ip li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab

////////////////RIGHT HERE
    $(".tab_content_ip").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

You are making the page significantly shorter by hiding that DIV, thus giving the appearance that you are 'scrolling' to the top of the page. If you were to give that DIV a min-height: 400px; or something like that, you wouldn't get the jogging about. Set the min-height to a reasonable number for your content.

EDIT:

Add this CSS to your .css file:

.tab_content_ip{
    min-height: 400px;
}
davehale23
  • 4,374
  • 2
  • 27
  • 40
  • @davehale23 Thanks for the response..I've added the min-height to the div but still getting the scroll to the top. – nonemauro Nov 06 '12 at 15:21
  • I have added a code sample of what I mean. I have added it to your page and it no longer skips to the top. – davehale23 Nov 06 '12 at 16:03
  • Hmmm, well I've added the css code you provided and still getting the same scrolling to the top. ? ? – nonemauro Nov 06 '12 at 20:36
  • There are now some javascript errors on that page that weren't there before. Before, I just added the above CSS to the top of 'main.css' and it prevented the page from jumping. But now you have some other new JS issues on your page. Check your error console. – davehale23 Nov 07 '12 at 20:59
  • ok, I've removed the JS errors, and added the css code to the top of main.css however I still have the page jumping...sorry but I don't know what the problem could be since we both are doing the same things and getting different results. – nonemauro Nov 08 '12 at 19:20
  • You still have an error "onPageLoad is not defined" on line 278. If `onPageLoad()` is supposed to do something, it's not doing anything. If it's old, you should remove it from the `onload` – davehale23 Nov 09 '12 at 15:37
  • Also, add the css to `tab_container_ip` like so: `.tab_container_ip{ min-height: 400px; }` – davehale23 Nov 09 '12 at 16:10
  • If this is the accepted answer, you should click that little hollow check box to the left of the answer. – davehale23 Nov 20 '12 at 15:32