What is the best way to separate javascript functions?

Question

I have two javascript files that come in conflict with each other. One is to open modals and uses links like <a href="#modal" data-toggle="modal">open modal</a>, and would then open the modal with id="modal". But the other script is for smooth scroll and it removes the anchor from the url (I'd like to keep that part!) but after adding the smooth scroll script, the modals don't work. any ideas how I can fix it?

modal.js:

$(".modal-wide").on("show.modal", function() {

  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});
$('a[data-toggle="modal"]').bind('click',function(){
  $('.modal').modal('hide');
});

scroll.js:

$(function() {
  $('a[href*="#"]: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
        }, 500);
        return false;
      }
    }
  });
});

scroll.js source: https://css-tricks.com/snippets/jquery/smooth-scrolling/

@amenadiel I honestly don't know where I got the modal code from, but I belive it is from bootstrap 3.0 yes — Volcan 3
– Volcan 3, Commented Mar 24, 2017 at 18:27

bryangators55 · Accepted Answer · 2017-03-24 18:13:58Z

1

Try adding your specific href tags to the not selector the the smooth scroll function.

$('a[href*="#"]:not([href="#"]):not([href="#modal"])').click(function()

Here is a fiddle showing the smoothscroll only works for the smooth scroll div which should preserve your modal functionality.

https://jsfiddle.net/bryangators/wjgu1vL9/

edited Mar 24, 2017 at 18:13

answered Mar 24, 2017 at 18:03

bryangators55

1388 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Volcan 3 Over a year ago

hmm this is nice, but the href="#modal" would open a modal that had the id of modal. so with this code I would have to add every modal id to the :not part. Can it be done with data-toggle="modal" instead?

Volcan 3 Over a year ago

ooh nvm. was able to test it my self and the code works now with $('a[href*="#"]:not([href="#"]):not([data-toggle="modal"])').click(function() { . thanks for your help :)

Collectives™ on Stack Overflow

What is the best way to separate javascript functions?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related