Rotating Clickable Elements in IE8+

Clickable area rotated hyperlinks in IE?

Sadly i'm having the same issue when trying to turn a button for 90 degrees. The clickable area in IE is only on the top of the button. Shitty IE =[

I really don't want to use an image for a button...

Found out this thread: Rotating clickable elements in IE8+ maybe it will help you (and me)...

Text rotation 270 degrees not works in IE8

Your rotation seems to be working in IE8. However the rotated item is positioned incorrectly, so the rotated text is off the edge of the screen when you first view the page. It does show up when you hover and the box moves into view.

This is because IE8's filter style has a different rotation point from the standard CSS. It uses the top-left corner as the rotation point, whereas CSS defaults to the center. You'll need to modify one or other of them so that they use the same point. Then once you've positioned it correctly, it'll look the same in all browsers.

This isn't actually that easy to do -- in IE, you'll need to use a completely different rotation filter with complex matrix maths rather than the relatively easy rotation=3 that you have now -- so my recommendation would be to use a javascript polyfill called CSSSandpaper to make IE8 and earlier recognise the standard CSS rotation - it'll use the filter internally, but all you need is -sand-rotate(-90deg); alongside the other standard CSS variants.

This will make your code much easier to work with, and it'll work consistently across browsers.

To answer your second question -- yes, if you're using filter to do rotations, then it would be a good idea to put the filter styles in an IE<=8 specific block, because they interfere with IE9.

IE9 supports the standard CSS rotation, but also works with the filter, so in IE9 as things stand, you're getting both rotations, which is making it go completely wrong. (you end up with graphical corruption; it's not pretty).

However, if you're using CSS Sandpaper as I suggested above, then this point is irrelevant because it will detect which IE version you're on, and won't run in IE9, so in that case you won't need IE8-specific stylesheets.

ie11 css rotate - background element not clickable

For this to work in IE you can add pointer-events: none for .tab .content and bring back pointer-events to initial state for children of .tab .content.

Demo:

$(document).ready(function() {  $('button').click(function() {    alert('Button was clicked');  });})
* {  margin: 0;  padding: 0}
.container { width: 400px; height: 200px; position: relative; overflow: hidden;}
.container .tab { position: absolute; top: 0; left: 0; width: 185%; height: 140%; transform: translateX(-50%) rotate(-25deg); transform-origin: 50% 0; overflow: hidden;}
.container .tab .content { transform: rotate(25deg); transform-origin: 0 0; margin-left: 50%; position: relative; height: 75%; width: 55%;}
.container .tab-1 { z-index: 2;}
.container .tab-1 .content { background-color: red;}
.container .tab-2 { z-index: 1; height: 200%;}
.container .tab-2 .content { background-color: green;}
.container .tab-2 button { position: absolute; bottom: 37%; right: 20px;}
/* IE Hack: disable pointer-events */.container .tab .content { pointer-events: none;}
/* IE Hack: enable pointer-events for descendants */.container .tab .content > * { pointer-events: initial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <div class="tab tab-1">    <div class="content"></div>  </div>
<div class="tab tab-2"> <div class="content"> <button type="button"> Click me </button> </div> </div></div>

Overlay not clickable in IE8

The error, as you've already identified, stems from the use of -ms-filter. It seems that the act of applying the filter changes how the browser calculates the width and height, so the clickable area is reduced to the text within the pageblock div, and not the whole div itself.

The simplest solution would be to use a background image: a small 5px x 5px 60% transparent black .png will work just fine, will add a minimal footprint to your overall page size, has browser support from IE7 upwards, and will not overwrite the width/height declarations you've set for pageblock.

I can see a number of other issues with the code you posted; the z-indexing you've applied means that the loginbox will appear over the top of pageblock (is that intentional?). Also, you've specified that loginbox should appear 20px from the right of the page, but you've given it a width of 100%. That computes to a total width of 100% + 20px, which is wider than your page will display. Try and avoid mixing measurement units - either make the right pposition percentage-based and deduct it from the width declaration, or specify the with of loginbox in pixels. You'll save yourself a lot of headaches in the long run.

jquery ie8 hover issue – animation / color not working on filter rotated element

I don't know why this worked, but it did. Adding the line "opacity: 1.0" made the animation work in ie8. Something to do with combining microsoft css filters.

 //Nav hover
$('#nav li:not(.current)').hover(function() {
var bgColor = $(this).css('color');
$(this).animate({
backgroundColor: bgColor,
opacity: 1.0,
marginRight: '10px'
}, 200);
}, function() {
$(this).animate({
backgroundColor: '#000',
opacity: 1.0,
marginRight: '0px'
}, 200);
});

links on rotated div with css don't seem to work

remove the position:absolute; on the div that has the children <a> tag. This will fix your problem. When nesting clickable links inside an absolute positioned element, the <a> tag itself also has to be positioned absolute for it to be clickable, this is due to CSS priority. Why not just make the div that is position:absolute; to relative and then you wouldn't run into this issue. Or just make the <a> itself absolute. Simple fix!



Related Topics



Leave a reply



Submit