2

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?

James
  • 361
  • 3
  • 11

3 Answers3

1

Try this

$('a').click(function(e) {
    e.preventDefault();
    $("#help").load($(this).attr('href'));
})
Said Kholov
  • 2,436
  • 1
  • 15
  • 22
  • 1
    That did not work as expected, it tried to load the parent into the child, but thank you for pointing out e.preventDefault(), I was able to work out a solution once I knew how to suppress the default. – James Nov 10 '14 at 20:37
1

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

Community
  • 1
  • 1
rnrneverdies
  • 15,243
  • 9
  • 65
  • 95
0

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.
    })        
});
James
  • 361
  • 3
  • 11