Getting Uncaught TypeError: Cannot read property 'top' of undefined(…) jquery.nav.js:183
I'm trying to transform my web app to SPA using jquery.nav.js (see https://github.com/davist11/jQuery-One-Page-Nav). Here is my code:
JS:
$(document).ready(function() {
$('#nav').onePageNav({});
});
HTML:
<div class="collapse navbar-collapse navHeaderCollapse" style="background-color:white">
<ol class="nav navbar-nav navbar-right text-right">
<li>
<a href="#section-home" class="current">
<span>Home</span></a></li>
<li class="hidden-sm hidden-xs current">
<a href="#section-services">
<span >Services</span></a></li>
</ol>
</div>
After clicking on services, it goes to right place but it can't go back to home if I click on Home. Any idea why it's not going back to home?
Does the error show just as you click Services, or when you click Home? If it is when Home, I would suspect that section-home is not defined (like section-services) correctly.
Related
I am new to this area.
I build a navbar with bootstrap 3 and the "load"-function. If I want to use the back button of the browser, it does not work.
What do I have to do to make it work?
Here my simplified code:
index.html:
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</nav>
Thanks Schulz
There is no easy way to do this. You would have to use the history object and change the URL every time you click on something that you want to come back to later.
Basically on click you don't only load the remote content but also update the URL. You would also have to use a hash (#) in URL so the page won't refresh. This implies creating a routing mechanism for your app.
I am altering a Bootstrap-based template. The original site was a single-page with the top nav links simply scrolling to the correct section of the page. I've added some a couple of other pages, and I want the navbar links to return the users to the appropriate section of the home page.
However, when I've edited the links on the other page (not the main page) refer back to the home page, the links aren't working.
I'm sure there is something in the js files that is breaking the default mode and keeping it on the home page.
The problem is that I don't know what to edit to stop this.
The homepage is http://jimbrink.org. The scrolling links work there.
The page where the links don't work is: http://jimbrink.org/articles
Here's the html for the bar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#intro">JimBrink.org</a>
</div>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Intro
</li>
<li>About
</li>
<li>Resources
</li>
<li>Impact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- /#navbar -->
<!-- *** NAVBAR END *** -->
Sorry for the newbie question.
UPDATE
Fixed it. The #navigation tag was just for the js function that interrupted the default action when clicked. I just removed that ID and it worked.
When you are clicking in "About" in menu, it has as href value "http://jimbrink.org/#about" and based in JS it has to move in section with id "about". In your HTML page you don't have any section with ID "#about". You need to add to about section id about. You need to match the sections IDs with the values of menu items href value, because when you are clicking it shows a JS error and cannot scroll to the section.
Uncaught TypeError: Cannot read property 'slice' of undefined
So I've spent the last 48 hours trying everything I found under the sun and cannot get anywhere, so I'm leaving it up to all of your fantastic, smart brains.
I just started using bootstrap not too long ago, I have a NAV bar that has 4 items: Home, Services, Download, and Contact.
The Services item is the only one that will have a dropdown.
The dropdown works perfectly on desktop/laptop browsers, but on my phone (android using chrome browser) it doesn't work so great.
On mobile, because of screen size, Bootstrap turns the whole nav bar into a dropdown menu, so the "services" dropdown is inside a parent dropdown. When I click "services" to get the dropdown menu with all the services, I see for a split second that the dropdown is opening because i see a glimpse of the text, then immediately the parent and services div will close.
<!-- start navigation -->
<script type="text/javascript">
$('body').on('touchstart.dropdown'.'.dropdown-menu', function(e){e.stopPrpagation(); })
</script>
<nav class="navbar navbar-default navbar-fixed-top templatemo-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<img src="images/Logo-banner.jpg" height="auto" width="auto" />
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Download</li>
<!--<li>Contact</li>-->
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- end navigation -->
I've looked up many problems on here, some say to use a javascript function similar to this one:
<script type="text/javascript">
$('.dropdown li, .dropdown a').click(function(e) {
e.stopPropagation();
});
</script>
Others say you need to manually show/hide the dropdown.
So far nothing has worked for me. I'm self taught programmer so as detailed as you can put it would be greatly appreciated. If you need anything else let me know,
Thanks,
I have some href's in my navbar which point to different subsections on a page.
The problem is that if a user clicks the href, the browser points to a wrong position on the page (presumably the location before the ng-repeat has been rendered.)
Here is part of my navbar:
<ul class="nav navbar-nav">
<!--Classes-->
<li class="dropdown">
Classes
<ul class="dropdown-menu" role="menu">
<li>
Class Types
</li>
<li>
Timetables
</li>
<li>
Class Descriptions
</li>
<li>
Instructors
</li>
<li>
Testimonials
</li>
</ul>
</li>
</ul>
And my Classes page:
<h2 class="mai-header-red" id="faq">FAQ</h2>
<h4 class="mai-header-white mai-contact-desc">Some description stuff here
</h4>
<div class="container ng-cloak" ng-controller="faqController">
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="faq in questions">
<div class="panel-heading">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}">
<h4 class="panel-title">
{{$index + 1}}. {{faq.question}}
</h4>
</div>
</div>
<div id="collapse{{$index}}" class="panel-collapse collapse">
<div class="panel-body">
<p>{{faq.answer}}</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="mai-header-red" id="testimonials">Testimonials</h2>
Any help would be appreciated.
I don't think you are having issue with ng-repeat but with angular routing system.
Angular routing break default anchor since it use hash to display your path.
Class Types
There is two times hash in your link and I assume your browser just consider the all string as an anchor (or angular route just catch it and prevent anchor effect).
To reproduce the anchor effect, you need to use $location.hash and $anchorScroll
In your app define :
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
if($location.hash()) $anchorScroll();
});
});
Then you can use links like
Test/Foo
I am using WOW.js to animate a navbar which is fixed to the top with navbar-fixed-top. Unfortunately if i am already paste the top, the navbar wont be animated until i goto the top of the page again.
Is there a way to force that particular part which consists of the menu to be animated no matter what?
HTML
<div class="container">
<div class="navbar navbar-default navbar-fixed-top wow fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
</ul>
</li>
<li>CSS</li>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
</div>
Code is shown here: https://jsfiddle.net/DTcHh/7108/
Example is shown here: http://fiddle.jshell.net/DTcHh/7108/show/light/
Unfortunately JSFiddle automatically goes to top when the page is refreshed, but if you quickly scroll down while updating the problem becomes visible.
I got the same problem and I built a rough solution:
With jQuery I check, if the Page is not scrolled to top and add a Class to the Item:
$(document).ready(function(){
if($(".navbar").offset().top > 0) {
$('.navbar .wow').each(function(){
$(this).addClass('menu-fix');
});
}
});
then I added following CSS:
.navbar .menu-fix {
visibility: visible !important;
}
It's not a clean solution, but it works.