I am looking for a way to disable a 'inner-button' that is inside a label tag.
I have a button that is created in a label:
<label for="UploadFile" class="inner-button" data-toggle="tooltip" data-placement="top" title="Upload File" onclick="SetFileName()" id="upload">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x img-responsive"></i>
<i class="fa fa-upload fa-stack-1x fa-inverse img-responsive"></i>
</span>
</label>
I want to disable that element using a radio buttons in a similar format like that:
<label>
<input type="radio" id="chkDisableOnClick"name="radiobButton" onclick="document.getElementById('upload').disabled = true;"/>
</label>
I did not have any luck at the moment. Once the radio button is clicked, the button inside the Label is not disabled.
Thanks in advance.
You could use for example pointer-events css property (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
label[disabled]{
pointer-events: none;
}
label doesn't have a disable property, you'll need to add a class to disable the object. For example:
.disabled {
color: darkgrey;
background-color: grey;
}
Related
Im trying to implement accordion menu. I did that and it's not working. I just want to do toggle icon
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
transform:rotate(450deg);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow"></i>
</a>
In order for the transform property to work, try to set display: block or display:inline-block within the .my-arrow.down class:
.my-arrow.down {
display: block;
transform:rotate(450deg);
...
You also need to include content within your <i> element. For example, you could use the > character:
<i class="fa fa-angle-right my-arrow">
>
</i>
Here is a working example with your code and my modifications:
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
display: inline-block;
transform:rotate(450deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow">></i>
</a>
I have a html page, where I have two div classes :
<i class="fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="fas fa-info-circle float-left resultsInfo" ></i>
On Page load, I need to get the count of how many times these each Div has been repeated. The only differentiating factor between these two div is the style. So I wanted to know how many times the first div oocured and how many times the second one. Please help me to find this out. I am new to HTML and js
I think the easiest way is this:
<html>
<body>
<p id="demo"></p>
<ul>
<i class="count fas fa-info-circle float-left resultsInfo" style="color: red; padding-top: 4px;" ></i>
<i class="count fas fa-info-circle float-left resultsInfo" ></i>
</ul>
</body>
</html>
and js is lookin like
document.getElementById("demo").innerHTML = "count: " + document.querySelectorAll('.count').length;
here is the example: https://jsfiddle.net/f7tsLcrd/
This snippet returns the number of elements that have a "count" class and red color
$(".count").filter(function() {
return ($(this).prop('style').color == 'red');
}).length
I want to add a bootstrap popover to my site. It should show up, when the user pushes a button by using the focus event. This works on the Desktop, but not on the iPad. It seems like Safari on iOS doesn't raise the focus event for buttons altogether.
As a workaround, I replaced the button with an a tag. This does work, but gives some other issues like a lack of the disabled state without adding a specific class.
<a class="btn btn-outline-secondary" id="ap-btn-selectColor" data-toggle="popover" role="button">
<i class="fa" style="background-color: rgb(140, 181, 255); width: 16px" id="ap-fgColorSelection"> </i>
</a>
<button type="button" class="btn btn-outline-secondary" id="ap-btn-selectBorderColor" data-toggle="popover">
<i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection"> </i>
</button>
$('[data-toggle="popover"]').popover({
content: function () {
return $someElement;
},
placement: 'auto',
html: true,
trigger: 'focus'
});
In my example, the popover works for the first element, but not for the second.
Is there a way to enable the focus event for buttons on iOS?
The solution was quite simple. You simply can't use a button on an iOS device, because it doesn't have a focus event. Instead, you should use an a tag with role="button" and a valid tabindex setting.
<a role="button" id="ap-btn-selectBorderColor" class="btn btn-outline-secondary" data-toggle="popover" tabindex="1">
<i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection"> </i>
</a>
On my site I have a menu to the right of the navigation bar. It displays the search when it is available on the current page.
I want to display an icon when the search is available.
All search blocks have the class .views-exposed-form and appear in #navbar-collapse-second
I added to my icon, the class .icon-navbar-alert-disable which is used to hide the icon.
How to remove the .icon-navbar-alert-disable class when the .views-exposed-form class is present in #navbar-collapse-second ?
Here is the css code to hide the icon :
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
Here is the code of the button of my manu with the icon :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
Here is the page concerned, this is the menu on the right :
https://www.s1biose.com/boutique/ma-boutique-pro
I started a JS code but it is not complete :
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
UPDATE
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
enter image description here
Are you looking for the hasClass selector in jQuery?
If so wrap it in a if statement and inside you can show the result you'd like from it;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
Inside div i set a value now i want to grab this value using class. But code bellow not returns the value. Whats wrong i am doing here? how can i solve that?
<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
$(".btnAmazon").on("click", function () {
var d = $(".btnAmazon").val();
alert(d);
});
Inside div i set a value now i want to grab this value using class
Looks like you are are looking for value attribute of div
val() is for input elements, replace it with attr( "value" )
var d = $(".btnAmazon").attr( "value" );
You're trying to read the div's "value" attribute.
console.log($('div').val()) // This won't work; DIVs don't have a value
console.log($('div').attr('value')) // but this one has an attribute named value
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
Note that, strictly speaking, value is not a valid attribute -- ever since the XHTML era, nonstandard attributes are supposed to have a data- or x- prefix -- but it will work just fine in all browsers. If code validation is a concern, the "correct" way to handle this would be:
// either of these will work, interchangeably:
console.log($("div").data("value"))
console.log($("div").attr("data-value"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
I could see that you want to read the value attribute, which cannot be used for <div> tag. Please use either data-value:
data-value="396495"
And get it using:
.data("value");
This is the right method. Using .attr("value") might work in some browsers and not sure if it works seamlessly everywhere. But that's what you need.
I think "value" as a attribute is not allowed on div elements.
Try it like this:
jQuery(document).ready(function($){
$(".btnAmazon").on("click", function () {
var d = $(this).attr("data-value");
alert(d);
});
});
.btn{
background: green;
padding: 20px;
text-align:center;
display:inline-block;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default
btnAmazon" data-toggle="modal" data-
target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
Button
</div>
In order to retrieve to attribute named value (the 352197909440 in your example) you will need to use
var d = $(".btnAmazon").attr('value');
.html() will show you the html within your Div. i.e.
<i class="fa fa-bullseye"></i>
A div can't have a value attribute, it is invalid markup.
You, however, can use custom data-* attributes (as you already use in your code).
So first of change your HTML
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>
Then you can use $('.btnAmazon').data('value') to get its value...
Working example:
$(".btnAmazon").on("click", function () {
var d = $(".btnAmazon").data('value');
alert(d);
});
/* for the demo */
div {
width: 50px;
height: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title="Find on Amazon" data-value="352197909440" class="btn btn-default btnAmazon" style="padding-top:5px !important" data-toggle="modal" data-target="#FindOnAmazonModal">
<i class="fa fa-bullseye"></i>
</div>