Change cursor color on web page? - javascript

Is it possible to change the color of the mouse pointer, so it matches the theme of your web site?

Not the color. You can create your own cursor image though, and apply it in css with the cursor property:
body {
cursor: url(myCursor.cur);
}
This page is relevant.

The "cursor" CSS property can be given the URL of an image to use:
.foo { cursor: url(whatever/cursor.cur) auto;
Different browsers have differing support for this; Opera has none I think.

Related

Chrome scrollbar takes up space but is invisible till styled

I have a PWA where I turn off scrollbars. for Chrome I've used: -
::-webkit-scrollbar {
display: none;
}
Now for non-touch PC users I want to turn scrollbars on for certain elements. The problem is when I get rid of "Display: None" I get the space for a scrollbar but it's invisible. When I style it (eg: background-color) I can see it.
Why is it invisible?
Just make document scrollbar invisible, pseudo selector can be tied to an element.
html::-webkit-scrollbar,
body::-webkit-scrollbar {
display: none;
}
Spewin' When you define the pseudo element you have to take control of ALL attributes :-(
Remove the CSS pseudo-element definition completely an the scrollbars go back to defaults.

Change cursor pointer to a custom icon

I would like to change the cursor property to imply that the user needs to double click.
Are there any additional icons besides the default one's that can be applied? I saw a list here:
W3Schools
But I need the cursor to look like a pointer with two fingers, or some other icon which is better representation for double click.
You can basically use any image you want.
Use cursor: url(your-image-path.png), auto;
div {
cursor: url(http://65.media.tumblr.com/avatar_91989eab746d_96.png), auto;
}
<div>
Winter is coming
</div>
Original fiddle: JSFiddle
For IE support you will need to use .cur format

On hovering mouse to close button hand is not appearing

I have written piece of javascript for close button, but when i hover my mouse to close button mouse icon is not changing to hand, so i am not able to close it, however hand appears at some points of the close button
I am facing this issue on firefox and chrome
IE is working fine
Below is some part of it
href="javascript:closeWin()"
keephref="javascript:closeWin()"
style="cursor: default;
Below is its css
element.style {
cursor: default;
}
The default is the normal arrow. Pointer is the hand.
style="cursor: pointer;
element.style {
cursor: pointer;
}
Add CSS cursor:pointer; which shows a pointing hand cursor.
If you are using <a> tag then dont add cursor:default; to it because an <a> tag already displays pointing cursor.
If you want to show hand cursor use this CSS for your close anchor
a.close {
cursor: default; /* modern browsers */
cursor: hand; /* old IE - property is ignored by others */
}
If the tag is a link, remove the style since the href will give the hand
Close
I do not know what you need the keephref for, but it is not recommended to use javascript: protocol for a link
As AlienArrays and Zword said, the default cursor means normal arrow cursor.
If you want the default browser behaviour over an element, use:
style="cursor: auto;"
You can also use the pointer value if you want to force "hand" style cursor, ie. to indicate that something that normally is not clickable will perform an action when clicked.
You can check :hover attribute in css
#element :hover
{
cursor:pointer;
}

Customize mouse pointer with css or jquery

I want change div mouse pointer icon when div:hover active with my own png icon. how can I do that with css ,jquery, javasript ?
Using CSS :
#yourDivId:hover {
cursor:url('yourPath.png'), crosshair;
}
Note that it's better to provide a fallback (separate values with commas). Here crosshair will be used if yourPath.png can't be used.

background image not visible in iPad Safari

I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;
#rightContent .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}
Please help. Thank you.
I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).
When a browser sees a style they don't know what to do with, they usually ignore the whole style. Putting the background-image onto it's own line (eg. it's own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn't know about.
I believe the default value of background-color is transparent. Have you tried not setting a color? Also, since you have a set image with no-repeat, why not make the image a jpg/png and set a color to match the background-color you want.
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I am having the same problem, but I found that the image slice I was using was too thin to display on iPad. It is a texture, so I was using a 15px slice and an x-repeat, which is fine in all browsers but not iPad. After some experimenting I found that the threshold for iPad seems to be 130px.

Categories

Resources