I was looking at how to change the cursor over an HTML5 canvas when dragging the mouse...
Came across this: Change cursor over HTML5 Canvas when dragging the mouse
seemed logical that an :active pseudo-selector would do the trick...
When I used it on my page, however, the cursor set by the rule in the :active pseudo-selector was ignored, instead showing the text selection cursor.
In firefox, this behavior is not present - it obeys the cursor property I set.
Here's an example to demonstrate the behavior.
Any idea how to fix this in chrome?
Working Fiddle
Add the following for Chrome to turn off text selection while dragging and dropping.
document.onselectstart = function(){ return false; }
This has been answered a few times,
chrome sets cursor to text while dragging, why?
Click and Drag Cursor in Chrome
Related
The following happens in Safari Version 7.0.1 and IE8.
Steps to reproduce the problem:
http://goo.gl/lP3Ky1
Problem:
The row's hover state remains after dismissing the popup menu, and it will not go away no matter where the mouse is, until you hover over it again.
What is the expected behavior?
The row's hover state should go away after dismissing the popup menu.
Does anybody know a fix for Safari Version 7.0.1 and IE8? I would be okay with some manual way to "untrigger" the css hover state.
This was an interesting issue to solve. And while the solution is a bit hacky, it works. After setting the HTML to "boo" we clone the entire row, insert it, and remove the old one:
$(function() {
$("table").on("click", "td", function() {
$("#menu")
.clone()
.one("click", function() {
var $td = $(this).closest("td"),
$tr = $td.parent();
$td.html("boo");
$tr.clone(/* true */).insertAfter($tr);
$tr.remove();
return false;
})
.appendTo(this)
.show();
});
});
http://jsfiddle.net/ryanwheale/3BUaT/26/
Here is a workaround - http://jsfiddle.net/3BUaT/11/ . After going through many stackoverflow posts, understood that it is not possible to remove css pseudo class from javascript. So definitely a work around was necessary.
I'm using
tr.hovered td {
background-color: lightblue;
}
instead of regular CSS hover state.
The problem is that when you click on an li in menu, it's not exactly triggering mouseout event from CSS in safari. Technically speaking, you did not actually took your mouse out of the element. It's just that the element was removed. This seems like a bug in safari.
Its not browser's fault. Its yours. You are appending the menu list to the row. So the menu list is a child of the row. So if you hover over child, the parent will also be in hover state.
I've updated your jsfiddle:
Jsfiddle;
$(function() {
$("td").on("click", function() {
$("#menu")
.clone()
.one("click", function() {
// this is key to reproduce it.
$(this).closest("td").html("boo");
return false;
})
.appendTo($(this).parent().parent().last())
.show();
});
});
You are appending the div #menu to the td with your function. Now the CSS is going to apply the hover state to the td when you mouseover either the td or the appended menu. Hovering over the menu applies the tr:hover td css, because the menu is now part of the td.
OK, so here is my proposed solution which takes the points from my comments (on Tejas Jayasheel's answer) into account: JSFiddle
The differences are:
#menu is not cloned and not added to the table cell, but instead just repositioned (so the element is also only displayed once)
CSS hover only applied if the 'no-js' class is present in the HTML element (need to be added in your original file)
otherwise hover effect is achieved by applying the class "clicked" to the cell
additionally when menu is already visible the hover effect is "disabled" by toggling another class on all TD's
clicking outside the menu on the already "clicked" cell will close/hide the menu without any further action
.no-js td:hover,
td.hover-enabled:hover,
td.clicked {
background-color: lightblue;
}
What is the expected behavior? The row's hover state should go away after dismissing the popup menu.
Maybe ...! But keep in mind that you are heavily "confusing" the browser by removing the hovered element from DOM. I guess that Safari and IE 8 simply "do not recognize" that former hovered part isn't hovered anymore. This may or may not be a "bug". But at least it is "bad practice/ writing style" and should simply be avoided!
Does anybody know a fix for Safari Version 7.0.1 and IE8? I would be okay with some manual way to "untrigger" the css hover state.
The "fix" is shown in my example. It is a common recommendation to add, remove or toggle classes when it comes to scripting and hover. By doing so you avoid the "problem" at all. Because even in future versions of any browser the behaviour in such cases is "unpredictable" at best.
JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.
What's wrong with the CSS to make it behave this way?
focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..
In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.
What might work for your purposes is active, which you can view here.
There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:
$(function() {
$('#navbar *').attr('tabindex', '1');
});
end everithing comes in place. You can do it using pure JavaScript of course.
I have the following setup:
<div>Element with CSS3 animated height change</div>
<div>Link</div>
I animate the height change of the first element with CSS3 transitions, then I click on the link. In mobile Safari, the link gets highlighted with a semitransparent overlay, as expected. In Android browser (tested 2.1, 2.2, 2.3), the link is clickable, but the highlighting doesn't occur. I can actually usually click and hold on the link's old location and get the tap highlight there.
Demo here: http://jsfiddle.net/bnickel/DmMZN/
The defect appears to be that Android has a layer of "touch points" corresponding to known element positions, but does not update those points after a CSS3 animation. Is there any safe way to ensure touch points get update correctly? I am fine with performing a webkitAnimationEnd callback.
The solution is simple enough. You just need to trigger a DOM change event at the end of the animation. I'm using the following as it is generic enough not to impact other page elements.
function fixTouchLayer() {
$('<span/>')
.css({
position: 'absolute',
visibility: 'hidden'
})
.appendTo(document.body)
.remove();
}
http://jsfiddle.net/bnickel/DmMZN/5/
I may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.