IE 9 Compatibility for Javascripts: ChildNode, SetAttribute - ie-developer-tools

Many of the Javascripts functions are not working in IE 9.
To be specific, we have constructed some HTML contents dynamically. Now, when we tried to acess the content of an HTML table by using childNode element, the object is not completely retrieved into it.
But, when we run the same in IE 9-compatibility mode we were able to get it.
Code sample:
var _object = document.getElementById(strTableId).childNodes[0]
for (var iCount = 0; iCount < _object.childNodes.length; iCount++) {
if (_object.childNodes[iCount]) {
_object.childNodes[iCount].style.backgroundColor = 'white';
_object.childNodes[iCount].style.color = 'black'
}
}
Now, when we debug the code, we could see the objects existing in the variables, but the style properties and others are not accessible. Hence, the backgroundcolor line throws a javascript exeption.
Kindly help!

IE 9 not support ChildNodes[0]. We can use children[0] instead of ChildNodes[0]
Mohan.K

Related

Cross browser support for document.write()

I have an HTML Document object assigned to variable var doc. Using this document object i am rendering string values to a text file where values are getting rendered and written but in an improper format in IE11 browser but working fine in IE8,IE10,ff n chrome.Please find my below code:
function savecontent(str){
var filename = "data.txt";
var str=replaceAll(str,'<doublequote>','"');
var w = window.frames.w;
if( !w )
{
w = document.createElement( 'iframe' );
w.id = 'w';
w.style.display = 'none';
document.body.insertBefore( w,null );
w = window.frames.w;
if( !w )
{
w = window.open( '', '_temp', 'width=100,height=100' );
if( !w )
{
window.alert( 'Sorry, could not create file.' ); return false;
}
}
}
var doc = w.document;
doc.open('text/plain');
doc.charset="iso-8859-1";
doc.write(str);
doc.close(doc.write(str));
w.close();
if( doc.execCommand( 'SaveAs', false, filename ) )
{
window.alert("Please save the file.");
}
}
Where my str could be something like
employee_firstname,employee_lastname,employee_id,employee_salary,employee accountno,employee_dob etc..
which is rendered in IE11 as,
employee_firstname,employee_lastname,
employee_id,employee_salary,employee accountno,employee_dob
but where as expected is and data is rendered in IE8,ff n chrome in the below format:
employee_firstname,employee_lastname,employee_id,
employee_salary,employee accountno,employee_dob
The different i notice in other browser like IE8,FF n chrome is line break
happening differently in IE11 compared to other browsers.
Can anyone please tell me how to format rendering of data properly in text file in IE11 browser or any alternative to document.write()?
The problem cannot quite be reconstructed from the code supplied, but the heart of the problem seems to be that you are generating a new document to be displayed in an inline frame, using the open() method for a Document object. This is relatively well supported, but only when the created document is an HTML document, not a plain text document.
When you try to use text/plain format, browsers handle things differently. They actually create an HTML document, placed in the DOM tree of the creating document. It contains a body part that either has just the text you have written or a pre element wrapper around it, causing it to be displayed as-is. For example, old versions of IE generate the pre element, IE 11 does not. It might be argued that IE 11 does the right thing: being plain text does not mean that text should be rendered as-is with respect to division into lines.
Anyway, the way to avoid this is to generate an HTML document and insert the pre wrapper with your code, provided that you wish to display the text as-is:
doc.open('text/html');
doc.write('<pre>' + str + '</pre>');

p:lineChart - continuous line, without dots

how to remove the dots from p:lineChart and draw the chart as just the continuous line?
Thanks
For others with similar problem, I did:
<p:chart type="line" model="#{myController.model}"/>
and:
LineChartSeries serie = new LineChartSeries();
serie.setShowMarker(false);
and worked fine. I'm using PrimeFaces 5.1.
There is a showMarkers attribute that isn't working for me (I'm using PrimeFaces 3.4.2) but I found a way to hide them.
It's a bit hacky, I made it working on the showcase, you just need to replace widget_category by the widget of your chart. You can even test it online from the showcase using a javascript console if your web browser allows it (tested under chromium) :
// loop through the series
for (var i = 0; i < widget_category.cfg.series.length; ++i) {
// Hide markers
widget_category.cfg.series[i].showMarker = false;
// I'm not sure you want this when talking about 'continuous line'
// but you can make your chart smooth this way :
widget_category.cfg.series[i].rendererOptions = { smooth: true };
}
// Ask a refresh using the modified configuration object
widget_category.refresh(widget_category.cfg);

MediaWiki variant tabs

