I have an issue with internet explorer dealing with JQuery or JQuery dealing with IE :)
Simply I have the following code:
$(function () {
$("*").each(function (i) {
var textalign = $(this).css("text-align");
if (textalign == "left") {$(this).css({'text-align': 'right'});}
else if (textalign == "right"){$(this).css({'text-align': 'left'});}
});
});
The function of code is to swap text-align of all tags, in FF & Chrome this code do perfect work, but on IE I have a problem on it, I think it read inherited text-align property after changing parent property and swap it again !
To Understand what happening, i attached here 2 images of source code after applying JQuery code:
In FF (Perfect !) :
In IE (Wrongly !) :
BTW, if you wondering about use this way, I have Open Source project and using inline styling on hundreds of JSPs, with tables too, so Its workaround solution to flip layout and support multilingual product (support ltr & rtl languages) ...
Hopefully found solution.
Note: I'm using JQuery 1.7.1 ... and this problem issued in ie8 & ie9.
Note 2: I got worst results when using jQuery("*").each(jQuery("*").get().reverse(), function (i) {
or jQuery(jQuery("*").get().reverse()).each(function (i) {
Edit 1 & 2: was inside this question
Edit 3:
Note 3 : the issue is happening with all elements on page whatever that element even script
, html
, style
, ... etc and strangest thing some of elements did not get any touch ! see this screenshot:
Edit 4:
My problem partially solved, on IE9 working well, in IE8 not working, solution from Stefan , after trying alot of ways the summery on my code:
in JQuery code:
if (jQuery.browser.msie == false || jQuery.browser.msie == undefined) {
if (textalign == "left") {jQuery(this).css({'text-align': 'right'});}
else if (textalign == "right"){jQuery(this).css({'text-align': 'left'});}
}
In CSS file that loaded for IE only :
body *[style*="text-align: left"] {
text-align: right !important;
}
body *[style*="text-align: right"] {
text-align: left !important;
}
Regards,
Couldn´t this be of any help?
body.rtl * {
text-align: right !important;
}
You really should mark the elements that should keep the rule for text-align: left
with a specific CSS class to separate them from the rest.
You may also try this CSS to switch text-align values
body *[style*="text-align: left"] {
text-align: right !important;
}
body *[style*="text-align: right"] {
text-align: left !important;
}
I´ve not tested this one yet but it should make all elements with a style attribute value containing "text-align: left" to use that rule.
UPDATE
Created an example at jsFiddle. Hope it helps.
UPDATE 2
New solution using jQuery: jsFiddle
$('body *[style*="text-align"]').each(function() {
// Toggle text-align value
$(this).css('text-align', (($(this).css('text-align') == 'left') ? 'right' : 'left'));
});