I have a page HTML and a script angularJS.
I have this menu :
<ul class="nav nav-tabs nav-stacked affix-top" data-spy="affix">
<li class="active">Section1</li>
<li>Section2</li>
<li>Section3</li>
<li>Section4</li>
<li>Section5</li>
<li>Section6</li>
</ul>
and the following sections:
<section id="/section1">
</section>
... etc. AngularJS add the "/" after the hash to the url but do the link if I put "#/section1" into the href in the menu it doesn't work.
But I have a problem I want to use the scrollSpy of Bootstrap like in this link : http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=scrollspy
But it doesn't work and I think it's because the id of the section isn't the same than the href of the menu and angularJS add automatically the "/"
Have you a solution ?
Related
I have primary navigation that are just "in-page" links on the home page. I also have a section of three pages for pricing that live as sub-pages with the urls: /pricing/basic-pricing.html, /pricing/pro-pricing.html and /pricing/pricing-premium.html.
On those three pages, I have a side-nav to get back-and-forth between those pages. So two navigation elements (primary-nav and side nav). When on a sub-page i.e. /pricing/basic-pricing.html, I would like the primary-nav link called "pricing" to have an active class.
I have it working with the code below, but was wondering if there is a better way in case I add more sub-pages in the future. I don't want to have to add more jQuery just to accommodate a new page. Right now it's only looking to see if the url contains the string 'pricing' in the href and then it adds the class to the 'pricing' link in the primary nav.
<nav class="primary-nav">
<ul class="menu collapse vertical large-horizontal">
<li>features</li>
<li>options</li>
<li>pricing</li>
<li>testimonials</li>
<li>contact</li>
</ul>
</nav>
<ul class="vertical menu side-nav">
<li>Basic Pricing</li>
<li>Pro Pricing</li>
<li>Premium Pricing</li>
</ul>
$(document).ready(function () {
$('.side-nav.menu a.is-active[href*="pricing"]').each(function () {
$('.primary-nav .menu a[href$=pricing]').addClass('is-active');
});
});
you can use location global object to detect which url or uri you're in,
here a link t it documentation : link
example:
console.log(location.pathname)
// /questions/56091860/adding-class-to-primary-nav-link-when-on-a-sub-page-based-on-the-url
in you case
// /pricing/basic-pricing.html
I am not quite sure if I can achieve what I have in mind with the MaterializeCSS Framework. But if it is possible I would like to see if someone can help me with it.
For information; I am working in laravel 5.6. Maybe that helps to find a solution a little quicker.
So; I have a menu with dropdowns. But in stead of dropdowns I just want to have tabs. As seen in the Extended Navbar with Tabs.
There are 2 things that would need changing.
The Tabs need to change upon a clicking on a menu item. I am not sure how and if this will and can work.
The Tabs need to redirect to a page upon click. And not load the internal (on page) content.
Is there any way I can achieve this?
Depending on how you would like to have your Blade templates, you have 2 options you could go for.
Option 1 would be to use a yield-section combo. This would allow you to define the tabs on the page where they need to be shown in the template itself:
<!-- /resources/path/to/view.blade.php -->
#section('nav-tabs')
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab disabled">Disabled Tab</li>
<li class="tab">Test 4</li>
</ul>
</div>
#endsection
<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
<div class="nav-wrapper">
<!-- your nav bar -->
</div>
#yield('nav-tabs')
</nav>
Option 2 would be to use a new parameter coming from the controller. This then can be parsed in the template and will show tabs when you pass the data from the controller:
<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
<div class="nav-wrapper">
<!-- your nav bar -->
</div>
#isset($tabs)
<div class="nav-content">
<ul class="tabs tabs-transparent">
#foreach($tabs as $tab)
<li class="tab {{$tab['classes']}}">{{$tab['label']}}</li>
#endforeach
</ul>
</div>
#endisset
</nav>
// PageController#action
...
return view("blade/template", [
'tabs' => [
[
'title' => 'Tab title',
'href' => '/go/to/this/page',
'classes' => '', // Add additional classes to tabs if you need them
],
...
]
])
As for the external page point, since the tabs are filled with <a href=''></a> elements, can you not use those to link to the other pages?
I have such HTML:
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active">TAB1</li>
<li class="">TAB2</li>
<li class="">TAB3</li>
</ul>
</div>
This is navigation for tabs. But it behaves something different: when I click on the link (for example: TAB1) - required tab is displayed. But there is not the anchor in url(#tab1 or #tab2 or #tab3). But I need it...
I am some new in fronted and I use ready template. So there are such frameworks:
jquery.js, bootstrap.min.js, js/jquery.isotope.min.js
What should I do??
Maybe it's related to this question and this (if you are using bootstrap for tabs managing).
Below is how I created a menu links of my website using Bootstrap 3.1.0. I want the selected nag-pill to stay active/select while the link is clicked. Currently, the defined hover-colour is gone after the link is clicked. Is there a way to let the pill stay active after clicking?
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li>one</li>
<li><a id="menu_text">two</a></li>
<li><a id="menu_text">three</a></li>
</ul>
===Update===
I'm just new to JS and web development. The code that I'm trying to follow Twitter Bootstrap tutorial is here: http://jsfiddle.net/Dy9e6/
I just want the clicked nag-pill to show as 'selected' or 'highlighted' after user click on one of the pill/tab.
First you need to add default class="active" to the first element.
Second you need to add data-toggle="tab" to the <a /> element. See the docs
Your code becomes:
<ul id="menu_area" class="nav nav-pills nav-justified custom">
<li class="active">one</li>
<li>two</li>
<li>three</li>
</ul>
Demo
I am using the Bootstrap scrollspy plugin (v2.0.0) which works without a problem when the page loads first.
The navigation bar as well as the content sections get updated via ajax calls (add or remove menu items). After this scrollspy doesn't highlight the newly added items anymore.
How do I tell scrollspy to refresh? Or maybe attach scrollspy manually to the following code?
<body data-spy="scroll" data-target=".subnav" data-offset="0">
<div id="listing">
<div class="subnav">
<ul class="nav nav-pills nav-stacked">
<li>Home & Garden</li>
<li>Computers & Networking</li>
</ul>
</div>
<div>
<section id="cat2">...</section>
<section id="cat5">...</section>
</div>
</div>
</body>
scrollspy('refresh') will simply do what the name says!
In my case I added the follwing code after the ajax call:
$('[data-spy="scroll"]').each(function () {
$(this).scrollspy('refresh');
});