I want to add Custom set of cursor on my website. I have added that cursor but while hover anything that cursor change I have the Set of Pointers including both .ani & .cur required for my site. I have already tried :
This is the JavaScript that I used !
<script>
document.getElementsByTagName("body")[0].style.cursor = "url('cursor/blue.cur'), auto";
</script>
My cursor:
bluecursor
I have its Set , but I dunno the code to set while cursor for crosshair ,help , wait etc.
cursorset
Is this possible?
All supported cursors can be enabled through CSS: http://www.w3schools.com/cssref/pr_class_cursor.asp
If you have to do this with javascript it seems as a bether idea to have a class in your css with the desired behaviour/style and then only set that class with javascript.
If you want to do this, it is better to do it in css:
For example, if you wanted to have the cursor change to your custom cursor only when hovering over an anchor tag then you can do this:
a {
cursor: url(cursor/bluecursor.cur), auto;
}
If you wanted to have the cursor ALWAYS use custom cursors, then you have to decide when to use a special cursor. You can do this with classes:
.help {
cursor: url(cursor/help.cur), auto;
}
Then apply that class to the particular element that you want to display the custom cursor:
<div class="help">Help Me</div>
There is no way (to my knowledge) to simply tell the browser just replace all cursors with a custom set.
This code worked for me (not JS but jQuery):
$("body").css('cursor', 'url(arrow_blue.cur) , auto');
$(".button").mouseover(function(){
$(this).css('cursor', 'url(arrow_blue.cur) , auto');
});
Don't forget to override if there is any specific items like buttons, etc... Just defining a cursor for body does not cover the elements under, if something special is defined for them. So you have to override, for mouseover etc...
Related
I'm making an element (id="moveable1") draggable/moveable with Scriptaculous:
<script>new Draggable('moveable1');</script>
Using javascript - How can I best/easiest change the cursor style to 'move' (rather than use CSS - i.e. so it doesnt signify moveable if they don't have javascript).
I hoped to find it as a Scriptaculous option, but haven't ;(
Thank you both.
For the moment I've gone with:
<script>
new Draggable('moveable1');
document.getElementById("moveable1").style.cursor = "move";
// ... repeat for other moveable objects
</script>
As that seems easy to read and understand.
You could add it as CSS that only shows if Javascript is enabled, like this:
.js-enabled #moveable1 {
cursor: move
}
and then add a script to add the class to the body if JS is enabled:
<script>
document.body.className += ' js-enabled';
</script>
Take a look at the docs for the JS hover event. You have to use CSS to change the mouse pointer (info on how to do that here and here) but if your event is triggered by JavaScript then it's OK to modify the CSS. Because your CSS won't change if they don't have JS enabled.
I hope that makes sense. So to sum up: Use JS to trigger the event that changes the CSS.
To set or change the mouse cursor style for an element of your page from script, you can set the element's property element.style.cursor to one of the above values.
(Alternatively, without JavaScript, you can use the attribute style="cursor:value;" in that element's HTML tag.)
Example. The function setCursorByID below resets the mouse cursor style, given the input arguments id (the element ID) and cursorStyle (the desired cursor style):
function setCursorByID(id,cursorStyle) {
var elem;
if (document.getElementById &&
(elem=document.getElementById(id)) ) {
if (elem.style) elem.style.cursor=cursorStyle;
}
}
The following demo allows you to change the cursor styles for the highlighted elements (Element 1 and Element 2). In this demo, when you click on the hyperlink help, wait, crosshair, text, default, move, or pointer, the cursor is changed to the corresponding style for the entire highlighted element using the function setCursorByID from the above example.
When you click on the hyperlink auto, the cursor for the particular element is reset to its original style determined by the browser.
Element 1 Change cursor to any of these styles:
help wait move crosshair text default pointer auto
Element 2 Change cursor to any of these styles:
help wait move crosshair text default pointer auto
Specifically in a case like a user dragging the handle of a slider and the cursor momentarily (due to snapping) or longer (due to off axis drag) changes from the cursor specified in the css of the handle because the mouse is no longer over the handle. I've created an example to illustrate the issue.
How can I avoid this?
EDIT
Stephen Thomas's answer isn't sufficient because different elements might have different icons e.g. a horizontal slider handler getting ew-resize and a vertical one getting ns-resize and I haven't seen a way to reliably determine what to 'lock' the cursor to.
EDIT the second
With some minor changes to Jacob Grey's answer I figured out something that serves my needs. My tweak adds a css rule that I can toggle on <body> to force all descendant elements to inherit its cursor. This example shows the difference in behavior between Jacob Grey's solution and my tweaked solution.
<style> body.dragging { cursor: inherit !important; } </style>
<script>
var disableDragCursorOverride = function() {
$("body").removeClass("dragging");
$("html").css("cursor","auto")
.off("mouseup", disableDragCursorOverride);
};
$(selectorForDraggable).on("mousedown",function(e){
var cursor = $(e.target).css("cursor");
$("body").addClass("dragging");
$("html").css("cursor",cursor)
.on("mouseup", disableDragCursorOverride);
});
</script>
Not a lot of details in the question, but as a general approach:
Define a CSS rule something like:
.dragging {
cursor: pointer; /* or whatever */
}
When dragging starts, add that class to the <body> or some parent container:
$('body').addClass('dragging');
When dragging ends, remove the class:
$('body').removeClass('dragging');
Yes, it is very easily possible. As Stephen Thomas said, you can just add it to the body, but you want the cursor to be what ever you clicked on. That can be done like:
$('.slider').on("mousedown",function(e){
var cursor = $(e.target).css("cursor");
$("body").css("cursor",cursor);
});
$('body').on("mouseup",function(e){
$("body").css("cursor","auto");
});
That jQuery will get the cursor for what you click on, and add it to the body, as long as the mouse is down.
JSFiddle Demo
I have this JS code.
I want to show a "hand" cursor when I hover on the div like it would normally do for an a href.
$("#button1div").click(function(){
window.location = 'http://google.com';
});
How do I make the cursor change to a hand?
Thanks.
While you seem to want to do this with Javascript, there is a much easier way to do it with CSS alone:
#button1div {
cursor: pointer;
}
And, I'm not sure if you're really doing anything more than changing window.location when that div is clicked, but it looks like you could use an a element with no problem.
$("#button1div").css('cursor','pointer');
will set the cursor as hand symbol.
I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC
I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:
There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }
Hi im trying to make the Product Categories menu work on this page:
http://www.jaybrand.co.uk/p1.html
at the moment the page loads and CSS hover works to set the background position so that the graphic behind makes a roll over effect.
i put some javascript to set the background position to the roll over on click, but this knocks out the CSS hover:
onclick="setStyle('c1','backgroundPosition','0px 0px');
it means that c1:hover no longer works.. i tried putting !important in the CSS c1:hover background position and this fixed it in Firefox but not IE.
How can i write something in Javascript to also say:
onclick="setStyle('c1:hover','backgroundPosition','-276px 0px');
......... i know Javascript does not do hyphens and the way to get for example "background-position" in CSS is to ditch the hyphen and make "P"osition capitol. perhaps something can be done also to get to the CSS hover attribute?
When you set an element's style.backgroundPosition, it's the same as setting an inline style="background-position: ..." attribute. Since inline style attributes override stylesheet rules, the hover/non-hover rules can never again affect the background position.
You could remove the backgroundPosition rule for elements being unselected so that the stylesheet rules can shine through. But really, your code needs a serious refactoring: manually setting every background position in the onclick is ugly and unmaintainable.
Instead, switch a class around to flag the selected link, eg. styled like this:
.c { background: url(...); }
#c1.selected, #c1:hover { background-position: -276px 0; }
#c2.selected, #c2:hover { background-position: -276px -61px; }
...
markup:
<h2><a class="c selected" id="c1" href="#productcats">Products</a></h2>
<a class="c" id="c2" href="#rice">Rice</a>
...
(a-inside-h2 because the other way around is invalid.)
script:
var selected= $('#c1');
$('.c').click(function() {
// Move the 'selected' class to the new element
//
selected.removeClass('selected');
selected= $(this);
$(this).addClass('selected');
// Scroll target element into view
//
var y= $(this.hash).offset().top-$('#slide').offset().top;
$('#slide').animate({top: -y+'px'}, {duration: 450, queue: false});
return false;
});
Note this uses the href of the links to point to where they go, which will improve accessibility on non-visual browsers. You should also add some code to look at the location.hash on page load and if you see something there, scroll that page into view. Otherwise, it will be impossible to bookmark one of your subpages, or to middle-click-new-tab the links or anything like that.
I was doing something similar the other day, not 100% sure but this might help push you in the right direction..
onclick="document.getElementById('c1:hover').style.cssText='backgroundPosition: -276px 0px;';"