I want buttons in a slider to get underlined when a slide is visible.
I think I need to check if a data attribute is true, and then add class.
When inspecting my webpage, I find this in properties > dataset: DOMStringMap > isactiveslide: "true"
I need to check if a slide has isactiveslide: "true" (or even data-isactiveslide: "true") and then add class.
I think I am close and have tried these two codes:
jQuery(function () {
if (jQuery('menu1').attr('isactiveslide') === true) {
jQuery(this).find("#test1").addClass("underline");
}
})
and
jQuery('menu1').each(function(){
if(jQuery(this).attr('isactiveslide')==true())
jQuery('#test1').addClass('underline');
})
EDIT (added after some great answers and questions)
And here is the section, where the data attribute "isactiveslide" occurs, copied from the page:
<rs-slide data-key="rs-1898" data-title="WORKS" data-in="o:0;" data-out="a:false;" class="menus works1" id="works1" data-originalindex="2" data-origindex="1" data-description="" data-sba="" data-scroll-based="false" style="overflow: hidden; height: 100%; width: 100%; z-index: 20; opacity: 1; visibility: inherit;" data-owidth="300" data-oheight="200" data-rspausetimeronce="0" data-isactiveslide="true"><
So, the next slide which is not yet shown has data-isactiveslide="false". I reckon, identifying "true" is how I can add class.
EDIT May 4th - I think I am close now, but it still does not work.
jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline');
any help is very appreciated!
Can be easily done by css:
You need to find the class applied on the active slide and button
rs-slide.menus[data-isactiveslide="true"] .button-class-name-here{
text-decoration:underline!important;
}
or
Find which slider you are using and on the slide change event of that slider apply the class on the button for styling.
Try this code:
var $ = document.querySelectorAll.bind(document) //No need for jquery - simply import the function
$(".menu1[data-is-active-slide]").forEach((el, index) => {
$("#test1")[index].classList.add('underline');
$("#test1")[index].innerText = "Selected!";
console.log(1);
})
<div class="menu1" data-is-active-slide='true'>1</div>
<div id="test1"></div>
<div class="menu1" data-is-active-slide='false'>2</div>
<div id="test1"></div>
<div class="menu1">3</div>
<div class="menu2" data-is-active-slide='false'>4</div>
<div class="menu2">5</div>
<div class="menu1" data-is-active-slide>6</div>
<div id="test1"></div>
<div class="menu2">7</div>
<div class="menu1 menu2" data-is-active-slide="true">8</div>
<div id="test1"></div>
<div class="menu1 menu2">9</div>
The beginning declaration of $ is simply defining it since I did not import jQuery.
The next part is where the 'fun' begins. I used $(".menu1[data-is-active-slide]") to select all elements with class menu1 and with the property that data-is-active-slide is present. Then, I simply defined an action inside the function, for the sake of demonstrating that it works.
I have this HTML:
<li class="chatbox-item">
<div class="item">
<div class="item-header">
X
</div>
</div>
</li>
When a.close-chatbox is clicked, the .item element has to be hidden. However, I just can't seem to go up two levels to hide the .item element.
I have this JS:
$(".close-chatbox").click(function() {
// not working
$(this).parent().parent().hide();
// not working, hides `.chatbox-item` element, and eq(1) doesn't do anything either
//$(this).parents().eq(2).hide();
});
How can I get the .item element to be hidden when the .close-chatbox element is clicked?
Don't assign your action to a var, just use it:
$(function () {
$(".close-chatbox").click(function () {
$(this).parent().parent().hide();
});
});
JSFiddle: http://jsfiddle.net/ghorg12110/tkocx8ng/
You can either use,
$(this).parent().parent().hide();
or you can use .closest("element"),
$(this).closest(".item")
Use .closest() in jquery
$(this).closest('.item').hide();
Fiddle
I need to make the notification list appear on the click which is working fine. But onblur() is not working at all.
Here is the fiddle: http://jsfiddle.net/eX2zQ/
Code:
html:-
<div class="one" onclick="hidetwo();" onblur="remove_the_notification();">
<div>
<ul class="dropdown" id="notification" >
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>kjhlkjhkjhklhjklj</li>
<li>See_All</li>
</ul>
</div>
</div>
css:-
.one{
overflow: visible;
width: 21px;
height: 21px;
background-color:black;
}
js:-
var show=0;
function hidetwo(){
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}
function remove_the_notification(){
alert('hide one');
if (show==0){
document.getElementById('notification').style.display="block";
show=1;
}
else if (show==1){
document.getElementById('notification').style.display="none";
show=0;
}
}
You have onLoad selected in the JSFiddle options. That means that your functions are hoisted after everything on the page is loaded, and so their references aren't available at the time that the handlers are attached. Also, AFAIK, without contenteditable your can't 'blur' a <div> - this event is usually for form elements like inputs. Perhaps you meant onmouseleave?
<div class="one" onclick="hidetwo();" onmouseleave="remove_the_notification();">
JSFiddle
Use onmouseout for this. This will trigger when the mouse is going outside the div.
W3Schools onmouseout
onBlur() event will work with input element like text,file . it will not working on div,so please try onmouseLeave(),onmouseout()
<div class="one" onclick="hidetwo();" onmouseout="remove_the_notification();">
To make onblur event worked on DIV element you need to add tabindex attribute for DIV. For example:
<div class="one" onclick="hidetwo();"
tabindex="0" onblur="remove_the_notification();">
...
</div>
I have h3 block's and on click of each of the block I am showing the section associated with it. It is actually something like accordion(hide and collapse). I have also given a drop icon to the h3 tags, means that when the block is opened the h3 should have a dropicon pointing downwards while others h3 should have there dropocons towards right. I am controlling this behaviour using backgroundPosition. I am using the jQuery visible condition to see if the particular block is visible then give its drop icon one background position and to the rest other. It works fine but only for first click. It doesn't work for second click; can somebody explain why? Here is my code:
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
UPDATED CODE:
$("h3").click(function() {
$(".tabs").hide();
$(this).next().show();
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
} else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
})
If you wrap the whole block in a div it might make traversing easier.
Html:
<div class="drop-block">
<h3>Click this</h3>
<ul>
<li>Drop</li>
<li>it</li>
<li>like</li>
<li>it's</li>
<li>hot</li>
</ul>
</div>
Jquery:
var dropper = $('.drop-block');
$(dropper).find('h3').click(function(){
$(this).toggleClass('active');
$(dropper).find('ul').toggle();
});
Example
I Belive that you are looking for live
So it will be something like this:
$(element).live('click', function(){
if($(this).next().is(':visible')) {
$(this).css({'backgroundPosition':'0px 14px'});
}
else {
$("h3").css({'backgroundPosition':'0px -11px'});
}
}
Instead of editing the css of them, make a css class "open" (or similar), and then add / remove the class on the click to open / close.
It is much easier to debug by checking for the existence of a class than it is to check the css properties of something in JS.
Better make a class name for each situation and easly handle the action
$('h3').on('click', function(){
if($(this).hasClass('opened')) {
$(this).removeClass('opened');
}
else {
$(this).addClass('opened');
}
}
$(document).on('click', 'h3', function(e) {
$(".tabs").hide('slow');
$(this).css({'backgroundPosition':'0px 14px'});
if(!$(this).next().is(':visible'))
{
$("h3").css({'backgroundPosition':'0px -11px'});
$(this).next().show('slow');
}
});
You can remove 'slow' from show/hide if animation is not required
Here is an example.
It sounds like you need to bind click events to the h3 elements and toggle the visibility of the child elements:
$(function(){
$("h3").click(function(){
$(this).next(".tabs").toggle();
});
});
Example markup:
<h3>Item 1</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
<h3>Item 2</h3>
<div class="tabs">
<h4>Option 1</h4>
<h4>Option 2</h4>
</div>
Here's a jsFiddle to demonstrate.
Can you disable tabs in Bootstrap 2.0 like you can disable buttons?
You could remove the data-toggle="tab" attribute from the tab as it's hooked up using live/delegate events
As of 2.1, from bootstrap documentation at http://twitter.github.com/bootstrap/components.html#navs, you can.
Disabled state
For any nav component (tabs, pills, or list), add .disabled for gray
links and no hover effects. Links will remain clickable, however,
unless you remove the href attribute. Alternatively, you could
implement custom JavaScript to prevent those clicks.
See https://github.com/twitter/bootstrap/issues/2764 for the feature add discussion.
I added the following Javascript to prevent clicks on disabled links:
$(".nav-tabs a[data-toggle=tab]").on("click", function(e) {
if ($(this).hasClass("disabled")) {
e.preventDefault();
return false;
}
});
i think the best solution is disabling with css.
You define a new class and you turn off the mouse events on it:
.disabledTab{
pointer-events: none;
}
And then you assign this class to the desired li element:
<li class="disabled disabledTab"> .... </li>
You can add/remove the class with jQuery also. For example, to disable all tabs:
$("ul.nav li").removeClass('active').addClass('disabledTab');
Here is an example: jsFiddle
No Need Any Jquery, Just One Line CSS
.nav-tabs li.disabled a {
pointer-events: none;
}
Also, I'm using following solution:
$('a[data-toggle="tab"]').on('click', function(){
if ($(this).parent('li').hasClass('disabled')) {
return false;
};
});
Now you just adding class 'disabled' to the parent li and tab doesn't work and become gray.
Old question but it kind of pointed me in the right direction. The method I went for was to add the disabled class to the li and then added the following code to my Javascript file.
$('.nav-tabs li.disabled > a[data-toggle=tab]').on('click', function(e) {
e.stopImmediatePropagation();
});
This will disable any link where the li has a class of disabled. Kind of similar to totas's answer but it won't run the if every time a user clicks any tab link and it doesn't use return false.
Hopefully it'll be useful to someone!
For my use, the best solution was a mix of some of the answers here, which are :
Adding the disabled class to the li I want to disable
Add this piece of JS :
$(".nav .disabled>a").on("click", function(e) {
e.preventDefault();
return false;
});
You can even remove the data-toggle="tab" attribute if you want Bootstrap to not interfer at all with your code.
NOTE: The JS code here is important, even if you remove the data-toggle because otherwise, it will update your URL by adding the #your-id value to it, which is not recommended because your tab is disabled, thus should not be accessed.
With only css, you can define two css classes.
<style type="text/css">
/* Over the pointer-events:none, set the cursor to not-allowed.
On this way you will have a more user friendly cursor. */
.disabledTab {
cursor: not-allowed;
}
/* Clicks are not permitted and change the opacity. */
li.disabledTab > a[data-toggle="tab"] {
pointer-events: none;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
</style>
This is an html template. The only thing needed is to set the class to your preferred list item.
<ul class="nav nav-tabs tab-header">
<li>
Info
</li>
<li class="disabledTab">
Date
</li>
<li>
Photo
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-info">Info</div>
<div class="tab-pane active" id="tab-date">Date</div>
<div class="tab-pane active" id="tab-photo">Photo</div>
</div>
Suppose, this is your TAB and you want to disable it
<li class="" id="groups"><a data-toggle="tab" class="navuserli" href="#groups" aria-expanded="false">Groups</a></li>
So you can also disable this tab by adding dynamic css
$('#groups').css('pointer-events', 'none')
In addition to James's answer:
If you need to disable the link use
$('a[data-toggle="tab"]').addClass('disabled');
If you need to prevent a disabled link from loading the tab
$('a[data-toggle="tab"]').click(function(e){
if($this.hasClass("disabled")){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}
If you need to unable the link
$('a[data-toggle="tab"]').removeClass('disabled');
You can disable a tab in bootstrap 4 by adding class disabled to the child of nav-item as follows
<li class="nav-item">
<a class="nav-link disabled" data-toggle="tab" href="#messages7" role="tab" aria-expanded="false">
<i class="icofont icofont-ui-message"></i>Home</a>
<div class="slide"></div>
</li>
I tried all suggested answers, but finally i made it work like this
if (false) //your condition
{
$("a[data-toggle='tab'").prop('disabled', true);
$("a[data-toggle='tab'").each(function () {
$(this).prop('data-href', $(this).attr('href')); // hold you original href
$(this).attr('href', '#'); // clear href
});
$("a[data-toggle='tab'").addClass('disabled-link');
}
else
{
$("a[data-toggle='tab'").prop('disabled', false);
$("a[data-toggle='tab'").each(function () {
$(this).attr('href', $(this).prop('data-href')); // restore original href
});
$("a[data-toggle='tab'").removeClass('disabled-link');
}
// if you want to show extra messages that the tab is disabled for a reason
$("a[data-toggle='tab'").click(function(){
alert('Tab is disabled for a reason');
});
None of the answers work for me. Remove data-toggle="tab" from the a prevents the tab from activating, but it also adds the #tabId hash to the URL. That is unacceptable to me. What is also unacceptable is using javascript.
What does work is added the disabled class to the li and removing the href attribute of its containing a.
my tabs were in panels, so i added a class='disabled' to the tabs anchor
in javascript i added:
$(selector + ' a[data-toggle="tab"]').on('show.bs.tab', function (e) {
if ($(this).hasClass('disabled')){
e.preventDefault();
return false;
}
})
and for presentation in less i added:
.panel-heading{
display:table;
width:100%;
padding-bottom:10px;
ul.nav-tabs{
display:table-cell;
vertical-align:bottom;
a.disabled{
.text-muted;
cursor:default;
&:hover{
background-color:transparent;
border:none;
}
}
}
}
Most easy and clean solution to avoid this is adding onclick="return false;" to a tag.
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>
Approval Details
</li>
</ul>
Adding "cursor:no-drop;" just makes cursor look disabled, but is clickable, Url gets appending with href target for ex page.apsx#Home
No need of adding "disabled" class to <li> AND removing href
Here's my attempt. To disable a tab:
Add "disabled" class to tab's LI;
Remove 'data-toggle' attribute from LI > A;
Suppress 'click' event on LI > A.
Code:
var toggleTabs = function(state) {
disabledTabs = ['#tab2', '#tab3'];
$.each(disabledTabs, $.proxy(function(idx, tabSelector) {
tab = $(tabSelector);
if (tab.length) {
if (state) {
// Enable tab click.
$(tab).toggleClass('disabled', false);
$('a', tab).attr('data-toggle', 'tab').off('click');
} else {
// Disable tab click.
$(tab).toggleClass('disabled', true);
$('a', tab).removeAttr('data-toggle').on('click', function(e){
e.preventDefault();
});
}
}
}, this));
};
toggleTabs.call(myTabContainer, true);