Are there any tips available for me to enlarge my mouse cursor while hovering over some particular object ? (Sorry I am quite low with markup languages and stylesheet, please offer advice, hints and constructive information then feel free to downvote me :-( if you wish )
You should be able to find what your after using the CSS cursor property:
http://www.w3schools.com/cssref/pr_class_cursor.asp
I do not believe you can resize the cursor per-say, as the browser is in control of the cursor. However you can specify your own image as the cursor via "url":
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=url%28smiley.gif%29,url%28myBall.cur%29,auto
(you may need to create a javascript workaround for old browsers that don't support URL):
The actual appearance of the mouse cursor depends on the browser and OS configuration, there is no way to alter the default ones.
You can however, attach you custom image with the cursor (this is less than ideal but the only workaround IMO)
.customCursor { cursor: url(cursor.cur),default; }
In the above example, you're telling the browser to use your custom cursor, if not fallback to default one.
There's no way to tell the browser (or, at least, no cross-browser way) to simply make its cursor bigger. You can, however, use your own image for a cursor:
.your-class:hover { cursor: url(/img/your_cursor.png), pointer; }
According to the Mozilla docs, it's supported by most browsers nowadays.
Related
Mouse Cursor styling, like Col-Resize and Not-Allowed
See Examples Here
do not seem to apply to the mouse that appears on a phone or tablet through USB OTG. Any way to apply CSS, Javascript or other styles to the OTG mouse?
It is actually Android's kernel that doesn't support different mouse cursors. Even in the app IDE's it is impossible to change the cursor without drawing on top of it. People don't typically use mice on mobile devices for Internet browsing therefore that's why it is not implemented.
If you're absolutely looking for a solution, you will have to host your webpage inside an app container with a WebView and use Android's Javascript Communication Interface to detect the mouse hovers, and a System Overlay to draw on top the mouse cursor. It is a difficult implementation but it is the only solution for the specific situation. I can maybe help you out with the implementation if you request.
Happy developing,
According to Mozilla on this page (scroll down to Browser Compatibility and click the Mobile tab) the question, even of which features might be available for a Mouse cursor that doesn't generally appear on Mobile, remains an unknown, or maybe up in the air. As more OTG applications take hold (one thinks of the usefulness of a tailored mouse in certain game environments - crosshairs, anyone?) perhaps the spec will rise to the occasion...
In Chrome DevTools, under Rendering, there's an option to "Show potential scroll bottlenecks".
When I enabled this, some div elements I have on the screen with overflow:scroll show a flag at the top saying "repaints on scroll."
I can't find a lot of documentation on this feature, and I don't know whether it's something I can actually fix or improve upon, or just a statement of fact - the divs have content, and they do indeed scroll.
You can apply this CSS on the div with overflow: scroll or overflow: auto that create scroll bottlenecks.
transform: translateZ(0);
-webkit-transform: translateZ(0);
That will force the browser to create a new layer to paint this element, and sometimes fix scroll bottlenecks (especially with Webkit).
Although the accepted answer solves the problem, it is worth looking at the CSS will-change property. This is preferred over transform: translateZ(0); in recent times. Here is an that article explains the difference in detail - https://dev.opera.com/articles/css-will-change-property/
.scroll-container {
will-change: transform;
}
This amazingly took me multiple days to track down what was going on, and only because I saw the one side-comment at the end of a bug report at
Chromium bugtracker Issue 514303. Here's what's going on and how to fix it:
There exists a concept called "LCD text", which I believe means subpixel antialiasing, i.e. "crisper sharper text". Unfortunately, this feature is mutually incompatible with compositor-accelerated scrolling.
LCD text is enabled by default (at least on Blink/Webkit?) on all platforms which are not high-DPI (most normal monitors; i.e. you can check console.log(devicePixelRatio)). On the other hand, LCD text is DISABLED by default on high-DPI devices (think Retina display, or most mobile devices and tablets) since you don't really need a "crisper sharper text" feature on high-DPI platforms.
Therefore the opposite is true for compositor-accelerated scrolling: it is only possible on high-DPI platform where LCD text is disabled.
However, you can force compositor-accelerated scrolling on most monitors by promoting the overflow:scroll element to its own layer, by either adding will-change:transform to that element, or any hackish equivalent which will force the overflow element to be the parent of its own layer (such as transform:translateZ(0)). (Do note that vendor prefixes are being removed.)
tl;dr: Chrome doesn't suppose both subpixel antialiasing AND gpu-assisted scrolling; pick one or the other. Subpixel antialiasing is the default pick on Chrome (except on cellphones and retina displays, because their text is so small you don't need the feature, so you won't notice this issue on those platforms). Override this by forcing the element into its own compositor Layer with will-change:transform (but note that maybe your text won't look crystal perfect).
Nope, you cant modify that, it is a Chrome function to allow you to know, what's painted each update in the window.
Updates can be a lot of different things (scroll, mousemove, interval, requestanimationframe,...).
But, now you know that, you can enhance your code.
If (I dont know), the browser alway re-paint a div if it is set to overflow scroll you maybe can do some JS to set to overflow hidden when out of screen...
This post talk about different Browser layout
Having a blurred image is one of the main aesthetic features on my website. So far I am using CSS3 filter blur() to create the blur, but I know this is not supported in neither Firefox nor Internet Explorer. I was wondering is there an alternative, maybe JavaScript/jQuery, which will help me create the blurred effect I am looking for?
There are plenty of JS libraries that blur images.
BlurJS
VagueJS
StackBlur Algorhythm
Anyway, if you're using a static blurred image (i.e., no need to unblur/blur it again), I'd say you should go with a normal bitmap image. That might help to avoid unnecessary CPU load on the browser and compatibility issues.
See if blur.js, a jQuery plugin, does the trick for you. Essentially, what it does is move your image to a <canvas>, and does the blurring effects there. See a more comprehensive article on the topic: Effects for the Web!.
I would like to enhance a depth effect by hiding the mouse cursor as it passes over a div, is there a method that will work across all browsers?
Finding something that works across browsers is a pain.
The code below works on Chrome, IE, and Firefox.
IE likes .cur files, Chrome likes the embedded png, and some browsers actually respect the none :)
#div {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
url(images/blank.cur),
none !important;
}
Looks like:
/* css */
div {
cursor: url(url/to/transparent.gif), auto;
}
should do the trick or:
divEl.style.cursor = 'url(path/to/transparent.gif), auto'; // javascript
But hiding the cursor can annoy visitors immensly.
Addendum: In the examples I wrote .gif files, but you might actually need to convert to .cur or .ani files for better browser support.
Why don't you simply reduce the size of the cursor as it gets closer to the center of the deep field?
You can change the type of cursor you use (pointer, help, crosshair,...) but to hide it... Even if this would be possible in modern browers, older browsers won't support this. Also I can't imagine why you would hide the cursor.
EDIT: in firefox when adding cursor:none; to the body element it hides the cursor untill I go over a link, it's maybe a start.
Using a full transparent picture will not help. (It won't let you do that:()
You should use a 1x1 1% transparent image instead, plus cursor:none.
How can I replace the scrollbar's images using HTML/CSS?
I have:
scrollbar-base-color: #00acee;
scrollbar-dark-shadow-color: #00acee;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #00acee;
scrollbar-shadow-color: #00acee;
scrollbar-highlight-color: #00acee;
scrollbar-3d-light-color: #00acee;
Can I use an image to accomplish the same idea?
No you can't use images in place of the scroll bar. I'll also just mention that changing the colours is very annoying to users and it only works in IE anyway, so just stick with the standard GUI elements.
For webkit based browsers (for a sufficiently new value of "webkit") there are a collection of propriety CSS properties.
No, you can't use an image in the scroll bar. (Also, even changing the color is only supported in IE in non-standard mode.)
The only way to use images in a scroll bar would be not to use the standard scroll bar at all, but implement a replacement scroll bar yourself using DHTML, or find someone who has done that already.
However, you should be a bit restrictive when changing the look of controls that the users are already used to. If you are not careful you may end up confusing people so that they don't even recognise it as a scroll bar at all...
It is not possible to put an image inside the scrollbar. Customizing the scrollbar is not a W3C spec (IE only CSS), but details on what is possible can be found here:
http://www.quirksmode.org/css/scrollbars.html
as far as i know you cant style a scroll bar with an image.
if you want to use jquery, you can do so easily using this jquery plugin:
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
The trick there is to "simulate" a scroll bar using some divs, which you can style any way you want, since they are just regular divs. After that its easy to just use the scrollTop property and scroll events etc (but you dont really need to know how it works to use it)
For MooTools, there's MooScroller.
Steve
jScrollPane (demo)
or
Interface (demo).
Both using jQuery.
Webkit == Safari and Chrome, but Firefox and Opera have plans to implement similar in upcoming releases. The spec is a killer though, so it may not be worth using even if you have the support.
Mootools has quite a few:
Mooscroller (will be
implemented into Mootools -more),
MooScroll (based on
Solutaire's?)
UvumiScroll
MochaUI's
I imagine it is part of Ext UI, and probably JQ's UI library, but have no personal experience there.
One non-library dependent class: http://www.hesido.com/web.php?page=customscrollbar