my first question here.
I have a program runing on Angular 11 with Bootstrap 4.1.3. I'm trying to make a button that returns to the previous nav-tab the user was seeing, or just a button that directly goes to the previous/next tab would be ok too.
The code i'm using creates a button that does nothing on click. At this point i've tried everything i could find around the internet but nothing seem to work properly.
And also, i a beginner using Angular/Bootstrap.
So, what i'm doind wrong? Someone can help me?
<ul class="nav nav-tabs pl-1">
<li class="nav-item active">TAB1</li>
<li>TAB2</li>
<li>TAB3</li>
</ul>
<a class="btn btn-primary btnPrevious">Back</a>
$('.btnPrevious').click(function() {
const prevTabLinkEl = $('.nav-tabs .active').closest('li').prev('li').find('a')[0];
const prevTab = new bootstrap.Tab(prevTabLinkEl);
prevTab.show();
});
Related
I need help with one thing. I created a page where clicking on one button will scroll the page to the section with the side panel of buttons / bookmarks. I did it with a JS script, I would like the next action to be performed after clicking on the same button. I've already tried to do it using click() method, I've also tried to add "active" class to one of the tabs of the panel - unfortunately everything without positive result. Finally, maybe one of you will be able to help me.
Ultimately, I want the first link to switch the active section tab below. For better illustration I'm sending a picture of the pages.
JS file (The commented lines are the code I tried to use before):
function scrollWin() {
window.scrollBy({ top: 500, left: 0, behavior: 'smooth' });
//const prescription = document.querySelector("#tab-title-prescription_tab");
//prescription.classList.add("active");
//document.getElementById("tab-title-prescription_tab").click();
}
HTML code:
<ul class="tabs wc-tabs" role="tablist">
<li class="description_tab" id="tab-title-description" role="tab" aria-controls="tab-description"> Opis </li>
<li class="additional_information_tab" id="tab-title-additional_information" role="tab" aria-controls="tab-additional_information"> Dodatkowe informacje </li>
<li class="reviews_tab" id="tab-title-reviews" role="tab" aria-controls="tab-reviews"> Opinie (0) </li>
<li class="prescription_tab_tab active" id="tab-title-prescription_tab" role="tab" aria-controls="tab-prescription_tab"> Recepta </li>
<li class="survey_tab_tab" id="tab-title-survey_tab" role="tab" aria-controls="tab-survey_tab"> Badania </li>
</ul>
Image:
https://imgur.com/fqu4GyG
First button:
<a onclick="scrollWin()" href="#tab-prescription_tab" class="button additional-button">Wybór szkieł</a>'
Anchor doesn't work ? Maybe you will make your button as link and set href="#tab-prescription_tab"
I am having difficulty trying to keep my drop-down menu open when i click on a sub menu. You would think that Bootstrap would do this right out the box. But i cant find any documentation on it.
here is what i found as a solution:
https://www.bootply.com/rgvY6oPO1J
In my HTML i have this:
<div class="btn-group" id="myDropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Numbers
<ul class="nav collapse" id="mynumbers" role="menu" aria-labelledby="btn-mynumbers">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
And here is whats in my JavaScript:
$("#btn-mynumbers").on("click", function (e) {
e.stopPropagation();
$("#mynumbers").slideToggle("fast");
});
for the most part it works. But I'm going to have a lot of menu items and i don't want to make a on click caller for every sub-menu i create.
So i tried putting
onclick="Toggle(this);"
in
id="btn-mynumbers"
and creating the function:
function Toggle(element) {
event.stopPropagation();
var parentid = element.id;
var childid = $(parentid).children("ul").attr("id");
$(childid).slideToggle("fast");
}
so i can give every sub-menu click the ability to stay open. but the event stopped ALL propagation, even the slideToggle. I don't know how to keep the drop down open when a sub-menu slides down.
It seems like there was an error with the function you made since event would probably be undefined. I changed it to something like below. But you can see it in action with the codepen link below.
$(".submenu").on("click", function (event) {
event.stopPropagation();
var target = event.currentTarget;
$(target).siblings('ul').slideToggle("fast");
});
The best approach if you don't want to put an id for every possible menu item that has a sub-menu, then work with classes. That way you don't need to recode.
I made you a codepen that shows how to use classes instead of ids as identifiers. I added a sample of another menu item with a sub-menu for you to play around with.
Hope that helps!
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 have a JSP page which uses bootstraps data-toggle="tab" functionality. Upon page load I make one tab active.
<ul class="nav st-nav-tabs">
<li class="active">First Tab</li>
<li>Second Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"></div>
<div class="tab-pane active" id="tab2"></div>
</div>
I have a Highcharts chart on the page, whenever a user clicks on one of the columns I call a JS function which makes tab2 the active tab on the page. Inside this function I've tried a few different commands but none seem to work. I'm quite new to jQuery so I'm hoping someone might be able to point out where I'm going wrong with my syntax.
function handleClick(){
//I've tried the following, none seem to work
$('#tab2').toggleClass('active');
$('#tab2').show();
$('#tab2').tab('show');
}
First you need to give your tabs an id, i will call it myTabs:
<ul class="nav st-nav-tabs" id="myTabs">
Then you can call and show your tabs by name to show them:
$('#myTabs a[href="#name"]').tab('show');
You can read about tabs in bootstrap's documentation.
I've been trying out solutions to similar cases but none of them work so far.
Here's the problem, I have 2 html files total. On my navigation bar, I have 4 options. 3 of them refer to id's on the same page(index) and the 4th refers to the separate page. Now coming from the separate page back to the index, the active menu item isn't the right "active" one. Like if I click on 'about' on the support page, the active menu item is 'home'. or if I click on 'contact', the active menu item becomes 'about'. The content that appears is correct. But the active menu item isn't.
Here's from the index.html file:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="current">Home</li>
<li>About</li>
<li class="support" >Support</li>
<li >Contact</li>
</ul>
</div>
and here's from support.html:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="current">Support</li>
<li >Contact</li>
</ul>
</div>
This is one of the solutions that I tried with no results:
https://stackoverflow.com/a/11539359
JS is not my strong suit, thank you so much for your help!
There were lot of issues with the way you are loading scripts for example
$(document).ready(function() {
$('#ind').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
you are calling this before the jquery is loaded so it gives $ is undefined error, so the solution is to move all the script at the end, and there is one inline script also for menu handler, move that to document ready functions
I have included the fix in the following file HTML Zip files, you will find all JS moved to end. Its working fine for me now
One more thing make your contact height same as other container or remove extra margin/padding from Physicians section