When moving over a dragable element I want the cursor to change to a hand and upon mouse down until mouse up I want to change to a "grabbing" hand. What is the proper, cross browser compatible way to do this?
Googling this only brings up websites from year two thousand, with tutorials on IE6. BLA!
Are there any good MODERN tutorials on this topic out there? If not, someone needs to write one. That'd make an excellent smashing magazine article!
Using the jQuery framework, you could do something like this:
// define a hover event so that when you hover over and out of the dragable element
// the cursor changes accordingly
$('#element').hover(function(){
$(this).css('cursor','move');
} , function(){
$(this).css('cursor','default');
});
// this cursor property is only supported in mozilla, but here you can insert
// an image as other posters have specified
// this event changes the cursor when you click the dragable element
$('#element').mousedown(function(){
$(this).css('cursor','-moz-grabbing');
});
// this event changes the cursor back to the default type after you let go
// of the dragable element
$('#element').mouseup(function() {
$(this).css('cursor','default');
});
For a live example, check this out: http://jsfiddle.net/EaEe3/ Let me know if you need more information. I hope this helps.
The propper way is to use cursor rule default values, as 'move' in your case.
If you want a custom cursor you must have a .cur file for IE and a png/gif file for others, so you can write
cursor:url(notie.png),url(ie.cur),move;
Using CSS:
http://www.w3schools.com/css/pr_class_cursor.asp
.myElement {
cursor: move;
}
.myCustomCursor {
cursor: url(myCoolCursor.gif);
}
Related
Here is a Fiddle, to show my current state: (attempting onClick())
http://jsfiddle.net/D5N4f/7/
$('.associationLinks').click(function () {
alert("I've been clicked"); //test to see if click is working
//$(this).next().toggle();
$(this.content).toggle();
//$(this .content').css("display", "block");
});
here is a version of the working HOVER, that I need to convert to onClick:
http://jsfiddle.net/D5N4f/6/
This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.
Do I need to use jQuery for this? (I havent been able to get it to work)
the content I want displayed starts off as display:none..
I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)
the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)
Please use the fiddle example instead of just random code suggestions! Thanks!
I removed the following CSS:
/*.associationLinks:hover .content {
display:block;
}*/
I also use a .children() selector to get the content div to display, and I change it's CSS on a click.
Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.
I want to reset the background image of a textbox when it receives focus. How can I do this?
If 'reset' means to clear out the background-image permanently, you'll need to manipulate the CSS via javascript events.
For example, if you use jQuery - you can do this:
$('input#some_id').focus(
function(){
$(this).css('background-image', 'none');
}
);
Other JS libraries have similar functionality. If you aren't yet using a JS library, you may want to seriously consider it.
If you simply need to 'reset' temporarily until the focus leaves, you can use the ':focus' css pseudoclass like this:
input#some_id:focus
{
background-image: none;
}
Something like this should work:
$("input").focus(function(){
$("input").css("background-color","#FFFFCC"); //adjust for background-image
});
$("input").blur(function(){
$("input").css("background-color","#ffffff"); //adjust for background-image
});
Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.
I am using asp.net 3.5 and C#.
I want to change my mouse cursor similar to this site
http://dummyblogtrix.blogspot.com/
How can I do the same ?
Please help.
Thanks in advance
Don't. Just Don't.
Or set the cursor style on the body tag.
In order to set a 'special' non-windows icon, you have to reference a URL to a cursor icon (.cur).
body
{
cursor:url(customCursor.cur);
}
However, I highly recommend you do not set a custom cursor. It will only serve to annoy users.
I do believe this will cause all other pointers to be overridden. I.e. your anchor tags would also use the custom icon. If you wanted to keep the standard icon, you'd have to set the cursor on all the other standard html tags, i.e.:
a
{
cursor:pointer;
}
Use the CSS cursor attribute
CSS Cursor
W3C
I have a data entry web app where the control that has focus is given a yellow background color (and when the user navigates away, it turns back to white). The script to do this came from I-don't-know-where, and it breaks in IE7 causing all sorts of problems, like drop downs not working (the script was designed to work on textboxes and drop downs, or at least it was implemented with that in mind), and it works in ie6.
Some of my users have been switched to Ie7 without my being informed, and the rest will go to ie7 at some future time. So, I'd like to implement a friendlier solution. I really like jquery and am already using it on the app for a variety of things. Also, it has been suggested that cross browser support may/will eventually be important on the intranet.
What I would prefer to avoid is manually adding a bunch of onblur="SomeMethod()" (or something similar) to the controls (There must be 600+ in the app). In fact, if I tell my boss this he's probably going to throw something at me.
I am already using JQuery in the application. Where it is used function calls are explicit, and are all called in onblur.
Currently, I am of the mind to do something like this:
$(document).ready (function(
$(':text').focus(function()
{
//Do Highlighting
}
$(':text').blur(function()
{
//Good bye highlighting
}
)
Am I on he right track? Is onblur my best option? Is there a better way?
the other onblur functions show/hide child fields based on the value of the parent. I realize I am not providing code, but am I setting myself up for any conflicts?
Use jQuery's blur() and focus() methods.
Also, I think you mean to REMOVE highlighting with your blur function (blur means the user has clicked off of the element in question). Use focus() to turn on the highlighting.
$(document).ready (function() {
$(':text').focus(function() {
$(this).addClass('highlight');
});
$(':text').blur(function() {
$(this).removeClass('highlight');
});
});
There seems to be a workaround that makes the :focus pseudo-class work in IE6/7. I haven't used it myself but I think it's quite a established solution:
http://www.xs4all.nl/~peterned/csshover.html
With 600+ elements, a scriptless workaround is probably preferable, especially if older clients are involved.
$('textarea, input:text').focus(function() {
$(this).addClass('hilite');
}).blur(function() {
$(this).removeClass('hilite')
});
.hilite {
border: 2px solid gray;
}
blur/focus will work for you. If you're able, at some point, to move all your users all the way to IE8 you can also accomplish the desired effect with CSS:
input[type=text]:focus {
background-color: lightyellow;
}
This doesn't answer your question, but is an alternative... jQuery Tools Expose will apply an overlay to all elements outside your input box thus forcing the user to focus on the input. It's a nice feature and the plugin is very lightweight. I also posted some coding that does the same thing in this answer in case you don't want to use a plugin.
There is a free widget library for this task: Focus highlight widget.