How to change cursor when dragging using only CSS?
div:active{
cursor:move;
}
This won't work because it will be automatically changed by the browser to a text cursor when dragging. So how?
http://jsfiddle.net/nick_craver/uZ377/1/
Not sure if it truly solves your problem, but this ( http://jsfiddle.net/garretruh/pJjd4/ ) seems get rid of the text-select cursor by not making text selectable at all. Then again, you might want users to be able to select your text.
I realize this is over a year old, but just change the * selector at the top of that JSFiddle to only match the element that you are dragging around. No Javascript required.
Related
I am still stuck on a highlighting problem in IE 7/8. I have tried applying CSS from this question, changing the onselectstart event to return false, adding the attribute unselectable="on", and anything else I could find here on SO.
Then I came across this response to this question:
Once an element is unselectable, users cannot select from within that
element. However, they are still able to select either the text or the
box of the element by dragging into it from within another element
which is not unselectable.
I have tried to work around this by cancelling various events on
myElement (ondragenter, oncontrolselect, onmouseenter,
onselectionchange...), it didn't work.
This is exactly what I am trying to do. I have a raphael canvas object that the user can drag in order to draw. However, if they leave the canvas I do not want text in "outside" elements to be highlighted. I was wondering if anybody has found a hack for the quoted problem. I'm only having this problem in IE 7/8.
use JQUERY
$('#dragelement').onMouseDown(function(){
//YOUR CODE
});
CSS3 Pie has some odd functionality when styling select tags. The border radius and box shadow seem to apply the effect and then place the non-styled select box overtop of the effect. Is this an issue anyone has come across and worked around before?
I was actually having this issue, but figured out a fix.
Initially, with
behavior: url(stylesheets/PIE.htc);
the select would open at first, but if I applied a class of error on it with javascript during validation to make the border and background color change to red, it would no longer open properly. To get it to still work properly, you need to add 3 additional pie properties to the select. After adding
.ie select{
behavior: url(stylesheets/PIE.htc);
-pie-poll:false;
-pie-track-hover:false;
-pie-track-active:false;
}
I was able to get it to work and function 100% properly.
Do you mean to style it like this? http://jsfiddle.net/Tmzjz/1/
If you check this in IE7/8, the select box will not function properly.
When you need rounded corners and box shadows for select box, it is better to use a javascript method - http://cssglobe.com/custom-styling-of-the-select-elements/
I have a css problem and I don't know how to fix it.
In order to expand a dropdown list you must use css below. Work fine only with one condition, when you select an option the select wont return to initial width. WHY??? :(
This a behavior that I want to happen on all browser including IE8 because of IE I must set width on focus .
select:focus{
min-width:158px;
width:auto;
}
fiddle:
http://jsfiddle.net/DCjYA/304/
Check this out! I think will solve your problems regarding combo boxes on IE.
http://www.andreabianchin.it/jquery-skinner/
You need to force the element to lose focus after it changes.
Add:
onchange="this.blur()"
like this:
<select id="id72" class="styleDDC" onchange="this.blur()">
the pseudo css class: focus is for while its selected (while its highlighted blue) once you click on something else it shrinks back down to your min-width
Chrome has some cute features to make the selected form element (input ect) stand out like adding a border color and, more annoyingly, it slightly reduces the margins on some of my form elements after they've been selected, shifting the page slightly each time a text entry box is selected.
It's not the textarea draggable resize effect that chrome has, it's effecting input elements that should have a constant size, but they automatically change once selected.
Is there any CSS to disable this feature, or do I simply have to make sure my text box margins/padding are set up such that Chrome doesn't resize them?
Here it is
textarea { resize:none; }
I love working on other people's sites...the problem was javascript they were using to restyle form elements after click and I have no idea why. Solution was to remove that junk.
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");
}
}