I can't get scrollspy to work with my bootstrap navbar - javascript

I know this is a very common problem, but I have spent ~two days crawling the forums, trying fixes, can't seem to find the answer.
I have a standard bootstrap setup that uses some parallax scrolling. I have a navbar fixed to the bottom of the page. Each <li> is shaped like a circle, and inside the <li> is an <a> tag. Each 'circular' <li> is linked to an anchor tag on the page in order to provide navigation around the page. This is a one-page template set up.
Here is a fiddle:
https://jsfiddle.net/k8g3qydw/1/
I have the bootstrap.css and .js files properly enqueued, I added data-target=".scrollspy" data-spy="scroll" data-offset="0"
to the body tag and added the class .scrollspy to the parent element of my <ul> like so:
<div class="scrollspy board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="nav-item active">
So, I am pretty confused as to what to do!
Any help is much appreciated!

There are multiple mistakes in your code.
You should use one method to add Bootstrap ScrollSpy to your page, not both:
via Data Attributes or JavaScript. So you should delete your body attributes or javasript line $('body').scrollSpy({...});
ID attribute must be unique to the whole document. You have repeated IDs on page. And.. In wrong place. On working fiddle #spy was assigned to nav wrapper, since it is the one which is being spied.
Navbar links should point to "resolvable id targets" instead of <a name="service">. You should use <a id="service">.
And also make sure that bootstrap.min.js is included after jQuery in your document. Since jQuery is required for Bootstrap, not other way.
Here is a working JSFiddle

Related

AngularJS broken JQuery animations

I'm a new angularjs student, and i was making my menu with ng-repeat.
I made a template too, but when i debug my code, all jquery animations are gone. All menus are inside of my div's with jquery animations.
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<webapi class="nav metismenu sidebar-collapse"></webapi>
</ul>
</div>
</nav>
This is my HTML, the repeat with a template only works with bootstrap CSS style, but all animations are gone.
Can anyone help me, please?
Thanks a lot!
https://plnkr.co/edit/BCmH9wnXXQzd7wntsrZl?p=preview
Your plunk doesn't work because you're mixing http and https. The insecure content (jQuery and the font) is blocked.
I updated your code to reference https, commented out the missing plugins, added in AngularJS 1.5 for the existing menu items so you should be able to compare that with your attempt:
https://plnkr.co/edit/IunNO1j4mvueK6BawPa5?p=preview

a href external link to specific area on page

So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . So basically I had the idea of an anchor tag but linking to another page.
I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. Is there a way to do this with what I have? Or do I have to try a different method entirely?
I am just learning javascript now so that can be an option. I heard you could do something with arrays? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them.
CODE:
HTML
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>CHARTERS</li>
</ul>
</nav>
if your page toursprices.html contains a div with id "abc", and you want to link to that section, you just have to write the href like this:
TOURS,PRICES & STANDARD FLIGHTS
You can use:
<a id="different_section_1">Different Section</a>
in the target page and in the navbar use:
Page
But if your pages are essentially the same with one area that changes. You'd probably be better of using an iframe or switching out blocks with javascript.
As "user3472089" said you can point the a certain element through its id.
I use this at the top of my gallery:
And at the bottom I just put a link or a simulated button that leads to that anchor:
<a href="#top">
<div id="top_anchor">
UP
</div>
</a>

Attached to Detached Navigation Issue

I am currently building my personal portfolio and, not having a lot of practical knowledge in javascript, but having gone through a lot a tutorials, I decided to try to implement something I saw elsewhere: A detachable navigation.
Using this site, http://code.stephenmorley.org/javascript/detachable-navigation/, as a reference I set about creating my detaching navigation; however, something went horribly wrong.
For one, the header will automatically align to the left rather than returning to its default position.
Second, although you can't yet see it implemented, I wanted the social icons to show up in the navigation once they were scrolled past using an animation. That bit of code was so convoluted that I scrapped it.
Any pointers would be greatly appreciated.
Why not just use Bootstrap? It has this built in already: http://twitter.github.com/bootstrap/components.html#navbar
Download bootstrap: http://twitter.github.com/bootstrap/assets/bootstrap.zip
Add the bootsrap Javascript and CSS to your page.
In your HTML, add the following DIV:
You can change the div to fit your needs.
<div class="navbar navbar-fixed-top">
<li class="active">
Home
</li>
<li>Link</li>
<li>Link</li>
</div>

twitter bootstrap popover displaying but looks weird - rails

Hi I'm using twitter bootstrap popover functionality with seyhunak / twitter-bootstrap-rails gem.
I have the following code in my view:
<ul class="nav nav-pills subnav">
<li>
<a class="label-with-popover" data-content="popover content" data-title="popover title">Home Valuations:</a>
</li>
</ul>
The following in my page.js.coffe
jQuery ->
$('.label-with-popover').popover()
The popover appears but looks like so:
Bootstrap popover displays weird with extra vertical line through it: does anyone know how I can fix this?
Let me know if you need more info.
You've got a bunch of collisions between Bootstrap CSS and the CSS you wrote for your project. In the future, you should consider using a namespace for your own general-purpose classes like .arrow, or your CSS will interfere with third-party libraries (like Bootstrap) which use such common class names.
Here's an edit to your fiddle: http://jsfiddle.net/5rT9t/1/
I removed the margin declaration on .content, the padding values on .arrow, and, strictly for demo, added a container div to offset the popover so you could see the whole thing.

Can't nest links in html5?

In xhtml I usually nest lists, close the tag then begin a new before the closing tag. This technique makes a the list structure clear when rendered without any css and it's a convenient structure for applying JS to.
Today I come up against a problem nesting links in a html5 document:
<header>
<nav>
A link
<a href="#">A link
<ul>
<li>nested link</li>
<li>nested link</li>
<li>nested link</li>
</ul>
</a>
</nav>
</header>
Which doesn't work. The nested list is nested in another a tag.
So a technique I used regularly in xhtml doesn't work in html5. My question is what do you do in the situation where you want to create a flyout menu? Is there a technique I can use in html5 to make it as easy as it is in xhtml? I know I can create this flyout menu without nested links but I liked the conciseness of the old method.
Build your menu structure in nested lists, and have the first element in every list be a link. Works just fine and you can make it look right in CSS.
I never want to make a flyout menu, but if a client cannot be convinced otherwise then:
The list of links at the top level would be represented as a list, not a bunch of anchors directly under the nav element
I would structure the DOM so a submenu would be represented as a list that appeared after a link, and not inside it.
I would use JavaScript to handle the opening/closing since :hover is inadequate as it:
doesn't work with keyboard access or
allow time to pass after the point leaves the menu before closing it (it is hard not to wobble across the edges for some people, e.g. those with arthritis)

Categories