Anyone knows how to get the variant tabs to work as actual tabs and not as a drop down?
This is how sr.wikipedia.org has it:
and this is how I have it on my zablude.com/wiki/ page:
and I've tried everything I found and searched everywhere I could think of but I wasn't able to find a solution... anyone has any ideas how this works?
They hack it in JavaScript — see this piece of code at the bottom of Медијавики:Vector.js:
//to be able to switch the language variant (overrides the default buttons with more visible ones)
function tabWorkaround() {
if(mw.config.get('wgUserVariant') == 'sr') {
var tab_urls = {};
tab_urls[0] = document.getElementById('ca-varlang-0').getElementsByTagName('a')[0].href; //Ћирилица
tab_urls[1] = document.getElementById('ca-varlang-1').getElementsByTagName('a')[0].href; //Latinica
$('#p-variants').remove();
mw.util.addPortletLink('p-namespaces', tab_urls[0], 'Ћирилица');
mw.util.addPortletLink('p-namespaces', tab_urls[1], 'Latinica');
}
}
$(document).ready(tabWorkaround);
It would probably be cleaner to do it with a MediaWiki hook, though. The following code is untested, but should work if I haven't made any silly mistakes:
// show language variants as tabs in Vector skin
function tabWorkaround( &$skintemplate, &$links ) {
$links['namespaces'] += $links['variants'];
$links['variants'] = array();
return true;
}
$wgHooks['SkinTemplateNavigation::Universal'][] = 'tabWorkaround';
(In MW 1.17, this hook is only called from the Vector skin. In MW 1.18, it will affect all skins. If you don't want that, you could test whether $skintemplate->skinname == 'vector'.)
Try $wgVectorFeatures['collapsibletabs']['global'] = false;. That is intended for the dropdown on the other side, but might work for other dropdowns as well.

Remove attributes using HtmlAgilityPack

I'm trying to create a code snippet to remove all style attributes regardless of tag using HtmlAgilityPack.
Here's my code:
var elements = htmlDoc.DocumentNode.SelectNodes("//*");
if (elements!=null)
{
foreach (var element in elements)
{
element.Attributes.Remove("style");
}
}
However, I'm not getting it to stick? If I look at the element object immediately after Remove("style"). I can see that the style attribute has been removed, but it still appears in the DocumentNode object. :/
I'm feeling a bit stupid, but it seems off to me? Anyone done this using HtmlAgilityPack? Thanks!
Update
I changed my code to the following, and it works properly:
public static void RemoveStyleAttributes(this HtmlDocument html)
{
var elementsWithStyleAttribute = html.DocumentNode.SelectNodes("//#style");
if (elementsWithStyleAttribute!=null)
{
foreach (var element in elementsWithStyleAttribute)
{
element.Attributes["style"].Remove();
}
}
}
Your code snippet seems to be correct - it removes the attributes. The thing is, DocumentNode .InnerHtml(I assume you monitored this property) is a complex property, maybe it get updated after some unknown circumstances and you actually shouldn't use this property to get the document as a string. Instead of it HtmlDocument.Save method for this:
string result = null;
using (StringWriter writer = new StringWriter())
{
htmlDoc.Save(writer);
result = writer.ToString();
}
now result variable holds the string representation of your document.
One more thing: your code may be improved by changing your expression to "//*[#style]" which gets you only elements with style attribute.
Here is a very simple solution
VB.net
element.Attributes.Remove(element.Attributes("style"))
c#
element.Attributes.Remove(element.Attributes["style"])

Modernizr: how do I detect CSS display:table-cell support?

I want to use display: table and display: table-cell for my layout in browsers that support it. In IE7 I simply want to float my columns (since I assume it's not possible to get it to work in that browser), but cannot find anything about how to do it using Modernizr. Can anyone help me please?
I suppose I could use a browser conditional, but was hoping to not have to break out another CSS file.
Thanks!
If all you want to do is apply a single different rule for IE7 and less, I'd be tempted not to use Modernizr for this specific job.
Simply do something like this, to avoid having to "break out another CSS file":
#menu li {
display: table-cell;
*float: left;
}
This uses the Star Property Hack to provide a rule to only IE7 and below.
Another option is the !ie7 hack, which is for some odd reason my highest voted answer.
... And if you want to use Modernizr, you could use this snippet:
(function() {
var displayTests = ["table", "table-caption", "table-cell",
"table-column", "table-column-group", "table-footer-group",
"table-header-group", "table-row", "table-row-group"];
var rules = document.createElement("div").style;
for (var c=0; c<displayTests.length; c++) {
var testValue = displayTests[c];
Modernizr.addTest("display" + testValue, function() {
try {
rules.display = testValue;
return rules.display == testValue;
} catch (e) {
return false;
}
})
}
}());
Source [Link]
IE 8 does not tell the truth when the created element is a 'tfoot', and the display value is 'table-header-group'. The following snippet will not fail, even though IE 8 ignores the CSS setting and continues to display 'tfoot' below 'tbody'.
try {
var x = document.createElement('tfoot').style;
x.display = 'table-header-group';
console.log('Both IE 8 and Chrome end up here.');
} catch (e) {
console.log('Except IE 8 should have ended up here, since it does not move the tfoot element.');
}
It might be 'correct', in the sense that 'tfoot' has already set display to 'table-footer-group'; but it's 'wrong' in the sense that it (a) doesn't allow the user to override, and (b) doesn't tell the user that it isn't going to work. I haven't tested other browsers.