I finally got Bootstrap tabs to work. I was wondering if there's a way to change the behaviour so instead of clicking just hovering the cursor would show the hidden content?
In your $(document).ready or elsewhere ...
put something like this:
$('.nav-tabs > li > a').hover(function() {
$(this).tab('show');
});
You wont have to modify the core bootstrap code.
Additionally you could do this:
$('.nav-tabs > li ').hover(function() {
if ($(this).hasClass('hoverblock'))
return;
else
$(this).find('a').tab('show');
});
$('.nav-tabs > li').find('a').click(function() {
$(this).parent()
.siblings().addClass('hoverblock');
});
Which will prevent hover selection after the first time a user clicks a tab.
It's better to bind a handler on the document object so it will work with dynamically generated tabs too:
$(document).on('mouseenter', '[data-toggle="tab"]', function () {
$(this).tab('show');
});
Also there is a small Bootstrap plugin which automatically activates tabs on hover: https://github.com/tonystar/bootstrap-hover-tabs.
The complete HTML using this plugin is:
body { padding: 2rem; }
.tab-content { margin-top: 1.5rem; }
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<!-- Tab panes -->
<div class="tab-content well">
<div class="tab-pane active" id="tab-1">Content 1</div>
<div class="tab-pane" id="tab-2">Content 2</div>
<div class="tab-pane" id="tab-3">Content 3</div>
<div class="tab-pane" id="tab-4">Content 4</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/v3.1.1/bootstrap-hover-tabs.js"></script>
JavaScript:
In your $(document).ready or elsewhere ...
put something like this:
$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover( function(){
$(this).tab('show');
});
HTML:
<ul class="nav nav-tabs" data-toggle="tab-hover">
....
</ul>
Modify bootstrap.js (or boostrap-tab.js if you aren't using the full bootstrap.js file)
Where you see:
/* TAB DATA-API
* ============ */
$(function () {
$('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
change the 'click.tab.data-api' to 'hover.tab.data-api'
Note: I tested this with Bootstrap v2.0.2
Right from my production code. Orthogonal, unobtrusive, can "unclick" any user interface. Selector can be modified to match many kinds of clickables.
$(document).on('mouseover','.js-mouseover-to-click',function (event) {
$(event.target).trigger('click');
});
i hope it is nice solution
(function ($) {
$(function () {
$(document).off('click.bs.tab.data-api', '[data-hover="tab"]');
$(document).on('mouseenter.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function () {
$(this).tab('show');
});
});
})(jQuery);
Related
I have a nav-bar which has display:none by default. When a user clicks on a hamburger icon at the top-right corner, I want to display it. What I've done is,
<nav id="navigation-bar">
....
</nav>
Javascript:
const menuBtn = document.getElementById("menu-cta"), //the menu icon
navBar = document.getElementById("navigation-bar");
menuBtn.addEventListener('click',()=>{
navBar.classList.add('show-btn');
});
In my css, the below style is not working
.show-btn{
display:block
}
But when I add nav. in front of it, it works
nav.show-btn{
display:block
}
ps: I'm using sass
Add a class to your nav tag
So that your Code should look like this
const menuBtn = document.getElementById("menu-cta"), //the menu icon
navBar = document.getElementById("navigation-bar");
menuBtn.addEventListener('click',()=>{
navBar.classList.add('show-btn');
});
.navbar{
display:none;
}
.show-btn{
display:block
}
<nav id="navigation-bar" class="navbar">
<ul>
<li>Test</li>
</ul>
</nav>
<button id="menu-cta">btn</button>
please don't add css to #navigation-bar{} otherwise it will have the highest specificty.
You can learn more here
CSS Specificity
Another route is to use toggle() so the user can open and close your navigation.
const menuBtn = document.getElementById("menu-cta"), //the menu icon
navBar = document.getElementById("navigation-bar");
menuBtn.addEventListener('click',()=>{
navBar.classList.toggle('hide');
});
.hide {
display: none
}
<button id="menu-cta">...</button>
<nav id="navigation-bar" class="hide">
<ul>
<li>Test</li>
</ul>
</nav>
I am trying to introduce new class for specific div element using nth-child() pseudo-class but it is not working!
Am I doing something wrong?
Note that menu, container, newClass are already defined in CSS section and I'm not showing them here.
Here is what I am trying:
$(function() {
$("button").click(function {
$("div:nth-child(2)").toggleClass("newClass");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle CSS</button>
<div class="container">
<div class="menu">
<lu>
<li>option 1</li>
<li>option2</li>
<li>option 3</li>
</lu>
</div>
</div>
There are lots of mistakes in your code. Which div are you want to add a class newClass? I think your code should be like this
$(function() {
$("button").on('click', function() {
$(".menu").toggleClass("newClass");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Toggle CSS</button>
<div class="container">
<div class="menu">
<ul>
<li>option 1</li>
<li>option2</li>
<li>option 3</li>
</ul>
</div>
</div>
My mistake
I should not use
<script>
$("div:nth-child(2)").toggle Class("newClass");
</script>
this to introduce new class for div element, with the class menu , as it is not a second child of div . What given below is though working fine for me:
Correction
<script>
$("div.menu").toggleClass("newClass");
</script>
That is: to specify div element(whose class is going to be toggled) by tagging its class menu , to call jQuery for div with the class menu .
Also by mistake parentheses () were missing.
I need assistance with changing css of div on hover event. My code:
<div class = "container-main">
<div class = "container-inner">
<ul class = "list">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
<div class = "container1">
<p>Container text</p>
</div>
<div class = "container2">
<p>Container text</p>
</div>
I need to be able to change classes container1 and container2 when hovering on ul or li in the main container. I only know how to change it with sibling containers but that's not what I need.
.container-main:hover + .container1 {background:red;}
Would appreciate any help in achieving this. Thanks.
Unfortunately, based on your markup heirarchy, what you're looking for isn't possible with just CSS. You can do this pretty simply with javascript though. Here's an example that will add a background-color to .container1 when you hover .container-main ul:
const list = document.querySelector('.container-main ul')
const container1 = document.querySelector('.container1')
list.addEventListener('mouseenter', () => container1.classList.add('red'))
list.addEventListener('mouseleave', () => container1.classList.remove('red'))
.red {
background-color: red;
}
<div class = "container-main">
<div class = "container-inner">
<ul class = "list">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
</div>
<div class = "container1">
<p>Container text</p>
</div>
<div class = "container2">
<p>Container text</p>
</div>
is this what you want?
jQuery solution:
$( ".container-main li" ).hover(
function() {
//do something when hovering
}, function() {
//do something after hovering
$(".container1").css("background", "red");
}
);
Thanks for your answers everyone. I was just unsure whether it was possible or not, I'll try to rearrange my div heirarchy. I know it can be done with jQuery but I have a task where I only need to use CSS without any programming languages.
Once again, thanks a lot. I got a better idea of what needs to be changed.
I don't think css alone can do this.
Do you have access to jquery?
https://jsfiddle.net/ifinto/o2gxgz9r/
$(document).ready(function() {
$(".container-main li").each(function(index) {
$(this).hover(
function() {
div = ".container" + (index + 1);
console.log("in_" + div);
$(div).css("background-color", "red")
},
function() {
div = ".container" + (index + 1);
console.log("out_" + div);
$(div).css("background-color", "white");
});
})
I am creating a shop using prestashop.
My problem is, in product description I have two bootstrap tabs
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#op">One</a></li>
<li><a data-toggle="tab" href="#conf">Spec</a></li>
</ul>
The first one is general description and the other one is more technical.
But not every product has that second description, so the content is empty.
My question is, how can i make only first tab visible when there is need to?
EDIT:
Guys I don't know if I wrote that straight.
I need tab to be hidden when the div content it 'points' on is empty.
Thanks
Add a class inside your second tab,and run this Jquery
$(".someclass").each(function(){
var $txt=$(this).text();
if($txt==""){
$(this).closest('li').hide();
}
})
Without text DEMO
With text DEMO
For Multiple empty tab contents
This should to it:
$('.nav-tabs li').each(function () {
$tab = $(this)
if ($tab.text() === '') {
$tab.hide()
}
}
Maybe it's too late! But i write my answer here to help somebody.
I had a nav-tab like this with bootstrap that i wanted to hide the tabs with no content:
<ul class="nav nav-tabs" role="tablist" id="descriptionTab">
<li class="active">
introduction
</li>
<li>
access
</li>
<li>
times
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="position:relative;">
<div class="tab-pane fade active in EmptyFind" id="introduction">
<h2>some text here</h2>
</div>
<div class="tab-pane fade EmptyFind" id="access">
<h2>some text here</h2>
</div>
<div class="tab-pane fade EmptyFind" id="times">
<h2> <!-- no content or some whitespace --> </h2>
</div>
</div>
So we can add these lines of jquery code to hide "#times" tab that has no content in it:
<script>
$(document).ready(function() {
$('.EmptyFind').each(function() {
var $txt=$(this).text().trim().length;
var $dataTarget=$(this).attr('id');
if ($txt < 1) {
$('#descriptionTab a[href="#' + $dataTarget + '"]').closest('li').hide();
}
});
});
</script>
I hope it will be helpfull :)
I have 5 rows of same set of ul li as following. Whenever I click on any of li (li will be selected) it will open/show a popover or a div which fade in and pause for few time and thereafter fade out. I am using the same class for ul and its parent div.
<div class="choices">
<ul class="question-choices">
<li><a rel="0" href="#tab1" class="active">a</a></li>
<li><a rel="1" href="#tab2">b</a></li>
<li><a rel="2" href="#tab3">c</a></li>
<li><a rel="3" href="#tab4">d</a></li>
<li><a rel="4" href="#tab5">e</a></li>
</ul>
</div>
<div id="tab1” class=”content”>aaaa</div>
<div id="tab2” class=”content”>bbbb</div>
<div id="tab3” class=”content”>cccc</div>
<div id="tab4” class=”content”><dddd/div>
<div id="tab5” class=”content”>eeee</div>
I found this method and try to use it:
$(". content ").hide();
$("ul.question-choices li").click(function() {
$("ul. question-choices li").removeClass("active");
$(this).addClass("active");
$(". content ").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
How to I add fade in, fade out and pause effect in it. How to use “rel” attribute for it. Is it possible that I can use only one div for all popover and change it content via html/text.
Kindly let me know how to achieve it or any simple example (as I am still learning) where I can find it.