We Keep Coding

Setting display-property via jQuery - not working in Chrome?

I have the following problem. I have this jQuery script:
$(document).ready(function () {
$("thead.opening").click(function () {
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
alert("INTO second function, chrome: " + is_chrome);
$(this).next().css('width', '10000000 em');
$(this).next().css('display', 'table-row-group');
alert($(this).next().css('display'));
})
});
When the user is clicking on the thead (having class="opening") of a table and this CSS is set to the tbody element of the same table (represented by $(this).next()):
style="display: table-row-group;
This works fine for FireFox and Internet Explorer but it doesn't work in Chrome.
I've obtained the following behavior (as you can see in the previous code snippet I have put some alert() to debug the code):
INTO second function, chrome: true
Then it is sets the CSS property as I expect:
$(this).next().css('display', 'table-row-group');
and when perform the second alert() that represent the CSS settings for my tbody element:
$(this).next().css('display', 'table-row-group');
it print the expected value: table-row-group and it is correctly sets because I see the alert popup and under it my page correctly rendered
When I click on the OK button of the alert popup it disappear and my tbody element have some visualization problem, in particular what happens is that the tbody element have set style="display: block;" instead style="display: table-row-group;", this is my obtained tbody
Seems as Chrome first correctly sets the display: table-row-group;" (because I see the tbody element in the correct position under the second alert popup) and then automatically sets it to display: block;" when the Ok button of this popup is clicked.
Why? What am I missing? How can I fix this behavior?
Thanks

10000000 em
will cause error in css.
change it to 10000000em
http://jsfiddle.net/Mephiztopheles/0nh72pg0/
when you try this link, will it also remove the table display?
any other functions which could remove style properties?
are both style properties removed?

I don't see any reason why Chrome should reset your style; the error is probably elsewhere in the code. Create a minimal example to make sure that there isn't a second event handler which does this unexpected reset.
The next thing is to disable plugins. There might be a plugin which you have installed in Chrome which changes the CSS.

This could happen, because the alert is more important in the eventqueue of chrome. What happens if you try this?
$(document).ready(function () {
$("thead.opening").click(function () {
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
alert("INTO second function, chrome: " + is_chrome);
$(this).next().css({
width: '10000000em',
display: 'table-row-group'
});
setTimeout( function() {
console.log($(this).next().css('display'));
});
});
});

Are there any other style that is defined for your display attribute?
But if it works for firefox, it should work for chrome.
you could try -
$(this).next().css('display', 'table-row-group !important');

FXSCopyButton Not working in IE, how to copy to clipboard in IE

