0

I had previously solved issue where my navbar links weren't collapsing after being clicked and thanks to @Kami I had this working using the below code

$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('toggle');
}
});

from Bootstrap 3 after navbar collapse, toggle wont reopen nav

but when I added this nice function below to keep the navbar from overlapping content it broke.

What part of this function caused the above to break and how can I implement both?

  function scrollToAnchor() {
if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){
var anchor = document.URL.split("#")[1];
$(".jquery-anchor").each(function() {
    if($(this).attr("name") == anchor) {
        $("html,body").animate({
                scrollTop: $(this).offset().top - 50},
            'slow');
        }           
    });

}

}

$(function() {
$("a[href*='#JDG']:not([href='#'])").click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - 30 //offsets for fixed header
    }, 1000);
    return false;
  }
 }
 });

 //Executed on page load with URL containing an anchor tag.
 if($(location.href.split("#")[1])) {
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - 30 //offset height of header here too.
    }, 1000);
    return false;
  }
}


});

Using @Shouvik suggestion from offsetting an html anchor to adjust for fixed header I changed one line of code to only look for anchors that started with #JDG as without this links to anchors to my modal windows broke. You can see what is happening here where my services menu items wont close after being clicked. the functions are placed at the end of the bootstrap.min.js file

Community
  • 1
  • 1
Torads
  • 69
  • 1
  • 10

2 Answers2

1

You are not actually telling your script to close the menu. In order to do that, add the following line inside your function scrollToAnchor() function:

$('.navbar-collapse.in').collapse('hide');

EDIT: Having another look at the script, the above line should be placed inside the following lines instead of function scrollToAnchor() function, ie. it has to apply when you click the menu item:

$("a[href*='#JDG']:not([href='#'])").click(function() {
    //...
    $('.navbar-collapse.in').collapse('hide');
});
benomatis
  • 5,536
  • 7
  • 36
  • 59
  • Added that line but no luck. tried in FF and Chrome. also tried changing from 'hide' to 'toggle' as when I used hide originally, any second attempts to open the dropdown didn't work. Did i place it correctly? – Torads Oct 16 '14 at 17:56
  • you don't actually have the [**transitions plugin**](http://getbootstrap.com/javascript/#transitions) included, as instructed by the [**bootstrap documentation on collapse**](http://getbootstrap.com/javascript/#collapse)... – benomatis Oct 16 '14 at 19:29
  • also, you already have a custom script, why don't you use that instead of adding custom code into standard script? – benomatis Oct 16 '14 at 19:31
  • from bootstrap "If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there." I'm using the minified version – Torads Oct 16 '14 at 20:53
  • you know way more than I do regarding jquery and javascript. The only thing that I know about this is that my custom function that solved my collapse problem broke once I used the animate function. If I take that away it works. My question was can anyone explain why this is? I am trying to use both which I'm sure is possible once I figure out the cause. – Torads Oct 16 '14 at 21:14
0

Jasper pointed out the issue why these weren't working when together.

I just had to remove the 

return false;

from both functions.

Torads
  • 69
  • 1
  • 10