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.
Related
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.
I have a pure CSS menu and would like to provide a little visual feedback. As the cursor passes over an item, I would like it to magnify to 110% or 120% of its normal size.
I just use text in an unordered list, no images.
Can this be done easily?
Update: MS IE 7+ (any thing else is a bonus & probably free anyway)
You don't really need JavaScript for this. CSS has the transform property to apply affine transforms to elements. Just do something like li:hover { transform: scale(1.2); }.
It works in all recent version of Safari and Firefox, and IE 9 and newer — and if you're open to JavaScript solutions, Transformie adds support for 6+.
I made a Fiddle to illustrate (includes all the browser prefix versions, but I didn't actually test it in all the browsers, so I might have bungled something somewhere).
Your best bet is to just adjust the font-size on hover:
li:hover {
font-size : 1.2em;
}
if you've defined everything in ems, the entire thing will adjust. If you have static margins/etc you want to scale, you're still better off just re-defining those in CSS, but you can also use the zoom or transform properties as Chuck pointed out.
I'm trying to stretch the background to fill the whole window with HTML/CSS.
I've seen a few solutions for this but they don't work.
Every solution i encounter won't work on all the browsers, either Chrome won't stretch it, or IE won't stretch it, and if they both do, firefox will be the problematic one.
Does anyone have a working solution, that will work on all browsers ? (don't mind some javascript)
I believe there is no way to do this without creating an img element, and setting its z-order to the bottom and then customizing the width of that. This page has details.
Edit: In the link it says to use position: fixed;. This will in only work in older versions of IE if you specify a doctype. Using absolute is a simple workaround as long as the element is a direct child of the body.
I had this problem a little while ago and I found that this website http://webdesign.about.com/od/css3/f/blfaqbgsize.htm had a very nicely written tutorial which explains it well, plus it worked for what I was looking for.
http://reisio.com/temp/stretch/
write a css for that in which the background image will be in body.like
body {
background-image: url("/images/bg.jpg");
background-repeat: no-repeat;
background-position:center top ;
}
This will keep the total image in the body.Try this hope it will work.
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}
Demo: http://www.simpsoncrazy.com/characters/poster2
(Using Map Hilight plugin: http://plugins.jquery.com/project/maphilight)
When you click a quadrant of the image, it should zoom in on that image, however in IE8 (regular and compat mode) the "zoomed" images never load. Also on the top-left segment the right arrow appears on the left.
I've looked at Firebug and IE Dev Tools but they seem largely the same apart from differing opacity definitions (IE uses filters).
I messed around with this, and I think I found the problem in the CSS... just remove the display:none; from here:
#imagemap .map {
position: absolute;
}
I have no idea why IE doesn't like it there.
Edit: LOL and UGH... I just looked at the front page of that site... there's a newer bigger poster LOL. All that work * smack forehead *
Try putting filter value in quotes
filter: Alpha('Opacity=0')