I have the following code on my page that displays a text box with a copy button after it(places the contents on your clipboard)...
public showDialog(): DataLab.Util.Promise<IDialogResult> {
var p = DialogViews.ShowApiCode.show(this);
$("#short-code").fxsCopyButton({
ariaLabelledBy: "short-code-label",
labelElement: $("#short-code-input"),
getClipboardText: function () { return $("#short-code-text").val(); }
});
$("#short-code-text").click(function () {
$(this).select();
});
return p;
}
This good works fine in Safari and in Chrome, but in IE the text box is empty. I know that if I remove the following the text books works fine...
$("#short-code").fxsCopyButton({
Is my best option here to do a switch based on the browser and just not do clipboard in IE? Can I am I doing something wrong here, or is there a better way to do copy to clipboard for all browsers?

You can use the clipboardData object instead:
http://msdn.microsoft.com/en-us/library/ie/ms535220(v=vs.85).aspx

Can Firefox use document.execCommand in a textarea?

With the cursor in a contenteditable div, both Chrome and Firefox can emulate typing "sometext" like this:
document.execCommand('insertText', false, 'sometext');
In Chrome, this works when you're in a textarea as well. In Firefox, I get the error "NS_ERROR_FAILURE:".
Here's a fiddle to demonstrate: http://jsfiddle.net/ukx37/. In Chrome, hit enter and you type "ENTER\n". In Firefox, you type "\n" and get an error NS_ERROR_FAILURE.
Does anybody know if there's a way to get this working in Firefox? Or, if not, is there some way I can test for support without a try-catch statement?
Also, I don't want to manually edit the textarea's value because doing so breaks the edit history.

Figured out that the error is being fired because the focused Node isn't contentEditable. If you make the textarea contentEditable it stops firing errors, but gets all buggy. Firefox will sometimes put the inserted text in the textarea, sometimes put it in the DOM as a child node of the textarea (and never display it), sometimes do nothing. No errors are fired, but it's still unusable. Same thing for making a parent contentEditable and the textarea not.
The answer I'm using for now is feature-detecting and giving up if it doesn't "just work". If somebody gets Firefox to work I'll un-accept this and accept theirs. Until then, here's the code I'm using.
var canEditInput = (function () {
try {
var t = document.createElement('textarea');
document.body.appendChild(t);
t.focus();
document.execCommand('insertText', false, 'x');
document.body.removeChild(t);
return t.value === 'x';
} catch (e) {
return false;
}
})();
Note that we can't give t display:none; because then it can't be focused. But it shouldn't matter, because the JS should finish (and remove t) before the browser starts to draw the next frame.

getAttribute method not working in IE but working in other browsers

I wrote a JavaScript to get the value of the class attribute using get Attribute method. It's working and I satisfied with my requirement in all browsers except IE.
The text area component inserted dynamically in to a jsf page. Whenever onload we execute this JavaScript function to show text editor for text area.
Here is my JavaScript:
function showingRTFTextArea(){
// alert("before Starting");
var textareaEle=document.getElementsByTagName("textarea");
// alert("Textarea fields:"+textareaEle.toString());
for(var i=0;i<textareaEle.length;i++){
var textareaObj=textareaEle[i];
//alert(textareaObj.getAttribute('Class'));
if(textareaObj.getAttribute('Class')=='rtfclass'){
var nameOfEle=textareaObj.getAttribute('name');
CKEDITOR.inline(nameOfEle);
// alert("set the RTF");
}
}

For IE try className instead of class.
if(textareaObj.getAttribute('className')=='rtfclass')

if you just want to test for the presence of a CSS class this works in all browsers:
if(textareaObj.classList.contains('rtfclass')){
//...
}

Javascript working on Firefox but not in Chrome and IE6

I have javascript that working fine in Firefox 3.x.x, but it does not work in IE*, Chrome, Safari. Simple alert work before calling function. Here is the code
function showDiv(div){
//alert(div);
document.getElementById(div).style.visibility='visible';
document.getElementById(div).style.height='auto';
document.getElementById(div).style.display='block';}
function hideDiv(div){
//alert(div);
document.getElementById(div).style.visibility='hidden';
document.getElementById(div).style.height='0px';
document.getElementById(div).style.display='none';
}
here is the html page code
<td align="center"><a onclick="showDiv('<?=$val['keyname']?>')" style="cursor:pointer;">Edit</a></td>
if I put alert() before showDiv('<?=$val['keyname']?>') then alert box is displayed but the function is not called in other browsers other than fire fox
Please tell me the solution for this.

The syntax looks okay to me.
Make sure there are not multiple elements with the same ID in the document and that your element IDs are valid.

There is nothing inherently wrong in the code you have posted. I suggest you post a reproduceable non-working example: the problem will be elsewhere in the page. Maybe the div ID string isn't unique (this is invalid HTML and will make behaviour unreliable); maybe there's some other script interfering, maybe you have event code firing this that's not written in a cross-browser way
However your attempts to hide an element in three different ways seem like overkill to me. Just a single display change would do it fine.
Another way to do it is to set className='hidden' or '', and use a CSS rule to map that class to display: none. The advantage of this is that you don't have to know whether the element in question is a <div> (that should revert to display: block), a <span> (that should revert to display: inline) or something else. (The table-related elements have particular problems.)

Maybe you could try that:
function showDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "block";
obj.style.height = "auto";
} else {
alert("DIV with id " + div + " not found. Can't show it.");
}
}
function hideDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "none";
} else {
alert("DIV with id " + div + " not found. Can't hide it.");
}
}
Do not call document.getElementById several times in the same function, use a variable to store the div element.
The if (obj) test will only execute the code if it has been found by document.getElementById(...).