I'm newbie in bootstrap and I don't know how to do the following:
I'm working with Django and in my HTML template I have this:
<div class="tabs tabs-vertical tabs-left">
<ul class="nav nav-tabs">
This works fine with large screens, but it looks ugly when I access into the page with my phone, so I need that my template look like this if the screen is xs:
<div class="tabs">
<ul class="nav nav-tabs nav-justified flex-column flex-md-row">
Can this be done with bootstrap? It's necessary to clone the entire div content and hide depending of screen?
Thank you.
Just use javascript to add the classes if the screen width is less that your desired breakpoint. Since you're using Bootstrap, you can use jQuery to make it easier. Example:
if (window.innerWidth <= 500) {
$('#nav').removeClass('tabs-vertical tabs-left');
$('#navUl').addClass('nav-justified flex-column flex-md-row');
}
console.log(document.getElementById('nav').classList);
console.log(document.getElementById('navUl').classList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs tabs-vertical tabs-left" id='nav'>
<ul class="nav nav-tabs" id='navUl'>
</ul>
</div>
You can use that if statement to do what you want. If you attach it to $(window).resize(); event you can update it to add the styles and remove them responsively.
You could try using mobiledetect.js script, and depending on what device it registers, send it to a different CSS script that would fit it for each type of device (i.e. mobile, pc, etc.)
Script download:
http://hgoebl.github.io/mobile-detect.js/
Related
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I am new to this area.
I build a navbar with bootstrap 3 and the "load"-function. If I want to use the back button of the browser, it does not work.
What do I have to do to make it work?
Here my simplified code:
index.html:
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</nav>
Thanks Schulz
There is no easy way to do this. You would have to use the history object and change the URL every time you click on something that you want to come back to later.
Basically on click you don't only load the remote content but also update the URL. You would also have to use a hash (#) in URL so the page won't refresh. This implies creating a routing mechanism for your app.
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'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
The goal is to switch from tabs to an accordion style collapse when the site is less than 676px wide. We are using Bootstrap.
We'll hide ul.nav-tabs and a.accordtion-toggle respectively with css. The tabs work here, but the a.accordion-toggle aren't working. Any ideas?
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
<li class="active">Panel 1</li>
<li class="active">Panel 2</li>
</ul>
<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
<div class="tab-pane collapse" id="panel1">
Panel 1 Content
</div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
<div class="tab-pane collapse" id="panel2">
Panel 2 Content
</div>
<script>
jQuery(document).ready(function ($) {
if (document.documentElement.clientWidth < 767) {
$('#myTab a').click(function (e) {
e.preventDefault();
}
$(".collapse").collapse();
}
});
</script>
In my case just copying tabs content into hidden accordion worked well.
Here is the source I extracted to small plugin - Bootstrap Tab Collapse
I tried a bit on this jsfiddle but it seems complicated to make both plugins work together.
It might be better opting for one of the plugin, using only the classes and JS of this plugin, and then implement your own triggers to complete the default behavior.
I think the accordion behavior of the collapse plugin needs the .accordion-group > .collapse.in structure to work properly - if you don't use your own JS.
I ended up nesting the tab triggers inside one div with the tabbed content (instead of a list above) and using css to position them like tabs for the full screen view. Not ideal but works as long as the data-toggle and data-target are in place.
Not sure if it helps but you could use window.onresize = function() {} and check for the width of your main container. When it is less than some width you could replace the content using js.