I have this code which I want to make it collapse when on mobile but it isn't working. I tried with visible-xs and hidden-xs as shown in the code but it's obviously not working.
What could I possible do to make this happen?
I want to show the <ul>...</ul> in Desktop only and make it collapsible in Mobile view and show only the button which would open after being clicked.
<div>
<button class="visible-xs" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
<ul class="hidden-xs in nav nav-pills nav-stacked uib-collapse="isCollapsed">
<li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
<li><a ng-click="gotoElement('applied')">Applied</a></li>
<li><a ng-click="gotoElement('connections')">Connections</a></li>
</ul>
</div>
You need to use the ng-init to init the value of the isCollapsed property, if you want to have this logic on the template, but is better if you init all your data in the angular controller. Besides, to show the ul on desktop and hide it in mobile you need to have mobile detection. For example on express you can use: https://www.npmjs.com/package/express-device and use the variable isMobile to init the collapse property
<div>
isCollapsed : {{isCollapsed}}
<button class="visible-xs" ng-init="isCollapsed = isMobile" ng-click="isCollapsed = !isCollapsed">Collapsible</button>
<ul class="nav nav-pills nav-stacked" uib-collapse="isCollapsed">
<li class="active"><a ng-click="gotoElement('hired')">Hired</a></li>
<li><a ng-click="gotoElement('applied')">Applied</a></li>
<li><a ng-click="gotoElement('connections')">Connections</a></li>
</ul>
</div>
Related
I need help setting a link as active upon clicking on my html top nav bar.
The nav bar looks like this
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add New Client</li></i></a></li>
</ul>
</li>
</ul>
</div>
So when i click Home it must highlight Home when i click on Clients it must highlight Clients. I really don't know how to achieve this so any help will be very much appreciated.
// when any a link click
$('a').click(function(){
// if already any element in active status remove it
$('a').removeClass('active');
// add active status to this one only
$(this).addClass('active');
})
.active{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home <span class="sr-only">(current)</span>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Add New Client</li></i></a></li>
</ul>
</li>
</ul>
</div>
Setting via JS is pretty pointless, since as soon as it redirects and loads the new page, that setting will be forgotten. What you want to do is have PHP check your current route, and assign a class based on that. This can be done via the request()->is() check:
If navigating to myapp.com/home, use the following:
<li class="{{ request()->is('home') ? 'active': '' }}">
<a href="{{ route('home') }}">
Home
#if(request()->is('home'))
<span class="sr-only">(current)</span>
#endif
</a>
<li>
This demonstrates how to use via a ternary operator (best used for in-line statements) and the #if()#endif blade syntax. Just ensure your is() check is matching your route, so ->is("") for Route::get("/", ...);, etc. etc. and PHP will automatically assign the active class and (current) SR element.
Note; there is likely a way to handle this for named routes (like route('home')), but I haven't used named routes much, so I'm not positive on that. Also, might be best to assign the result of request()->is('home') to a variable to avoid repeating code.
is it possible to add an Tab to an existing tab menu?
I have a Tab like
<ul class="nav nav-tabs my-tabs" role="tablist"><li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu"></ul></li>
<li class="active">Write Mail</li>
<li>Hint</li>
<li>Custom</li>
<li>Mails</li>
<li>Customer Logs</li>
<li>Options</li>
<li>Smartlogs</li>
Is it possible to add a tab with javascript or something else? The Tab is generate by the software herselfe, so I can't add it directly - only with a hook which can insert some code.
Thanks!
Try this like,
$(function(){
$('.my-tabs').append(
'<li>New Tab</li>'
);
});
This is a page I'm working on currently: http://s.codepen.io/moletek/debug/QNeaXq And basically I think the sub-menu breaks when you open and close the parent item. The background will disappear, like it's closing both elements.
I've done some custom stuff, so you can view the src, but here is my standard html:
<div class="collapse navbar-collapse" id="stcs-collapse">
<ul class="nav navbar-nav">
<li class="first active"><a href="welcome" title="welcome" >Welcome</a></li>
<li class="dropdown">About
<ul class="dropdown-menu"><li class="first"><a href="about/our-vision" title="Our Vision" >Our Vision</a></li>
<li><a href="about/our-team" title="Our Team" >Our Team</a></li>
<li><a href="about/church-plants" title="" >Plants</a></li>
<li class="last">Contact Us</li>
</ul>
</li>
</ul>
</div> <!-- A summary of the menu structure with submenu
You can reproduce this in the codepen mentioned above. Or view the GIF below So basically whenever you tap the dropdown parent, it will appear fine. But if you tap the parent again, the entire background will disappear when the child items do.
I'm quite baffled! I appreciate any help.
Thanks!
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