CODEWITHSUNDEEP
javascriptjqueryhtml
James
James

Reputation: 361

How to prevent links to anchors in a child div from affecting main url?

Consider the following snippet:

<div id="help"></div> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    var loadPage = function (){
        $("#help").load("http://localhost:3000/manual.html");
    }
    onload=loadPage;
</script>

This exists on my main page:

http://localhost:3000/

The above code works fine and loads my manual page. But if I click a link like this in manual.html:

<a href='#introduction'>Introduction</a>

Then the page in the help div jumps to the #introduction section, however the url in my browser updates to: 

http://localhost:3000/#introduction

This is pointless because the #introduction anchor only exists in manual.html, how can I prevent the links in the #help div from affecting the address bar in the browser?

Upvotes: 2

Views: 104

Answers (3)

James
James

Reputation: 361

I already had a function that could scroll the #help window to a heading, when you click on objects in the parent it scrolls to the relevant section in the help window: 

var moveTo = function(destination){
    //position of the top of the help window - does not change.
    var helpWindow = $("#help").offset().top;                  
    //difference between current scroll position and target position.     
    var relativeDistance = $(destination).position().top - helpWindow; 
     //add the distance from current position to the top to get distance to target from top
    var absoluteDistance = relativeDistance+ $("#help").scrollTop();            

    $("#help").animate({
        scrollTop: absoluteDistance
    }, 1000);
}

Using e.preventDefault() I was able to use this function to do what I want. For others heading down this path there are two other small things to consider. Firstly, make sure you nest the .click() function inside the callback from page load, as the hyper links won't exist until the page is loaded. Secondly, You will probably want to use a child selector eg $('#help a').click() to ensure you are only altering the behaviour on links inside the child.

$("#help").load("http://localhost:3000/manual.html", function(){
    $('#help a').click(function(e) {
        e.preventDefault();                     //suppress standard link functionality
        moveTo($(this).attr('href'));           //scroll to link instead.
    })        
});

Upvotes: 0

rnrneverdies
rnrneverdies

Reputation: 15667

By using offset and preventDefault

$('a').click(function(e) {
     // Go to '#introduction'
     var targetId = $(this).attr('href');
     $('html, body').offset({ top: $(targetId).offset().top, left: 0 });
     // this prevent 'http://localhost:3000/#introduction'
     e.preventDefault();
});

See this post

Upvotes: 1

Said Kholov
Said Kholov

Reputation: 2486

Try this

$('a').click(function(e) {
    e.preventDefault();
    $("#help").load($(this).attr('href'));
})

Upvotes: 1

Related Questions