Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrollspy problem with two navs #15882

Closed
devniel opened this issue Feb 24, 2015 · 6 comments · Fixed by #15900
Closed

scrollspy problem with two navs #15882

devniel opened this issue Feb 24, 2015 · 6 comments · Fixed by #15900
Labels

Comments

@devniel
Copy link

devniel commented Feb 24, 2015

Hi, it seems that scrollspy goes crazy with two navs targeting same elements, I have this approach because of responsive design, one navigation menu is hidden in certain dimensions.

Demo : http://jsbin.com/xowuw/1/

By now, my workaround is a simple filter in scrollspy.js' refresh method :

       var exists = false;

        for(var i in self.targets){
          console.log(self.targets[i], " == ", this[1]);

          if(self.targets[i] == this[1]){
            exists = true;
            break;
          }
        }

        if(!exists){
          self.offsets.push(this[0])
          self.targets.push(this[1])
        }

Thanks !

@twbs-lmvtfy
Copy link

Hi @devniel!

You appear to have posted a live example (http://jsbin.com/xowuw/1/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • line 39, column 17: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 65, column 31: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 77, column 31: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 93, column 31: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 103, column 31: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
  • line 50, column 21: E029: Since grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes (unless overridden by grid classes targeting larger screens), class="xxx-modal-scroll-menu-wrapper col-md-4 col-sm-3 col-xs-3 hidden-xs" is redundant and can be simplified to class="xxx-modal-scroll-menu-wrapper hidden-xs col-xs-3 col-md-4"
  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@devniel
Copy link
Author

devniel commented Feb 24, 2015

Hi, it's fixed and the error still persists:

http://jsbin.com/xowuw/2/

Thanks

@hnrch02 hnrch02 added the js label Feb 24, 2015
@hnrch02
Copy link
Collaborator

hnrch02 commented Feb 24, 2015

I'm inclined to say this is a WontFix as it isn't the intended usage. @cvrebert What do you say?

@cvrebert
Copy link
Collaborator

Duplicate of #13071 perhaps?

@hnrch02
Copy link
Collaborator

hnrch02 commented Feb 24, 2015

Was thinking about that one too but here it's about two separate navs and not single elements in one nav. Might not make a difference though.

@cvrebert
Copy link
Collaborator

I am sympathetic to that argument, although the fact that the docs example currently uses data-spy="scroll" data-target=".navbar-example" (a class selector rather than an ID selector) certainly isn't helping things.

kkirsche added a commit to kkirsche/bootstrap that referenced this issue Feb 24, 2015
Fixes twbs#15882 — Use an ID as the example for Scrollspy so that it is more clear that this is for use with a single nav.
mdo added a commit that referenced this issue Feb 25, 2015
[Docs—Fixes #15882]Use an ID as the example for Scrollspy
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants