I am using the css custom cursor to use an image for the cursor. The image doesn't work. What is wrong with this code?
Here is the image used. Fiddle
cursor: url('http://www.sarkelliancreed.comule.com/pics/TREES.jpg'), auto;
I was dealing with this problem last night. The issue is that there is a limit to the size of the image you can use as a cursor. If you really need an image that large to follow the cursor, have a div with that image snap to the cursor position on the mousemove event.
MDN at least describes the size limit for Firefox:
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
MDN documentation for cursor property in CSS
Put in a 32x32 png rather than the image you're using as the URL and run the Fiddle again, and it works. Example image: https://upload.wikimedia.org/wikipedia/commons/1/1d/Smile_icon_32x32.png
Any type of file format won't work, only .cur files.
cursor: url('http://www.sarkelliancreed.comule.com/pics/TREES.cur'), auto;
source: https://fb.watch/dRdLF-vwD2/
Related
I want to change simple cursor to image, so i have this code which isnt working
html{
cursor: url(image/cursor.ico), auto;
}
body{
cursor: url(image/cursor.ico), auto;
}
*{
cursor: url(image/cursor.ico), auto;
}
What is wrong here?
Your problem is probably not with your CSS code (although I recommend double checking the link to your image).
MDN says this:
While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels.
I had an image that didn't work, changing the size to 32x32 indeed solved the problem!
Am I missing something very obvious here? I'm trying to replace the cursor css property with a png as demonstrated here
I have it working with the demo 'happy.png' but can't understand why its not working with my 'call-me-hand.png'
.next {
cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
cursor: url("https://robcleaton.github.io/warface/assets/images/call-me-hand.png"), auto;
}
CodePen
The cursor property has limits on the url value based on Browsers and OS. For example, Images larger than 128 x 128 Pixels aren't supported on Firefox. To make it work, reduce the dimensions of the given image.
Further information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
I tried your pen using this link and... it worked! Not sure why it doesn't with yours though...
EDITED:
I have used tinymce editor to add text with external toolbar, Please look into it TINYMCE-DEMO
And everything is working same as i have mentioned below.
I have a transformed(scaled) div element with contentEditable="true". Now the problem is when I start typing on this div box then the blinking cursor sometime get hide in Firefox, but in chrome it is working perfectly. I don't understand what is wrong with this code.
Here is my code:
HTML-
<div contentEditable="true" id="textbox" class="scaleDiv">Add Text Here...</div>
CSS-
<style>
#textbox { width:400px;height:250px;background:#FFC0CB;word-wrap:break-word; padding:5px;}
.scaleDiv { -moz-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);}
</style>
And Here is the
DEMO
If you move your cursor after typing from left to right or right to left then you can see the cursor - sometimes get visible and sometimes get hide.
Please Help...
It will be down to the use of different aliasing methods when scaling, or the fact that Chrome makes a concerted effort to keep the cursor alive. What is happening in FireFox is that at certain points the single vertical line (i.e. cursor) is being scaled away, this happens sometimes when using certain types of scaling, like nearest neighbour. This problem could be OS specific, I see it with the FF 26.0 on Windows.
For example:
Take this image:
And then scale it 0.75 (I've used PhotoShop and Nearest Neighbour here, but the principal is the same)
As you can see some of the lines have vanished.
Basically you need to look into if it is possible to change the type of scaling used in FireFox and with CSS. Sadly, from what I can see so far, it is only possible for images using the image-rendering css property or the Microsoft non-standard -ms-interpolation-mode...
Given the SVG file at http://dpaste.com/756156/ when I display it in a <object> or <embed> tag, about half the time it loads in Firefox the bottom portion of the image is cut off. Using inline CSS renders it fine, and Chrome and IE9 render properly as well.
I've seen suggestions to add width and height attributes of "100%" to the SVG tag, but that hasn't helped. Any ideas?
Having just suffered this issue myself [svg being clipped in firefox] I found a solution.
It's a bit random and has no logic, but it fixed the issue for me.
My svg was a simple "cloud" shape drawn with Illustrator using bezier curves.
No matter how many times I drew it, the right-hand side (kind of a bubble shape) was being clipped by the browser. No amount of adjusting parameters (such as viewBox, x, y, width, height) would fix it. - It was still clipped. In fact by adjusting these parameters it became obvious that it wasn't caused by any of them.
The solution was to add more data to the curve. I simply added another anchor-point on the curve that was being clipped, and hey presto it rendered properly in firefox.
Random but true. Hope this helps
This might be caused by Firefox rendering the SVG before loading the stylesheet, then not realizing that it needs to update it. Try changing the classname of the SVG tag in the onload event (JavaScript), as suggested by this page: http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript
If that doesn't work? Try completely regenerating the element with elm.parentNode.innerHTML += '' as suggested in the comments to this StackOverflow question: https://stackoverflow.com/a/2922034/638544
This is what worked for me, after dealing with multiple chart libraries.
First, set the chart's SVG to visibility: hidden; in the CSS eg.(#pie_chart .ct-chart-pie {visibility: hidden;} )
Then re-render the chart and change visibility to visible.
function show_popup(){
Chartist.Pie('#pie_chart', data, options, responsiveOptions);
$("#pie_chart .ct-chart-pie").attr("style","visibility:visible !important;");
};
window.setTimeout( show_popup, 1 );
This was fixed recently by bug 1063073. The fix will appear in Firefox 34, after that workarounds will no longer be necessary.
I am trying to create a custom cursor using the following image:
http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png
The image size must be retained. I've tried simply to use body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }, though that doesn't work in FF/Chrome. (not even checking other browsers)
What's the reason for it not working?
The problem is not just with your css code lacking second argument but with the image file.
If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.
You might also want "pointer" rather than auto, judging by the look of the image;
cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;
EDIT:
i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info
Firefox requires a second non-url argument such as
cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), auto;
There is a great reference at Quirksmode CSS2 - Cursor Styles
The reason this is not working is maybe that you're doing this:
cursor:url(https://example.com/example.png)
You have to add , auto after the statement. Therefore, this is what you are looking for.
cursor:url(https://example.com/example.png),auto;
Here's the clippet.
button {cursor:url("data:image/x-icon;base64,AAACAAEAICAAAAAAAACoCAAAFgAAACgAAAAgAAAAQAAAAAEACAAAAAAAAAQAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAP8IAP8RAAAA/+YABP8AAAD/iAAAav8AAP+3AACi/wALCxIAAHP/APL/AAAA6v8AALv/AACV/wDQ/wAAAP8RAAD/9wAAe/8AACb/AABV/wAAAP8A/8gAAP/3AAAA+/8AAP8aAF7/AAAA/1EA/wCzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAFQAAAA4AAAAAAAAVABgAAAAAAAAAAAAAAAAAAAAAAAAGEQAADAAJAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAABEEAAAZAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAsACQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVAAAcCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMAAAkAAAAJCQkJAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAACQAACQAAAAAAAAAcAAAAAAAAAAAAAAAAAAAAAAAKAAAACQkcAgsZDA4VABUAAAAAAAAAAAAAAAAAAAAAAA0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBRsBGg8WAAAEEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBEGFQAAAAAAAAAAAAAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxAXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP////////////////////////////////////////////////8/////H////w////cPH//zDg//8Q5P//AOD//wDx//8A////AP///wH///8DgH//AwA//wAAH/4AAB/+AAf//AAD//wAAf/4AAD/+Af///Af///wf///8f////"),auto;}
<button>Hover over me!</button>
Is this what you looked for?