0

I have the following css in my style sheet, which Im applying to a div, to disable the hyperlinks in that div in certain conditions. But the style is working ine in FF but not in IE. What is the flaw in the style? Also can anyone let me know how to disabel a hyperlink, in IE and FF as well?

    pointer-events: none;
    cursor: default;

Basically I have pagination and to disable "prev" and "next" buttons im applying the above style.

Can someone pls provide a solution..

Phanimadhavi Vasantala
  • 225
  • 2
  • 6
  • 17
  • 3
    Which IE are you using ? – Vucko Jun 03 '13 at 09:54
  • 1
    http://caniuse.com/#search=pointer-events – Quentin Jun 03 '13 at 09:55
  • `pointer-events` is not supported by any version of IE (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events); `opacity` only in IE8 and up IIRC. – Pekka Jun 03 '13 at 09:55
  • And what compatibility mode is that version of IE in? – Quentin Jun 03 '13 at 09:55
  • 1
    IE doesn't support `pointer-events` at all, as Pekka said. To use `opacity` in IE8, see [this post](http://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8). And read this to see how to [disable a link](http://stackoverflow.com/questions/2091168/disable-a-link-using-css). – Vucko Jun 03 '13 at 10:03
  • 1
    In addition to what everyone else has said, please avoid using `!important` -- it's very rarely necessary. In cases where it is necessary, it often indicates poor quality code elsewhere. – Spudley Jun 03 '13 at 10:05
  • 1
    I'm going "ouch" over all these `!important` statements here. You shouldn't need them. – Marijke Luttekes Jun 03 '13 at 10:06
  • pointer-events: none; cursor: default;.. Even if i use this it doesnt work in IE.. I need something which works in IE as well.. – Phanimadhavi Vasantala Jun 03 '13 at 10:17

2 Answers2

3

From the pointer-events page at Mozilla developers network:

"Warning: The use of pointer-events in CSS for non-SVG elements 
is experimental. The feature used to be part of the CSS3 UI draft 
specification but, due to many open issues, has been postponed to CSS4."

Here is a related question: How to make Internet Explorer emulate pointer-events:none?

Also: IE-8 and below doesn't support opacity -- use filter: alpha(opacity=50) for those versions.

To disable hyperlinks across browsers, you'll need javascript:

document.getElementsById('myId').href = "javascript:void(0)";

update ...or with jQuery (and a condition):

if(myCount < 3){
    $('a#myId').attr('href', 'javascript:void(0)');
}
Community
  • 1
  • 1
Faust
  • 15,130
  • 9
  • 54
  • 111
  • Actually I have written jsquery code to trigger an oncLick event when the user cliks on 'prev' and 'next'. So there if the count is <3 im trying to disable the prev button by adding style, but somehow not working in IE.. – Phanimadhavi Vasantala Jun 03 '13 at 10:05
  • @PhanimadhaviVasantala: see update for jQuery version. – Faust Jun 03 '13 at 10:09
1

Pointer events are not fully supported so stay away if browser compatibility is important. Use jQuery to disable click or remove a href attr under conditions you require, as this is cross browser. It would still be better to do this server side unless JavaScript runs some content on the page.

Jamie Paterson
  • 426
  • 3
  • 10