I need to make my application run on all browsers and I have a div for which I set the css class in Javascript using the syntax
divNew.className = "highlightItem";
It works ok on IE, but when it comes to Firefox, Opera and Chrome it's not working at all. I have also tried other versions such as
var theDiv = document.getElementById(divNew);
theDiv.setAttribute("class", "highlightItem");
theDiv.setAttribute("className", "highlightItem");
with no success. Setting all the attributes through style isn't working either.
Are there any other ways of setting the css class for a div so that it works on the above mentioned browsers? Thanks a lot!
On this line:
var theDiv = document.getElementById(divNew);
You need the id of your div there as a string:
var theDiv = document.getElementById("my-div-ID");
Other than that it should work.
If you want to save yourself time with cross-browser issues look into jQuery - you would just do:
$("#my-div-ID").addClass("highlightItem");
Related
I have an IMG element c. The following works to change its cursor (in Chrome):
c.style.cursor='-webkit-zoom-out';
But if I try to add compatibility for other browsers, as in the following, it breaks:
c.style.cursor='-webkit-zoom-out, -moz-zoom-out';
(And I haven't even gotten to trying to link a .cur for IE-compatibility....) What's the correct syntax to add multiple values to a style element?
You have to add them separately:
c.style.cursor = '-webkit-zoom-out';
c.style.cursor = '-moz-zoom-out';
Unfortunately zoom-in and zoom-out are not supported by Internet Explorer yet. See the MDN Cursor: Browser compatibility.
Demo
Try before buy
Alternatively you can create a CSS class that sets the correct styles and add or remove this class using JavaScript if you need to toggle it.
This is related to Adding options to a <select> using jQuery? but has a different focus
My problem is that I am not able to append option-elements to a select in IE8.
When changing the engine to IE7 in IE's developer-tools it does work.
It also works in FF and Chrome.
var valT = "some Text";
var charsToIgnore = 2;
var o = new Option(valT.slice(charsToIgnore), valT);
$(o).html(valT.slice(charsToIgnore));
$('#availablePages').append(o);
another method I tried:
$('<option/>', {value: valT, text: valT}).appendTo("#availablePages");
availablePages is the id of my select. The select does not contain any elements when the page is received by the client. My doctype is <!DOCTYPE html>.
I also tried to remove all other scripts and css from my site to make sure no side-effects apply.
Edit:\ Thanks for downvoting! It's not my fault if provided solutions do not work in all IE8-versions. Since my question was What DOES work in all IE8-versions? it is, from my point of view, understandable that I do not accept answers which do not work for me. As you can see in Adding options to a <select> using jQuery? I am not the only one for whom the other replies here do not work.
Using the Up-/Down-Vote functionalities as channel for your own mood is no good Wiki/QA-behaviour.
This should just do the trick for you:
$('#availablePages').append(new Option(valT.slice(charsToIgnore), valT));
(Tested and working in IE8)
What worked for me
var o = new Option("option text", "value");
$(o).html("option text"); // Without this line it does not work..
$("#availablePages").append(o);
What I also had to change / what one should consider:
display: table; is NOT allowed to be applied. For some reason it breaks everything.
I have this code to apply a class to a raphael svg path:
if ( ! ( $.browser.msie)){
obj.node.setAttribute('class','statepath');
}else{
obj.node.setAttribute('className','statepath');
}
IE accepts the property className but no class, therefore, the markup ends up something like this
className = 'statepath' in IE
class = 'statepath' in good browsers
I am trying to hide all paths and animate the one clicked. I can achieve this by using this event
obj.click(function(){
//document.getElementsByClassName('statepath').(Element.hide); -- not working
$('.statepath').hide(); // works on Good Browsers
});
This las code works only on good browsers but in IE does not. Does this have to do with the attribute className that jquery can not access to or to something else?
Rapahel uses SVG for almost all browsers, and fall back to VML on IE. That might explain why the hide() call is not working, jQuery may not be able to hide a VML element.
Have you tried the Raphael hide() method? http://raphaeljs.com/reference.html#Element.hide
I have the non-standard element
<testele></testele>
In every browser except IE, this bit of JavaScript will successfully change the content of the above element
document.getElementsByTagName("testele")[0].innerHTML = 'hi';
However, if I change the <testele> to just a <span> (in the HTML and the JavaScript), it now successfully changes the content of the element in every browser, including IE.
Is there any fix? I have searched around and tried a bunch to no avail.
Use document.createElement("testele") before it is rendered. This script must be included before the document encouters a <testele>:
http://jsfiddle.net/gilly3/LjwbA/
document.createElement("testele");
window.onload = function() {
document.getElementsByTagName("testele")[0].innerHTML = 'hi';
};
If you try to do document.createElement("testele") after a <testele> has been parsed by the browser, it's too late.
Take a look at innerShiv, a Javascript plugin which aims to solve this.
I have a small portion of code which works well on FF but I can't seem to get it to work on Safari unless I put an alert instruction anywhere inside of the whiles.
Anyone knows what may be the problem ?
var liste_ele = document.getElementsByClassName('accordion_content');
i=0;
while(i<liste_ele.length)
{
var j=0;
var liste_sel = liste_ele[i].getElementsByTagName('select');
while(j<liste_sel.length)
{
liste_sel[j].style.visibility = '';
j++;
}
i++;
}
Why don't you try setting visibility to visible instead of ''.
liste_sel[j].style.visibility = 'visible';
And are they really hidden by setting visibility to hidden or are the hidden by display:none that might also make a difference.
If putting an alert in your while loop solves the problem, it's almost certainly a timing issue. Where in the DOM is this code being run? Are you sure it's being run AFTER the elements you're trying to find are created?
A simple test would be to put your code inside a timeout:
window.setTimeout(function(){
// your code here
},100);
If that works, then your issue is related to order of operations; make sure your DOM is created before attempting to access it.
#jitter : I already tried to set visibility to visible, but I didn't have a result so I just tried '', hoping it would help. And yes, my elements are hidden and not undisplayed, otherwise my script wouldn't run perfect on FF.
#jvenema : This looks like a good solution indeed :)
Even though I don't know why would my elements not be created since they are initialised as visibility:hidden by another script in my firmware before I pass on them with this script :/
Anyway thanks, you just solved my problem (well I had solved it the good way, by modifying the script that sets it to hidden but I was curious :p) ! :)
If you don't need to block off the position then use the style display:none. Otherwise hide it initially as Safari will render the page initially with the style visibility:hidden you just won't be able to toggle it with Javascript. As a workaround just toggle the opacity with the javascript;
document.getElementById('Div').style.opacity = 0; to make it disappear
and
document.getElementById('Div').style.opacity = 100; to make it reappear.
Its holding up for me until Safari gets it together.