I'm using a solution like this one http://jsfiddle.net/cSSUA/209/ for applying a tooltip on disabled buttons, but it doesn't work on Internet Explorer (IE11 in my case).
Essentially the workaround is based on a wrapping div:
<span class="tooltip-wrapper" title="Nessun esito selezionato">
<button class="btn btn-primary" type="button" disabled><i class="fa fa-check"></i> Rifiuta</button>
</span>
, in CSS:
.tooltip-wrapper {
display: inline-block; /* display: block works as well */
}
.tooltip-wrapper .btn[disabled] {
/* don't let button block mouse events from reaching wrapper */
pointer-events: none;
}
and in jQuery:
$('.tooltip-wrapper').tooltip({position: "bottom"});
I see in DOM explorer that the tooltip is created but I don't understand why I can't see the tooltip.
I'm so sorry for my bad english and for my bad knowledge of HTML/CSS/javascript/jQuery/Bootstrap.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});
.tooltip-wrapper {
display: inline-block; /* display: block works as well */
margin: 50px; /* make some space so the tooltip is visible */
z-index: 2;
}
.tooltip-wrapper .btn[disabled] {
/* don't let button block mouse events from reaching wrapper */
pointer-events: none;
}
.tooltip-wrapper.disabled {
/* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
cursor: not-allowed;
}
<script
src="https://code.jquery.com/jquery-1.10.1.js"
integrity="sha256-663tSdtipgBgyqJXfypOwf9ocmvECGG8Zdl3q+tk+n0="
crossorigin="anonymous"></script>
Add a `title` attribute for your display text, and use the `$('[data-toggle="tooltip"]` attribute to call on your function. Tested in IE11 using JQuery 1.10.1 and it works.
<div class="tooltip-wrapper disabled" data-title="tooltip" title="Dieser Link führt zu Google">
<button class="btn btn-default" disabled>button disabled</button>
</div>
Related
I've used eventListener to close popups when I click off them but the popup still shows when I click on another popup. Is there a way to fix this without changing too much of my code?
I'm new to JS so I'm keeping things as simple as possible. Ideally I want to keep the eventListener function because it works really well to close the popups without having to manually close each one, apart from this one thing.
var popup = document.getElementById("myPopup");
function myFunction() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction();
});
var popup2 = document.getElementById("myPopup2");
function myFunction2() {
popup2.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup2.classList.contains('show')) myFunction2();
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup" onclick="myFunction2()">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup again!</span>
</div>
</body>
You're very close, but the way you've written it is making it difficult. We can better solve this using a forEach loop and generic function:
JSFiddle: https://jsfiddle.net/vpr4Lh62/
// constants
const SHOW_CLASS = 'show'
// clears any active popups by removing the show class from all popup texts
// note: could be further optimized by storing the "active" popup in a variable whenver it's clicked, and only unsetting that one in this function
const clearPopups = () => {
document.querySelectorAll('.popuptext').forEach(text => text.classList.remove(SHOW_CLASS))
}
// keep behavior to clear popups when clicking outside of popup
window.addEventListener('click', ({ target }) => {
if(!target.classList.contains('popup')) {
clearPopups()
}
})
// instead of creating click handlers for each popup, we can create them all at once using a forEach loop
// first grab all the popups on the page
const popups = document.querySelectorAll('.popup')
// set a click handler on each popup
popups.forEach(popup => {
// we can also set the event listener on the popup, instead on the entire window
popup.addEventListener('click', ({ target }) => {
// grab the first child, which will be the span
const span = popup.children[0]
// clear all the popups first
clearPopups()
// then set this one to be shown
span.classList.add(SHOW_CLASS)
})
})
This also means we can simplify our HTML:
<body style="text-align:center">
<h2>Popup</h2>
<!-- You should never use onclick, this is old. Click handlers should be set using javascript -->
<div class="popup">Click me to toggle the popup!
<!-- We also don't need the ID here anymore -->
<span class="popuptext">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup again!</span>
</div>
</body>
To keep it as simple and least amount of change (but by far not an ideal solution) is this:
For the window click handlers you need to be able to differentiate between the two popups, currently you are using a .popup class as a check if it's not the closest thing in both cases, so when you click on a second popup, the myFunction() is not executed.
What I added here is new class names to the popups, 'one' and 'two' respectively.
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup one" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup two" onclick="myFunction2()">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup again!</span>
</div>
</body>
Then in your javascript code you can target them by modifying the selectors ever so slightly:
var popup = document.getElementById("myPopup");
function myFunction() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup.one') && popup.classList.contains('show')) myFunction();
});
var popup2 = document.getElementById("myPopup2");
function myFunction2() {
popup2.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup.two') && popup2.classList.contains('show')) myFunction2();
});
Again, this is by no means a good coding standard nor the best solution but effectively the simplest one with least alteration to the code.
I hope this helps in terms of making sense why the issue occurred in the first place.
This is the solution to your problem.
Mohd Belal Toggle popus JsFiddle
Points covered in this jsfiddle
1. 2 Popus have been taken for now
2. Popus will toggle other popup opened
3. Clicking on area other than popup will close the popup
Hope you got your solution #Joe
I'm trying to do this: when the mouse is on the button, the span's bottom-padding must increase.
This is my button:
<button class="btn btn-success btn-circle" id="myBtn" title="Go to top">
<span id="move" class="fa fa-chevron-up"></span></button>
I have tried to add a class, with bottom-padding bigger than the default(3px), with js.
My class:
.set {
padding-bottom:13px;
}
and this is my js:
window.onload = function() {
document.getElementById("myBtn").onmouseover = function() {
document.getElementById("myBtn").classList.add(" set");
}
}
but it doesn't work for me.
Can you help me? (i must do that when the mouse is no longer on button, the span's bottom-padding come back at 3px too) Thank you.
You can simply do it with css:
.btn-circle:hover span{
padding-bottom:13px;
}
Explain
:hover // when mouseenter to elment
You have to do it padding-bottom:13px; instead of padding-bottom=13px;
A possible solution could be the usage of CSS3: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1.
Instead of manipulating the width, you have to change the padding-bottom value.
Remove space in your class assignment " set" should be "set". You can also set document.getElementById("myBtn") in a variable say elem so that you do not need to repeat the get element again from DOM.
window.onload = function() {
var elem = document.getElementById("myBtn");
elem.onmouseover = function() {
elem.classList.add("set");
}
}
.set {
color: red;
}
<button class="btn btn-success btn-circle" id="myBtn" title="Go to top">
<span id="move" class="fa fa-chevron-up">someIcon</span></button>
Im not completely sure if i get it … i think you want to move the inner span upwards and not increase the padding of the button itself … so:
#myBtn:hover #move {
position: relative;
top: -3px; // or whatever you want
}
You could animate that like so:
#move {
position: relative;
top: 0px;
transition: all ease-in-out 0.3s;
}
#myBtn:hover #move {
position: relative;
top: -3px; // or whatever you want
}
PS: There are many answers here with padding-bottom like in your question. But padding-bottom will affect the parents size ... i think that is not what you want … so top in combination with position: relative seems much more robust.
I have following HTML snippet for a button:
HTML:
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos"></button>
</div>
<div class="ClearText">
Clear
</div>
</div>
CSS:
div.ClearButton
{
vertical-align: top;
display: inline-block;
background: url(../CustomControl/buttons.png?ver=365321878) no-repeat scroll -343px -443px rgba(0, 0, 0, 0);
height: 16px;
overflow: hidden;
width: 16px;
}
div.Clear
{
vertical-align: top;
display: inline-block;
overflow: hidden;
cursor: pointer;
padding-left: 2px;
padding-bottom: 6px;
padding-right: 6px;
padding-top: 4px;
}
On a certain event, I need to disable this button completely. I tried with the following code, but it does not disable/gray out the button and it's still clickable.
var resetBtn = document.getElementById("reset");
resetBtn.disabled = true;
As someone suggested that the CSS I have applied is causing this issue. Please suggest how can I make this button non-clickable.
Use :
resetBtn.disabled = "disabled";
This works in all browsers -> http://jsfiddle.net/fMV4B/
Using Only CSS:
//CSS
.no-click {pointer-events: none;}
<input class="no-click" />
You can do it with the method : setAttribute()
Your js will be like that :
document.getElementById("reset").setAttribute('disabled','disabled');
This JSFiddle shows it working, based on this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_disabled. It could be that it's not working as expected because your CSS is making it visually appear different. Remove you CSS first to make sure the JavaScript it working as expected.
Here's the code for the JSFiddle:
<button type="button" id="test">Click Me!</button>
<script>
document.getElementById("test").disabled = true;
</script>
Do you have an example of when your JavaScript is running?
Have you read through this answer or tried
https://stackoverflow.com/a/3014678/2992661
resetBtn.setAttribute('disabled', 'disabled');
Your code works fine.
The problem is almost certainly that the JavaScript code is either not being called at all or is being called in the wrong spot.
If you run this code immediately, make sure that the DOM is loaded (window.onload callback, or preferably have your JS code right before </body>).
Otherwise just make sure that any event that runs the JS code is actually firing.
Try this code:
To disable the submit button with jQuery, you just need to add a “disabled” attribute to the submit button.
$('#buttonId').click(function(){
$('#buttonId').attr("disabled", true);
});
To enable back the disabled submit button, set the “disabled” attribute to false, or remove the “disabled” attribute:
$('#buttonId').attr("disabled", false);
or
$('#buttonId').removeAttr("disabled");
I am trying to create button group (text and icon buttons next to each other) with bootstrap 2.
<div class="btn-group chips">
<button type="button"class="btn btn-large btn-success userChips">asdasd</button>
<button type="button" class="btn btn-large btn-danger removeUser">
<i class="icon-minus-sign"></i>
</button>
</div>
the size of the left button (the one with the icon) is smaller then the one with the text (the right one).
How do I fix this?
Apply a fixed width
.btn {
width: 80px;
}
While applying a fixed with will get you the expectation, it carries with it a cost. Your buttons now can only have so many characters in them before they start falling behind.
.fixed .btn {
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;
}
Here is a fiddle for you to check out.
Give your buttons the same exact width.
.btn-large {width: 80px;}
This is on my plugin page on Git and I have two interactive demo in the web page. In one of the demo page, I have a small dialog that opens when you click on a div.
The weird issue is that this dialog is getting opened when I click on the top title that says attrchange beta . This happens only if the first click is on the title attrchange beta, clicking any other element in page fixes this issue.
The plugin page http://meetselva.github.io/attrchange/ [Fixed, use the below URL to see the problem]
http://meetselva.github.io/attrchange/index_so_issue.html
Below is the code,
<!-- The title -->
<h1 id="project_title">attrchange <span class="beta" style="text-decoration: line-through;" title="Almost there...">beta</span></h1>
<!-- Main dialog that has link to the sub-dialog -->
<div id="attributeChanger">
<h4 class="title">Attribute Changer</h4>
<p>Listed below are the attributes of the div:</p>
<div class="attrList"></div>
<div class="addAttribute text-right">add new attribute</div>
</div>
<!-- Sub-dialog -->
<div id="addOrmodifyAttr" title="Add/Modify Attribute">
<h4 class="title">Add/Modify Attribute</h4>
<p><b>Attr Name</b> <input type="text" class="float-right attrName"></p>
<p><b>Attr Value</b> <input type="text" class="float-right attrValue"/></p>
<div class="clear"> </div>
<button type="button" class="float-right close">Close</button>
<button type="button" class="float-right update">Update</button>
<div class="clear"></div>
</div>
JS:
var $attributeChanger = $('#attributeChanger');
var $attrName = $('.attrName', '#addOrmodifyAttr'),
$attrValue = $('.attrValue', '#addOrmodifyAttr'),
$attrAMUpdate = $('.update', '#addOrmodifyAttr');
//Handler to open the sub-dialog
$attributeChanger.on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
});
The problem is the CSS applied to your #attributeChanger div.
If you look at the CSS applied to it:
#attributeChanger {
background-color: #FEFFFF;
border: 1px solid #4169E1;
color: #574353;
font-size: 0.9em;
margin: 10px;
min-height: 50px;
min-width: 150px;
opacity: 0;
padding: 2px;
position: absolute;
top: -200px;
z-index: 1;
}
You'll notice that the position is absolute, and it's positioned over your logo. So what you're clicking is actually your #attributeChanger div.
To fix it, you can hide #attributeChanger using display: none;, then use $('#attributeChanger').show(); in jQuery when it comes into actual view.
The pop up is showing because this code is running:
}).on('click', '.addAttribute', function () {
$attrName.val('').removeClass('nbnbg');
$attrValue.val('');
$('#addOrmodifyAttr, #overlay').show();
This is because the DIV with the class addAttribute is over the title DIV.
You can either move the 'addAttribute' DIV, or remove the last line of that onclick function.
That is because you element is hover your title and detect the click on himself and open(i don't know why it open, i didnt examine your entire code). But when you click anywhere else, your code is changing his position so it is not over the title.
The easiest fix is to change you #attributeChanger CSS top to -100px (that's the value when you click on the document) OR add a display : none.
EDIT : Axel answer show what I mean by "element is hover your title".