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.
Related
A responsive website that I style uses js to determine font sizes then applies classes that are used by css for various layout adjustments. In a nutshell, my js detects the resize of a span wrapped around a text character. The newest version of mobile Safari provides a font resize control and its zoom mechanism isn't triggering my detection js. Any ideas about events or other changes that I can use to detect mobile Safari's font resizing? Maybe a css media query? I tried a solution based on js intersectionobserver: worked on desktop but not mobile :-(
According to MDN
The text-size-adjust CSS property controls the text inflation
algorithm used on some smartphones and tablets. Other browsers will
ignore this property.
Be sure to include CSS properties such as
/* Keyword values */
text-size-adjust: none;
text-size-adjust: auto;
/* <percentage> value */
text-size-adjust: 80%;
/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;
However, only non-percentage values are supported in Safari for iOS.
Also, consider looking at Apple's documentation.
which explains how percentages for a text-resize factor can be used.
html {-webkit-text-size-adjust:200%}
I am not sure which one of these is correct since they conflict each other. You would have to true for yourself and see what works best for you.
PS: Be sure to include -webkit- prefix for mentioned properties to make sure it works for safari and other WebKit browsers.
So what mobile safari does is: when the font is enlarged, it's actually the viewport becoming narrower. There is a widely supported window.matchMedia(media query here) method that returns a "media query object" to which a listener can be added. In my case, I want to know when the viewport is narrower than apx. 320px ... in which case I'll apply my styling classes.
I have a button with an icon, whose source is an SVG of ~4kb. When I hover over the button, I want the icon to invert in color, changing from black to white. To achieve this effect, is it better to use CSS like so:
#btn:hover #icon-img {
-webkit-filter: invert(1);
filter: invert(1);
}
...or is it better (e.g. faster/best practice/better for memory) to manipulate the image source directly and add a white version of the icon like so?
document.getElementById('btn').addEventListener('mouseover', (e) => {
document.getElementById('icon-img').src = 'white-image.svg';
}
As a rule of thumb, CSS solutions are a better approach that JS-based ones.
The main problem with CSS (specially regarding new fancy features) is support:
Browser support for filter property (MDN)
As you can see, you are out of luck if you want to support IE (althought Internet Explorer 4.0 to 9.0 implemented a non-standard and deprecated filter property).
As #guest271314 has pointed out, your JS solution will trigger a new request to the server... you could consider using sprites or data URIs to avoid it.
Use css to not make additional network request for image at each mouseover event.
Hoping someone can steer me in the right direction as I've been trying to accomplish this task for a few hours and can't seem to come up with a working cross-browser combination of CSS / Javascript.
Basically, what I am trying to do is a "Card Flip" using CSS and Javascript.
The code works wonderfully in Google Chrome, but I can't seem to get it to work in IE9/10.
Here is a sample jsFiddle.
When viewing the same jsfiddle in IE10, you only see the back side of the card and the animation does not work.
Any suggestions?
Ignore this - need a code snippet to post the above jsFiddle link.
The jsFiddle sample is only working for Chrome (more precisely, webkit browsers).
This is quite logic, as only css -webkit properties are used here.
The Card Flip animation you want to use should also work perfectly for IE10 (And Firefox even not mentioned in your question)
Check out the W3school page for more details on the 3D Transforms CSS properties you'll need to use.
Now the problem: IE9.
IE9 do not provide CSS animations. You'll have to use a fallback
with Javascript (jquery animate).
IE9 do no provide rotatey possibility. BUT, it provides flipX.
Yes, you will not have the 3D effect, but you'll still have the
flip effect.
The IE9 flip property is
filter: FlipH;
-ms-filter: "FlipH";
I have a problem with a navigation menu for which I have applied pie.js (library that allows you to have css3 on ie6-8 browsers). Works well at first sight but if we will play a little bit with the menu, wrong behavior will raise:(. To receive that strange behavior you must move cursor a little faster left and right over the drop-down menu on IE8. This is a function through I call js library.
$(document).ready(function(){
if (window.PIE) {
$('.aahov,ul#menu,ul#menu li ul').each(function(){
PIE.attach(this);
});
}
});
Check this example: http://mainpage.ueuo.com
...and don't forget, only on IE8 browsers ...
Thank's.
It might just be IE8 adding some extra padding.
I noticed from your css that you aren't using a css reset which may help to eliminate browser based differences.
You could have a look at http://meyerweb.com/eric/tools/css/reset/ or something similar.
Also IE8 doesn't support last-child
ul#menu li ul li:last-child{ border-bottom:none; }
So this will also affect the look of your menu items.
Also as a side note from a usability point of view it would be good practice to let the user know that the menu link is a drop down. Possibly add a down arrow to the right of the link.
Your scripting looks good to me, it looks like it's something in your styling. Not really sure what you have there, but you might be able to work it around to use overflow:hidden, or at least that might be a place to start.
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.