I have a dynamic generated ImageButtons in a ListView, In ItemDataBound if an image have no link i need to make it disabled, i have tried the following,
img.Enabled = False
img.DescriptionUrl = "javascript:void(0);"
img.PostBackUrl = "javascript:void(0);"
img.CssClass = "imageButtonClass"
img.Style.Add(HtmlTextWriterStyle.Cursor, "pointer")
CSS:
.imageButtonClass
{
cursor:pointer;
}
That's made the targeted images disabled in all browsers , however, The cursor changed to pointer in IE only. Not in Firefox and Chrome!
Any suggestions?
Be sure you have declared a doctype. That is the source of most cross-browser inconsistency issues.
Most new pages should be using the HTML 5 doctype as follows:
<!DOCTYPE html>
It might also help if you compare your example with this working one: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor. As you can see, this works fine in FireFox. Note the doctype declaration at the top of the page.
Related
I want to add Custom set of cursor on my website.
How can i add a set of Cursors in Website using css/html/js ?
So , Default mouse pointer is different, when i hover hyperlink its diff,,.. n so on.
I need help with css code.
I have the Set of Pointers including both .ani & .cur required for my site.
I have already tried :-
These codes in my style.css
body, a:hover {cursor: url(cursor/blue.cur), progress !important;}
Still no luck !
I have a master page and what I want is to assign a default custom cursor to the page and have all links use another custom cursor
Is this possible?
<script>
document.getElementsByTagName("body")[0].style.cursor = "url('cursor/blue.cur'), auto";
</script>
this must work IE 6+
With css you can do that:
body {cursor: URL(imageFileUrl);}
If you need more information read this.
EDIT: This worked for me: <body style="cursor: url('cursor.jpg'), default">
The imagen that I've used is a jpg 32x32.
I'm experiencing a major bug in IE 11 (latest version 11.0.9600.16521 on Windows 7). When on any form if I open a select dropdown all the other form fields on the page freeze. I can 'unfreeze' them by adjusting the Window size (causing a redraw). This seems to happen on any form what-so-ever.
To reproduce:
Open IE 11.0.9600.16521
Go to http://www.wikipedia.org/
Select any language from the language dropdown
Result:
language dropdown does not appear to get updated on the screen
the search box appears to be frozen - i.e. focus on select box and start typing but no text appears. However if you adjust the window size the form fields are updated and go back to working as normal (until you interact with another select element)
I can't find much in Google for this issue so maybe it's just something specific to my settings. Only thing that sounds somewhat similar to what I'm experiencing is this: http://connect.microsoft.com/IE/feedback/details/806679/ie-11-desktop-selecting-an-item-from-a-drop-down-list-on-a-webpage-causes-the-tab-to-crash. Anyone else able to reproduce this?
I had a similar issue with IE11 that turned out to be any modification to the .text property of an SELECT-option element. I eventually found the "hint" on stackoverflow here
How to fix IE select issue when dynamically changing options.
In my case I use straight JavaScript, and with so many inter-dependent SELECT boxes had to come up with a generic solution, so my solution was to intercept (defineGetter) assignment to any .text property of an HTMLOptionElement, and set a 1 ms timer to perform an add element and remove element as in the referenced post that is titled "I have the fix. We have to add and remove options list to trigger the rendering in IE8." Notice the reference to IE8, AFAIK IE has had several issues with SELECT boxes since at least IE7, possibly earlier.
So the code I added to one of my global scripts is as follows:
try { var IE11; // IE10 and IE11 removed ActiveXObject from the window object but it can still be instantiated
IE11 = new ActiveXObject('MSXML2.DOMDocument.6.0');
IE11 = null;
if (typeof(HTMLOptionElement) != "undefined") {
try { HTMLOptionElement.prototype.__defineSetter__(
'text',
function(original) {
return function(newValue) { var sel;
original.call(this, newValue);
if (!(sel=this.parentElement).fixIE) sel.fixIE = window.setTimeout(_fixIE_(sel), 1);
}
}(HTMLOptionElement.prototype.__lookupSetter__('text')));
} catch(e) {};
}
} catch(e) {}
}
// IE11 broke SELECT boxes again, modifying any options .text attribute "freezes" the SELECT so it appears disabled
function _fixIE_(selBox) {
return _fixIE_;
function _fixIE_(){ var lc = selBox.options.length;
selBox.options.add(new Option('',''));
selBox.options.remove(lc);
selBox.fixIE = undefined;
}
}
Phil
Go to programs
Then widdcom folder
Right click bttray
Go compatibility
Tick run as admin
Restart
I had the same problem in IE 11 on Dell Windows 7.
It was solved by turning off hardware rendering in IE, as you suggested in your link.
I have a site that requires two themes to be loaded. The second theme can be toggled on/off by the user. I'm currently accomplishing this by using the disabled tag in the link like so:
<link rel="stylesheet" href="{{main css}}">
<link rel="stylesheet" title="theme-white" href="{{2nd theme css}}" disabled>
I then toggle disabled in JavaScript.
This works great in Safari (Mac), Chrome (Mac/Windows), and IE10. However, Firefox (both Mac and Windows) seems to ignore the disabled tag on page load and displays the second theme on initial load (as it is loaded second). When I manually toggle disabled, however, Firefox does respond to the tag and will begin to switch the second theme on/off.
How can I accomplish this goal?
I found a workaround that seems to be functional in all browsers. This does NOT seem like it should be the best way to do it but I wanted to share.
This is not ideal for a few reasons but I tried to make it streamlined and without any external library dependency like jQuery because this needs to be placed in your head tag and you probably have not loaded your JS libraries at that point.
<script>
window.onload = function() {
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.href = '/your/css/url.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
style.disabled = true;
};
</script>
NOTE: Firefox seems to only respond to the disabled tag if it is applied to the stylesheet after it has been added to the DOM. I still feel like I'm missing something because that seems crazy.
So, if you were to put style.disabled = true; before you add the style to your document then Firefox does not recognize the disabled state of the stylesheet.
This is fixed in Firefox 68. You can now set the disabled attribute on <link> elements that also contain the ref=stylesheet attribute value. This will prevent the browser from loading that stylesheet until the disabled attribute is set to false or removed via JavaScript or some other method.
This brings Firefox in line with Chrome, Edge, Safari on support for this feature.
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes
Bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=1281135
Late to the party here, but I just encountered this problem as well in Firefox. Turns out it had to do with HOW the disabled attribute is applied to the stylesheet via Javascript.
See the below code, assuming some trigger to swap disabled state between two stylesheets. The first function is what I tried first, and the latter is what ended up working for me.
var myStyles = document.getElementById('my-default-style');
var myOtherStyles = document.getElementById('my-other-style');
function thisFailsInFirefox() {
myStyles.setAttribute('disabled', true);
myOtherStyles.removeAttribute('disabled');
}
function thisWorksInFirefox() {
myStyles.disabled = true;
myOtherStyles.disabled = false;
}
The thisWorksInFirefox function seemed to do the trick, maintaining functionality in Chrome / Safari / Edge, while making Firefox match in its behavior.
Everything in your theme stylesheet could be prefixed with a class. For instance, if you have the following in your theme css:
h1 {color: red;}
h2 {color: green;}
It becomes something like:
.theme-white h1 {color: red;}
.theme-white h2 {color: green;}
Then, to toggle your theme, you can use the following:
if (show theme) {
$('body').addClass('theme-white');
} else {
$('body').removeClass('theme-white');
}
If I create an HTML anchor tag and set the disabled attribute to true, I get different behaviors in different browsers (surprise! surprise!).
I created a fiddle to demonstrate.
In IE9, the link is grayed out and does not transfer to the HREF location.
In Chrome/FF/Safari, the link is the normal color and will transfer to the HREF location.
What should the correct behavior be? Is IE9 rendering this incorrectly and I should implement some CSS and javascript to fix it; or is Chrome/FF/Safari not correct and will eventually catch up?
Thanks in advance.
IE appears to be acting incorrectly in this instance.
See the HTML5 spec
The IDL attribute disabled only applies to style sheet links. When the
link element defines a style sheet link, then the disabled attribute
behaves as defined for the alternative style sheets DOM. For all other
link elements it always return false and does nothing on setting.
http://dev.w3.org/html5/spec/Overview.html#the-link-element
The HTML4 spec doesn't even mention disabled
http://www.w3.org/TR/html401/struct/links.html#h-12.2
EDIT
I think the only way to get this effect cross-browser is js/css as follows:
#link{
text-decoration:none;
color: #ccc;
}
js
$('#link').click(function(e){
e.preventDefault();
});
Example: http://jsfiddle.net/jasongennaro/QGWcn/
I had to fix this behavior in a site with a lot of anchors that were being enabled/disabled with this attribute according to other conditions, etc. Maybe not ideal, but in a situation like that, if you prefer not to fix each anchor's code individually, this will do the trick for all the anchors:
$('a').each(function () {
$(this).click(function (e) {
if ($(this).attr('disabled')) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
var events = $._data ? $._data(this, 'events') : $(this).data('events');
events.click.splice(0, 0, events.click.pop());
});
And:
a[disabled] {
color: gray;
text-decoration: none;
}
disabled is an attribute that only applies to input elements per the standards. IE may support it on a, but you'll want to use CSS/JS instead if you want to be standards compliant.
The JQuery answer didn't work for me because my anchor tag is on a form and on my forms I use asp field validators and they just weren't playing nice. This led me to finding a pretty simple answer that doesn't require JQuery or CSS...
<a id="btnSubmit" href="GoSomePlace">Display Text</a>
You can disable the element and it should behave as input types do. No CSS needed. This worked for me in chrome and ff.
function DisableButton() {
var submitButton = document.getElementById("btnSubmit");
if (submitButton != null) {
submitButton.setAttribute('disabled', 'disabled');
}
}
Of course you'll be doing a loop to disable all anchor tags in the DOM but my example shows how to do it for just one specific element. You want to make sure you're getting the right client id of your element but this worked for me, on more than one occasion. This will also work on asp:LinkButtons which end up being anchor tag elements when rendered in the browser.
Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data
When I say “work”, I mean, if I’ve got HTML like this:
<div id="geoff" data-geoff="geoff de geoff">
will the following JavaScript:
var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);
produce, in IE 6, an alert with “geoff de geoff” in it?
You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with
<div id="geoff" data-geoff="geoff de geoff">
I can get the value of data-geoff using
var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));
See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).
But this has nothing to do with HTML5-specific attributes, of course.
Yes, they work.
IE has supported getAttribute() from IE4 which is what jQuery uses internally for data().
data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js
So you can either use jQuery's .data() method or plain vanilla JavaScript:
Sample HTML
<div id="some-data" data-name="Tom"></div>
Javascript
var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);
jQuery
var name = $("#some-data").data("name");
Not only does IE6 not support the HTML5 Data Attribute feature, in fact virtually no current browser supports them! The only exception at the moment is Chrome.
You are perfectly at liberty to use data-geoff="geoff de geoff" as an attribute, but only Chrome of the current browser versions will give you the .dataGeoff property.
Fortunately, all current browsers - including IE6 - can reference unknown attributes using the standard DOM .getAttribute() method, so .getAttribute("data-geoff") will work everywhere.
In the very near future, new versions of Firefox and Safari will start to support the data attributes, but given that there's a perfectly good way of accessessing it that works in all browsers, then there's really no reason to be using the HTML5 method that will only work for some of your visitors.
You can see more about the current state of support for this feature at CanIUse.com.
Hope that helps.
I think IE has always supported this (at least starting from IE4) and you can access them from JS. They were called 'expando properties'. See old MSDN article
This behaviour can be disabled by setting the expando property to false on a DOM element (it's true by default, so the expando properties work by default).
Edit: fixed the URL
If you wanted to retrieve all of the custom data attributes at once like the dataset property in newer browsers, you could do the following. This is what I did and works great for me in ie7+.
function getDataSet(node) {
var dataset = {};
var attrs = node.attributes;
for (var i = 0; i < attrs.length; i++) {
var attr = attrs.item(i);
// make sure it is a data attribute
if(attr.nodeName.match(new RegExp(/^data-/))) {
// remove the 'data-' from the string
dataset[attr.nodeName.replace(new RegExp('^data-'), '')] = attr.nodeValue;
}
}
return dataset;
}
In IE6, it may not work. For reference: MSDN
I suggest using jQuery to handle most of the cases:
var geoff = $("#geoff").data("data-geoff");
alert(geoff);
Try this in your coding.