I am currently using :hoverCSS pseudo-class for displaying tooltip-like elements (i.e. tables) in a way similar to what is suggested here:
div.tool:hover div.tooltip { display:block; }
I like the fact that this does not require any JavaScript.
Is it possible to add a further constraint to the effect that the hover only applies if no mouse button is pressed? The reason is that I want to prevent interference of these tooltips with other functionality (drag-and-drop, drop-down menus) that is based on jQuery UI. (As it happens, the tooltips are currently dragged together with their corresponding "tool" elements.)
Basically the if mouse clicked css selector method id :active so what you would have to do is this:
.tool {
min-height: 18px;
height: auto;
}
.tool:active .tooltip {
display: none !important;
}
.tool:hover .tooltip {
display: block;
}
.tooltip {
display: none;
}
The order is crucial because the higher rules take priority
Here is a working fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/
Also you might want to consider using visibility instead of display because otherwise you need to set the height of the parent:
.tool:active .tooltip {
visibility: hidden !important;
}
.tool:hover .tooltip {
visibility: visible;
}
.tooltip {
visibility: hidden;
}
Example fiddle: http://jsfiddle.net/Hive7/bsnnb6sf/1/
Is it possible to add a further constraint to the effect that the
hover only applies if no mouse button is pressed?
One option could be to use :active pseudo-class to hide the tooltip. According to the spec: (my emphasis)
5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
The :active pseudo-class applies while an element is being activated
by the user. For example, between the times the user presses the mouse
button and releases it.
For instance:
div.tool:hover div.tooltip { display:block; }
div.tool:active div.tooltip { display:none; }
I think that's not possible because the hover event will always launch before the click event. If you want to disable that effect once the user clicks the element, you could add custom style rules to the css in the click event overriding the hover rules via element.addClass() or element.css()
Related
On my website I have a slideToggle div that contains some images, very big. When this div opens, I need the images to slideIn one by one when entering the viewport.
With my code, the div opens, but then the images slide in all at the same time (as if they were a single block).
But if I remove "display: none;" from my slideToggle div and I leave it open as a starting point, the script works perfectly.
I was wondering if "display: none;" somehow ignores the div's position to the viewport.
This is the slideToggle script I am using (if it helps): https://jsfiddle.net/5efuhytm/
Instead of
display: none;
Use
visibility: hidden;
This is because display: none will remove the entire dom element from the document. Whereas visibility: hidden will just hide the dom element. In this case, if you don't want to change the viewport hide go with the visibility property.
Refer this for more details, https://stackoverflow.com/a/133064/7544289
Hope this helps!
Change the CSS remove display:none in #show-images:
/*Panel that slides open*/
#show-images
{
color: #FFF;
padding: 0;
width: 150px;
}
And add this code (because what you want to hide is just Image.)
#show-images img
{
display: none;
}
Change the JS adding #show-images img
$(function()
{
$("a#toggle").click(function()
{
$("#show-images img").slideToggle(800);
$("#toggle").toggleClass("fade");
return false;
});
});
My JSFiddle is here:
https://jsfiddle.net/h2kf5ztq/
I've largely tried to reproduce balexand's answer from:
How to enable bootstrap tooltip on disabled button?
including, importantly, the CSS:
.tooltip-wrapper {
display: inline-block; /* display: block works as well */
margin: 50px; /* make some space so the tooltip is visible */
}
.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;
}
But for some reason, my disabled button doesn't have a tooltip.
How do I enable the tooltip?
It looks like you forgot to activate your tooltip.
You can do this by adding data-toggle="tooltip" to your button wrapper, and then adding $('[data-toggle="tooltip"]').tooltip() to your JS.
Also, there is a subsection showing the best way to enable tooltips on disabled elements.
First of all for initialize tooltip you need to call it by javascript
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
For calling javascript you need to have data-toggle="tooltip" in your HTML, There is only mistake you have.
Updated Fiddle: https://jsfiddle.net/q18vefym/
I'm trying to create a class on a div and then delete it. First I thought just do like I did before with toggleClass, but that doesn't seem to work, because I'm adding a class to an ID instead of a Class. I want my header to have a black background top as well with the class: headerbg.
Also I have a small question about the color of my hamburger menu. I wanted to have a toggle for colors of the white lines (orange instead of white) on the class when pressed on the hamburger menu.
My live version where it is on, works only when 1024px or smaller
My Javascript
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
$("header").addClass('headerbg');
});
});
My CSS
.hamburger div{
height: 3px;
background-color: white;
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.hamburger {
width: 30px;
display: none;
margin: 3em 3em 3em 0;
float: right;
transition: all 0.75s 0.25s;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.hamburger:hover div {
width: 30px;
}
.hamburger.closed {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
#media only screen and (max-width: 1024px) {
.menu {
width: 100%;
background: #000;
margin: 0;
display: none;
}
.show {
width: 100%;
background: #000;
margin: 0;
display: block;
}
.headerbg {
background: #000;
}
.hamburger {
display: block;
}
}
If anyone maybe could lead me to a good example or even better help me out I would really appreciate it! Just came back after 2,5 years break from HTML/CSS as well.
Thanks for looking at the question!
Your understanding of DOM elements seems to be vague. Let's break it down.
I'm trying to create a class on a div and then delete it.
What is it here, what are you trying to delete? The class or the element?
..., because I'm adding a class to an ID instead of a Class.
That's not technically possible. You can't add a class to an id, nor can you add an id to a class. You can only add/remove/modify the id attribute of a DOM element and you can add/remove classes to the className property of a DOM element, referenced in markup by the class attribute.
To keep it short, using jQuery, you can select one or multiple elements by ID, by class, by attribute or by attribute value (in fact, by any valid CSS selector that matches the element), and you can apply the .toggleClass(), .addClass() or .removeClass() methods (or any other jQuery methods) to that element (or to each element in the collection, if they are more than one).
To clarify things for you here's what your current code does:
$(document).ready(function(){
/* when all the DOM has finished building... */
$(".hamburger").click(function(){
/* do the following when an element with class "hamburger" is clicked: */
$(".hamburger").toggleClass("closed");
/* toggle class `closed` on all elements with class "hamburger"
(not only on clicked one!) */
$(".menu").toggleClass("show");
// toggle class `show` on all elements with class "menu"
$("header").addClass('headerbg');
// add class "headerbg" to all <header> elements in page
});
});
Addition, as per OP comment:
First I want to add the class .headerbg on the <header> when I click on the .hamburger class, then when I click on the .hamburger class again I want to delete/remove the class .headerbg for the <header>
This will do it:
/*
* place the following inside an instance of
* $(document).ready(function(){...})
*/
$('.hamburger').on('click', function(){
$('header').toggleClass('headerbg');
})
Note:
$(selector).click(function(){...}) is a shortcut for
$(selector).on('click', [child-selector,] function(){...}). I personally recommend using the latter for all event binding functions to develop a consistent pattern of binding. It helps in the long run, when maintaining code. Also, it allows binding on elements that are not yet in DOM, by using the optional child selector argument. For example, if you wanted to do the binding before .hamburger was created in DOM, you could have, with the following syntax:
$(window).on('click', '.hamburger', function(){
$('header').toggleClass('headerbg');
})
The main difference is the first syntax binds an event listener on each and every instance of .hamburger it finds at the time the binding is done (document.ready in your case).
The second syntax binds only one event, on window object and evaluates at the moment of click if it was fired from inside an element with class .hamburger or not. This means that if you have 1k elements with class .hamburger, you don't bind an event on each of them (resulting in 1k listeners). Also, it has the great advantage that it will work on elements that are added to the page after the binding is done (because evaluation is done at the click event, not at the ready event.
To be even more precise and clear, there are two syntax choices here.
1. Choose between:
.click(function(){...})
.on('click', function(){...})
I always go for second, because it's consistent across all event listeners (it doesn't matter what I put as first argument, instead of click - also, it allows to bind on more than one event type at once: .on('click tap swipe', function(){...}))
2. Choose between
$(child-selector).on('click', function(){...})
$(parent-selector).on('click', child-selector, function(){...}).
If there is only one instance of child-selector and it's already in DOM at the time you do the binding, choose first. If there are more than one instances of child-selector and you want each one present inside parent-selector, use second.
Theoretically speaking, you want as few event listeners as possible, so instead of 2 listeners, one on each child is better to have a single listener on a parent.
Also, best practice is to use the smallest parent selector possible. For example, if you know all your child-selectors will always be contained in a div holding your content — say $('#main') — it's best to bind on that container rather than on $('<body>') or $(window). This will make your code not be evaluated against a click event triggered outside of $('#main'), which in both theory and practice makes your page faster and lighter, for a better user experience.
in your #header you should toggle the headerbg not just adding it :
then your jquery must be :
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
if($("#header").hasClass("headerbg")){
$("#header").removeClass("headerbg");
}
else
{
$("#header").addClass("headerbg");
}
});
});
if you need to add the styles of the ID you should pass it through the attr function . like this
$(document).ready(function(){
$(".hamburger").click(function(){
$(".hamburger").toggleClass("closed");
$(".menu").toggleClass("show");
$("header").addClass('headerbg');
$("header").attr('id','#header');
});
});
and you can delete it like this
$("header").attr('id','');
this way you can toggle it
This question already has answers here:
How to completely DISABLE any MOUSE CLICK
(5 answers)
Closed 5 years ago.
I want to hide the cursor until my function is done but I can't find how to disable it. I mean I have found how to hide it and show it but when it's hidden I can still click So how to disable it?
window.document.styleSheets[0].insertRule('* {cursor: none;}', window.document.styleSheets[0].cssRules.length);
Meteor.call("lockTheMachine", machine.nameMachine, Session.get("loggedUser"), function(err, res) {
if (!err) {
Session.set("lastMachineUsed", machine.nameMachine);
window.document.styleSheets[0].insertRule('* {cursor: default ;}', window.document.styleSheets[0].cssRules.length);
} else {
console.error(err);
}
});
}
There's a CSS property for that called pointer-events.
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.
In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
If you were to disable any click interaction on your whole site you could simply add:
body.block { pointer-events: none; }
And trigger the class .block programatically via Javascript.
You can solve your problem by simply adding the following style in your CSS file.
button {
pointer-events: none;
}
The problem with this is that the button is not clickable but the cursor is still displayed when you hover on the button.
To overcome this problem you can add "disable" attribute to the button and add the following CSS.
button {
cursor: not-allowed; // or cursor: none;
}
When you add the css "cursor": "not-allowed" or "none" to a input type or a button, the button is still clickable. For doing the input type or button non clickable you have to add "disable" attribute.
A disabled input element is unusable and un-clickable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.
But when you using bootstarp library, when you disabled a button or input type, then you can't see any cursor when hover onto that element. At the newest bootstrap library, we can find this rule:
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
So I assume that bootstrap tried to implement the cursor: not-allowed for disabled buttons, or input's.
So for doing this you have to overwrite the bootstrap class for it.
But it works fine when you don't link bootstrap library in your html.
e.g.:
HTML code:
<button class="disabled-button" disabled>
I am disabled and not clickable too
</button>
CSS code:
.disabled-button {
cursor: not-allowed;
}
or you can trigger ".disabled-button" class programmetically by javascript to unclickable it.
I have a kendo grid on Cordova app. Here on the grid, the scrolling is jagged due to the css rule 'k-grid tr:hover' in kendo css. If I disable this rule from developer tools, scrolling is smooth. Is there any way to disable this hover rule?
I don't want to override hover behaviour. I want to disable it.
Edit: The problem is due to hover the scrolling is not smooth on the grid. The scroll starts after touchend of the swipe but instead it should move with touchmove. This causes the scrolling to be jagged. Removing the hover rule solves this and makes scroll smooth.
Do ask for further clarification if necessary.
You can use pointer-events: none property on the DOM element.
https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
.k-grid tr {
pointer-events: none;
}
With this property, the hover event on that element will be completely ignored.
I've "solved" it by disabling the hover and then replicating the tr even background color:
.k-grid tr:hover {
background: none;
}
.k-grid tr.k-alt:hover {
background: none;
}
.k-grid tr.k-alt:nth-child(even) {
background-color: #f5f5f5;
}
of course you can play with the colors
I took hint from Gabriel's answer but I applied pointer events none to the td elements inside .k-grid tr. But this is just a temporary fix as this removes the possibility of adding pointer events to those td elements. I am still looking for a better alternative.