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).
Related
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>
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 ?
I am applying bootstrap tab to my web page. The challenge here is that I have tabs on top and bottom of the tab content.
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-top">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-bottom">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
I want the bottom tabs to change accordingly when I click on the top once and visa-versa.
The tab content is changing but the two tabs - top and bottom need to change in tandom i.e when i click on "Profile" on top - it needs to make "Profile" in bottom active
I have tried searching for some solutions using data-target but with no success. I am guessing that javascript or jquery might be needed.
Any suggestion or tips will be appreciated.
Thanks
Try this:
$('.nav-tabs-top a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-bottom li.active').removeClass('active')
$('.nav-tabs-bottom a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
$('.nav-tabs-bottom a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-top li.active').removeClass('active')
$('.nav-tabs-top a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
Result here
Code here
Here's a version that works in Bootstrap 4 (the class "active" is applied to the <a> element, not the <li> element). This version also automatically creates the bottom tabs for you: https://gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9
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
ok I am a bit rusty with jquery and new to jquery mobile so go easy on me ;). Ok I am creating a mobile website with jquery mobile and it has a lot of pages so rather than keep all the pages in one large multi-page template I have them in seperate page templates. I have a menu button that when clicked a popup appears with a listview menu in it, this works but I have to put the menu in every page template but I would rather just keep the menu in its own html file or even just somewhere in the dom that is outside the jquery mobile page structure so that I dont have to repeat the code in each page template.
How to I load the menu into the popup when its located in its own file? Failing that how do I load a div into that popup that is not inside a jquery mobile page?
My button:
Menu
my listview menu html:
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
Menu
</li>
<li data-theme="c">
<a href="#how-it-works" data-transition="slide">
How it Works
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/buy-now/levels.html" data-transition="slide">
Order Now
</a>
</li>
<li data-theme="c">
<a href="#faq" data-transition="slide">
FAQ
</a>
</li>
<li data-theme="c">
<a href="#help" data-transition="slide">
Help
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/support.html" data-transition="slide">
Support
</a>
</li>
<li data-theme="c">
<a href="http://www.backuptoweb.co.uk/" data-transition="slide">
Main Website
</a>
</li>
</ul>
</div>
In a general sense, here is how you can load html from an external file into a div, beyon that, I am not quite certain what you are trying to do exactly:
$('#myDiv').load('somepath/somefile.html');
I have the exact same problematic, I have written something that displays the popup but partially renders the CSS [edit] a few more tries and I was able to make it render CSS perfectly:
$('[data-role=page]').live('pageshow', function (event, ui) {
$('#'+event.target.id).find('[id=main-menu]').load('menu.html', function(){
$('#'+event.target.id).find('[id=main-menu]').trigger('create');
});
});
Btw your main html page should contain the div declaration:
<div data-role="popup" id="main-menu"></div>
Menu
And your menu.html should contain only what's inside the div:
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<!-- .... listview content ... -->
</ul>