I'm using this little jQuery-Plugin in order to enable a smooth scroll to a specific place on the page and also to mark the currently active menu item, so when you scroll down, you see where you are in the menu.
Now I do basically have the exact same code (at least I can't find the difference) as on the GitHub page, but its not working, although on the original template (which I'm using) it's working, so the plugin itself is working fine it seems, but I just can't seem to find the problem.
Basically I have my menu:
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav mr-auto w-100 justify-content-end clearfix">
<li class="nav-item active"><a class="nav-link" href="#sliders"> Home </a></li>
<li class="nav-item"><a class="nav-link" href="#feature"> Features </a></li>
<li class="nav-item"><a class="nav-link" href="#pricing"> Kosten </a></li>
<li class="nav-item"><a class="nav-link" href="#contact"> Kontakt </a></li>
</ul>
</div>
and then I have the different sections/divs, just like so:
<div id="sliders">
<div class="full-width">
<!-- light slider -->
<div id="light-slider" class="carousel slide"><div id="carousel-area">//some content</div></div>
</div>
</div>
Now the really weird thing is, that scrolling through the navbar works fine, so if I click on contact, for example, it scrolls to the right place.
But when I scroll myself, then wrong items are marked, it's always one behind, so if I'm on top, then "Features" is marked, if I've actually scrolled to the features, then the costs are marked, and so on...
You can see this in action here.
Please ignore any faults on not appearing icons, typos or whatever, I'm just testing or just started to develop.
On there, you can perfectly check the behavior and also check the ids of the sections/divs, which seem to perfectly fit through (otherwise, the scrolling through navbar shouldn't work).
Anybody can tell about the problem? I don't get it...
Related
I am currently working on a global search page. A user puts in a search, All results are displayed. But then I want the user to be able to click on certain tabs to display the results as well. It is currently bootstrapped. The all tabs is the only one that is currently working because it is the class is set to active. The all tab also wraps the other tabs. I will try to give an example if I wanted to display Events
I first have the nav tab section set like this...
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
And then the data I want to retrieve is wrapped inside the all div tab like the events_tab here.
<div id="all" class="tab-pane fade in active">
<div class="list-panel table-sort" id="events_tab">
this will display the events related to the search...
</div>
</div>
I am fairly new to using bootstrap. Any advice/tips would be a huge help. Thanks in advance!
Its a little unclear as to whether you want All to have nested tabs or not. However, regarding Bootstraps tab HTML markup pattern, you'll want to wrap your .tab-pane in a .tab-content wrapper. Also, be sure you're including jQuery as well as Bootstraps JS bundle (after jQuery) so the data- attributes can be used.
Updated HTML for non-nested tabs and tab panes
<div class="search-tab">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#all">All</a></li>
<li><a data-toggle="pill" href="#events_tab">Events</a></li>
<li><a data-toggle="pill" href="#appointments_tab">Appointment</a></li>
<li><a data-toggle="pill" href="#phonecalls_tab">Phone Calls</a></li>
<li><a data-toggle="pill" href="#vendors_tab">Vendors</a></li>
</ul>
</div>
<div class='tab-content'>
<div id="all" class="tab-pane fade show active">
all area
</div>
<div id='events_tab' class='tab-pane fade'>
events area
</div>
</div>
Here is a fiddle showing the updated markup without nested tabs:
https://jsfiddle.net/onuj90dz/
If you're wanting to show the search results in addition to these other categories (events, appointments, calls, vendors), you could put the results in a non-tab container. A crude example in this fiddle: https://jsfiddle.net/onuj90dz/1/
Since I coded the portfolio page with Bootstrap 4, I followed the documentation on Scrollspy in its latest alpha version. But it still doesn't work.
What I want to achieve:
Much like the example in the documentation, as I scroll the page, to have the items changes its color as I scroll down, according to section I am in. Also, the navbar should remain fixed-top as it is.
This is a working example in Bootstrap 4 and it seemingly looks like my code, but I can't get around my head why it doesn't work in mine.
My navbar code:
<a class="navbar-brand navfont" href="/">portfolio.</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
</li>
</div>
</ul>
I tried:
Deleting the a stylings in CSS
adding the class "active" and styling it
adding a:focus in CSS
Check the whole thing on CodePen.
Thank you guys!
Looks like you've missed 2 small things, first thing the nav need the id of navbar1, this is from the body data-target="#navbar1" so the nav would become:
<nav class="navbar navbar-toggleable-md fixed-top" style="background-color: #fc7a57;" id="navbar1">
After that this will add a class on a.nav-link called active, on so you will need a class like
.active { color:#fff }
Here a codepen of my working copy of your code
I am doing something similar. You can can look at this fork of your code to see the JS.
All in your HTML was I added class="section" to tell the jQuery when to add those active classes. Let me know if this works for you.
I'm using an Accordion menu instead of an Off-canvas solution below the medium breakpoint, as described in the Foundation Docs here, but I'm struggling to have the menu auto-closed after a link within the menu is clicked. I searched for a solution and have seen this question around but did not find an answer that worked for me. But i came across this example, and upon examination i thought simply substituting .off-canvas with the class used by the vertical menu would do the trick, but that's not the case.
$(document).foundation();
$('.vertical a').on('click', function() {
$('.vertical').foundation('close');
});
My menu markup:
<nav class="vertical menu" id="mobile-menu" role="navigation">
<ul id="menu-main-1" class="vertical menu" data-accordion-menu="8k34n8-accordion-menu" role="tablist" aria-multiselectable="true">
<li class="menu-item" role="menuitem"><a>Link 1</a></li>
<li class="menu-item" role="menuitem"><a>Link 2</a></li>
<li class="menu-item" role="menuitem"><a>Link 3</a></li>
</ul>
</nav>
I'm new to this so please excuse if the answer is obvious. I hope for someone to point me in the right direction here so i learn something.
I am currently helping to solve a toggle problem but there's no error showing in console and I don't know where to start looking.
There are two tabs which can be toggled between each other. Let's say toggle tabs are pay / method. Default page is showing pay and when method tab is clicked, method tab shows perfectly but when clicking pay again the tab (CSS) worked fine that we can see pay tab is active but contents of pay doesn't show. The contents are still method.
Currently using bootstrap and of course the script included jquery already.
The html code is
<ul class="nav nav-tabs" role="tablist">
<li class="active" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="home" href="#home" aria-expanded="true">Pay</a>
<li class="" role="presentation">
<a data-toggle="tab" role="tab" aria-controls="method" href="#method" aria-expanded="false">method</a>
</ul>
I am not sure what else to show since the scripts is form bootstrap, it'll be HUGE.
P.S. as said, even though the contents don't show but by clicking each other, I can still see the class is set to active and aria-expanded is set to true to whichever tab I clicked. (Also, I am wondering if I couldn't find out what is really causing this since there are no errors and so on, am I able to write a new script and include the script below the bootstrap script? That should override and work right?)
Edit:
I have tried adding jquery and so I can select the current element but somehow it only worked a bit.
I added another class into the html
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active payment-tabs">pay</li>
<li role="presentation" class="payment-tabs">method</li>
</ul>
I have script like this
$("ul.nav.nav-tabs").on('click', $(".payment-tabs.active"), function () {
console.log($(".payment-tabs.active"));
});
I tried console.log lots ways to find the current element or at least the a element but when I console.log I realized when I click method, the console.log does give the element of method but when I click pay the first time what I got from console.log is still the method element even though pay already has active class added. If I click the pay again then I will finally get the pay element. I might have an idea of the reason but I just have no idea how I can solve this.
Can someone please give me a hand please?
Thanks in advance.
Make sure you include the scripts needed to run the code. See the running demo here
Basically, you just need to call 3 main sources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The Tab
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="#payment" data-toggle="tab">Payment</a></li>
<li><a data-target="#method" data-toggle="tab">Method</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="payment">This is a payment area</div>
<div class="tab-pane" id="method">This is a method.</div>
</div>
</div>
I've been trying for hours to get this working. Looked at several examples on starkoverflow. But I can't solve it. Some suggested that this should be added:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
But I have no idea where to add it. I tried adding it to bootstrap.js but it didn't work. I'm a novice, trying to put up a first website by learning to piece together one. This is the website that I'm editing: fotroviciliji.si. The bootstrap menu that appears on smaller devices won't close after a link has been clicked. I've looked at examples, even at those here that should be working, but don't. It stil doesn't close after clicking on a link in the menu. A user posted this fiddle of it supposedly working but when I try in Chrome, it just doesn't. The menu does not collapse after something has been selected. What am I doing wrong? This fiddle works but I'm too stupid to apply it to my website.
Please help!
It may not have worked because you included it in bootstrap.js but not in bootstrap.min.js which seems to take over on small screen sizes like mobile phones. Include your code at the bottom of the bootstrap.js and bootstrap.min.js files and the navbar should collapse after clicking/pressing a link to an internal anchor (whether you perform the action on a phone (bootstrap.min.js) or reduced window size on a tablet/desktop (bootstrap.js).
+function ($) {
'use strict';
$(document).on('click', 'navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('toggle');
}
});
}(jQuery);
The above code worked for me. I retrieved lines 2-7 from another forum and I can't remember where. The premise, as far as I understand from searching the net, is that the internal links don't refresh the page (in a one page website, for example) and the navbar will only collapse when it arrives at a new page. The above javascript code was created to fix the issue.
I've honesly been trying for a couple of hours. This is what works for me now, I added:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
<li class="dropdown">
PONUDBA<i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
<li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
<li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
<li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
<li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
</ul>
</li>
<li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
<li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
<li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
<!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->
</ul>
</div><!--/.nav-collapse -->
To each menu item. The menu now colapses back on it's own after something is selected.