I am using materializecss to create tabs. So I am at point where I want to detect which tab is opened and then configure the UI using Javascript or Jquery.
E.g
if (tab.index == 0 || 'brands'){
//Configure some UI
}else if(tab.index == 1 || 'products'){
//Configure some UI
}
The HTML part looks like this:
<ul class="tabs blue-grey darken-2">
<li class="tab col s6"><a class="active" href="#brands" style="color: white;">Brands</a></li>
<li class="tab col s6"><a style="color: white;" href="#products">Products</a></li>
</ul>
I already did manually change tab on button click like this:
$('ul.tabs').tabs('select_tab', 'products');
but do not know how to achieve the question part. I hope to get some help :) I went through many similar questions but didn't find solution. If the question is somehow dublicate please comment.
There is an onShow callback. See http://materializecss.com/tabs.html
This code is untested and there is no simple example of how to use onShow at the vendor website but I hope it will show you the way. 'some_param' is where you need to know the attributes of the tab object - maybe it has an index. If not then maybe you could add differentiating classes to the first and other tabs and use jquery .hasClass(classname') to decide what happens next.
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id').onShow(function(selectedTab){
if (selectedTab.some_param === some_val){
...do something
}
});
});
Related
I have a html list with some text items. I need to bring the list item into focus when user type the initial letters of it's text similar to select-option when user type initial letter of it's options; matching option is brought into focus. I need to have same behavior for list. I am rendering my list using ng-repeat directive of angular:
<ul class="list-group m-3 col">
<li ng-repeat="song in ctrl.songs | orderBy" class="list-group-item list-group-item-action" tabindex="{{$index}}">
<span>{{song}}</span>
</li>
</ul>
I googled for a plugin/library but unfortunately couldn't find any. I can write a directive for this but time does not permit it. So can anyone please tell me if there's any library/plugin available? Here's the plunkr.
After spending quality time with jQuery and tabindex of bootstrap I finally made it working.
function bringToFocus(text) {
var item = element.children().filter(function(child) {
return angular.element(this).text().trim().toLowerCase().startsWith(text.toLowerCase());
}).first();
item.focus();
}
Here's the working plunkr. Hope it might be helpful for someone.
I have an issue when creating dynamic id for bootstrap collapse.
First when I click on any topic which is in ng-repeat it should collapse and give me the question list.
The problem here is when I click on the first topic it collapse but when i click on second topic the first topic collapse is getting the second topic question list data
Html:
<div class="topic-div">
<p class="topic-heading">Topics</p>
</div>
<div class="arrow-down"></div>
<ul>
<li ng-repeat="topics in oJdDetails.topics" class="topic-li" ng-click="fngetQList(topics,$index)">
<p class="topics-p"> {{topics}}</p>
<ul uib-collapse="isCollapsed">
<li ng-repeat="value in aQuestionList">{{value.quesList.quesListName}}</li>
</ul>
</li>
</ul>
Js:
$scope.fngetQList = function(topics, index) {
debugger;
$scope.isCollapsed = true;
$scope.displayQList = true;
$scope.sTopics = topics;
$scope.index = index;
getCandidateInterviewListService.fnGetQList(topics).then(function(response) {
$scope.aQuestionList = response;
console.log($scope.aQuestionList);
});
};
I don't understand how to make it work. Any help would be highly appreciated.
It seems you are using plain bootstrap library which will not work with angularjs.
Try with https://angular-ui.github.io/bootstrap/#/collapse
Try avoid using jQuery with Angular especially for Bootstrap. Angular's UI team has written the Angular wrapper for Bootstrap.
http://angular-ui.github.io/bootstrap/
Use this library instead. You don't need the jQuery for this. http://angular-ui.github.io/bootstrap/#/collapse
This uses the Bootstrap's CSS file and the Javascript part is provided by the Angular so you don't need to use jQuery for it.
Angular in itself is a big enough Javascript library so don't bloat your application by installing jQuery as well.
I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter
I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.
In my fiddle I have a simple bootstrap nav tab group in which the tabs do 2 things:
Display the corresponding tab pane
Change the value of an input to that defined by the tab anchor's data-payment_method attribute.
Here is the code:
<ul class="payment_methods methods nav nav-pills">
<li class="payment_method_bacs active"> <a href="#payment_method_bacs_desc" data-toggle="pill" data-payment_method='bacs' class='payment_method_choose'>Direct Bank Transfer </a>
</li>
<li class="payment_method_cheque "> <a href="#payment_method_cheque_desc" data-toggle="pill" data-payment_method='cheque' class='payment_method_choose'>Cheque Payment </a>
</li>
<li class="payment_method_paypal "> <a href="#payment_method_paypal_desc" data-toggle="pill" data-payment_method='paypal' class='payment_method_choose'>PayPal <i class = 'fa fa-credit-card'></i></a>
</li>
</ul>
And the panes and the input:
<input type="text" name="payment_method" id="payment_method" value="bacs">
<div class="panel panel-default top-buffer">
<div class="tab-content panel-body">
<div class="tab-pane fade active in" id="payment_method_bacs_desc">
<p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won't be shipped until the funds have cleared in our account.</p>
</div>
<div class="tab-pane fade " id="payment_method_cheque_desc">
<p>Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.</p>
</div>
<div class="tab-pane fade " id="payment_method_paypal_desc">
<p>Pay via PayPal; you can pay with your credit card if you don't have a PayPal account</p>
</div>
</div>
</div>
When I copy/paste my code into jsFiddle it works fine but I'm having trouble in my WordPress site (running WooCommerce), loading the standard scripts associated with both (too much to post here!).
The nav tabs work fine and the tab panes switch without issue. But my own jQuery which is used to update the input doesn't work. I added some console.logs to see how far it gets:
jQuery(document).ready(function ($) {
console.log('actived the payment chooser');
var payment_method_input = $('input#payment_method');
$(".payment_method_choose").click(function () {
var payment_method = $(this).data('payment_method');
console.log('you selected ' + payment_method);
payment_method_input.val(payment_method);
});
});
I get the 'actived the payment chooser' in the console but the 'you selected...' doesn't appear on clicks suggesting the click event isn't firing properly. Something must be conflicting with the event but I don't think it's the bootstrap nav tabs as it all works fine in the fiddle.
No other error messages are in the console. Any idea how I can track down this conflict?
Edit:
After extensive testing I'm completely stumped.
The code works fine standalone in a fiddle
The element selector works fine as demonstrated in this code in my page just before my click event code:
$('.payment_method_choose').each(function(index){
mydata = $(this).data('payment_method');
console.log('This is element ' + index + ' containing data: ' + mydata);
});
Which outputs the relevant info to the console, confirming that the jQuery events do fire in this location and the selector works.
I've tried using .on('click', function() {... to no avail.
Woocommerce loads quite a few JS scripts but I can't see a way to discover what or if is interfering with my click event. The <a> elements were added my me in the template so shouldn't be referenced by any existing scripts. Is there a way to debug this?
Any help greatly appreciated; it is obviously quite difficult to post a web page this extensive for inspection as it's on my local dev server but any suggestions to remove ambiguity please let me know.
You could try the Chrome debugger. Look in the chrome debugger elements panal at the object that you have put the click event on and see if there is an event defined on that object. (I am not sure where jQuery actually puts the evens since I have stopped using jQuery for html5.)
If there are any events on the object just put some break points in the debugger source panel.
I've wrote a simple accordion faqs list using jQuery, but looking for some feedback on ways to improve it better.
My mark-up looks something like this:
<ul class="faqs">
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
</ul>
My JS looks something like this:
var question = $('.faqs h4');
question.click(function() {
$(this).next('div').slideToggle('fast');
});
All .answer divs are set to display:none on page load, but if js is disabled, all .answer div would be shown by default.
Cheers
I'd suggest adding $(".answer").slideUp() so that only one accordion item can be open at a time:
var question = $('.faqs h4');
question.click(function() {
$(".answer").slideUp();
$(this).next('div').slideToggle('fast');
});
(Also, maybe add a little style, eg the :hover pseudo-class. Maybe add some other animations.)
Fiddle
I wonder, why to try yourself with something from scratch when there's so many good accordions out there ...
Did you try the Bootstrap Collapse?
http://twitter.github.com/bootstrap/javascript.html#collapse
Simple markup and you can use as part of the hole Bootstrap Framework, or simply use it independently from anything else (you need jQuery though)