Develop Reference

How to change the CSS of particular tag inside of iframe using JavaScript?

I'm working on a product where my requirement is when user focus on particular text box then change the background color of particular tag using the class of that tag inside iFrame. I have tried few solutions from stack but got no luck.
Here is my code
Below is Html code.
<input type="number" class="form-control bodyStyle" name="bodyFontSizeDesk" id="bodyFontSizeDesk" value="" placeholder="px">
Below is my js code.
$('.bodyStyle').on('focus', function() {
$('iframe').contents().find(".headings").css('background', 'red');
});
Below is the tag inside iframe.
<h1 class="headings">Street artist & painter based in New Delhi.</h1>
Any lead will be appreciated.
Thank you.

Jquery code doesnt work on html output from Javascript

I have this Jquery function to mask my textbox:
jQuery(function($){ //Mask textbox #hour with placeholder
$("#hour").mask("9:99",{placeholder:"0"});
$("#hourInTable").mask("9:99",{placeholder:"0"});
});
Works perfectly with this html code:
But when I try to do it in the textbox that has the ID hourInTable outputted by Jquery it doesnt mask anything:
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
This above code is called after a button press and the textbox hourInTable is placed somewhere on the page.
Placed this code direct into my html:
<input type="text" name="hourInTable" id="hourInTable" value="00:00">
And it worked, so its due to the html output in JS.
Thanks in advance.

Most likely it happens because when jQuery does the masking, the input is not yet present. Give the function a name and call it after you are sure that the innerHTML is placed.

try something like this
jqTds[2].innerHTML = '<input type="text" name="hourInTable" id="hourInTable" value="00:00">';
// call after text box is added
$("#hourInTable").mask("9:99",{placeholder:"0"});
because #hourInTable is not present on DOM ready so it doesn't apply mask on it
call masking function after your dynamically created input is added

Add the masking code in function. And call it on button click which adds dom <input type="text" name="hourInTable" id="hourInTable" value="00:00"> in page.

What is this functionality called, and is it in HTML or Javascript?

I'd like to find out how this is commonly implemented, mainly because I can't seem to find it in the source code - it's the "graying out" of text that happens whenever a menu-option/button is unable to be clicked. I'm trying to find it in firebug but this is what I find for the image:
<input
type="submit"
onclick="LoadingMsg();"
class="btnclass"
disabled="disabled"
id="ctl00_ctl00_Content_ContentItems_btnUpdateQuotas1"
value="Update Quotas"
name="ctl00$ctl00$Content$ContentItems$btnUpdateQuotas1"
>
This is what it looks like:

It's HTML but can be implemented using JavaScript to manipulate the HTML input/select element to have that property.
This is the attribute that does it: disabled="disabled"
A basic example of JavaScript manipulating this attribute would be:
document.getElementById('elementid').disabled = true; // Disable element
document.getElementById('elementid').disabled = false; // Enableelement
Resources: disabled attribute

jquery before() is out of order?

I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a
<ul></ul>
after my input in order to do a .load inside the list.
The relevant code I have is:
var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
$(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
$('.add_keyword').focus();
addKeywordId++;
});
The problem is, that my HTML structure ends up looking like this:
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />
INSTEAD OF
<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
Anybody know why my HTML is added out of the order I specified??
Thanks
EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(

This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I've seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.
You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.
$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');
Happy haxin.
_wryteowl

Dynamically add <div> inside <input>

I want to add <div> inside <input>
<input type="submit"
name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton"
value="I understand and agree to all of the above "
onclick="return apt();"
id="DisclaimerAcceptButton"
class="DisclaimerAcceptButton">
The button is too long so I want to split its caption into two lines.
I don't have access to pure html since everything is dynamic.

input elements cannot have descendants:
<!ELEMENT INPUT - O EMPTY -- form control -->
^^^^^
However, if you can change the code that generates the button, you can use button instead:
<button name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton" onclick="return apt();" id="DisclaimerAcceptButton" class="DisclaimerAcceptButton">
I understand and agree to <br />
all of the above
</button>
This lets you style the content of the button however you want to.

A div is a block level HTML element and it shouldn't be added inside the button in such a way. You can however use CSS to specify a width to the button, and thus acquire the multi-lineness that you're looking for.

You can't add div inside of input element (unless you want it in input's value).

No can't do. And if it works on some browser, it's not guaranteed to work anywhere else, because it doesn't follow the standards.

Only you need:
<input type="checkbox" id="a"/>
<label for="a"><div>... div content ...</div></label>
Like somebody write in input you cannot put any element but in label for it can.