Develop Reference

script that applies a style to newly created elements

I am writing a tampermonkey script that changes the style of an element whose class starts with "blocked". So i have this code:
var blockedelements = document.querySelectorAll("[class^=blocked]");
var element = blockedelements[0];
element.style.display="none";
for simplicity this is only for the first element but i know how to iterate through each one and this code as it is works. the webapp dynamically creates new elements with this class and i want the script to execute for each newly created element which is what i don't know how to do. I want a pure JS solution, not jquery. Is this what a listener is for? i don't know much about javascript.
I would appreciate any pointers, thanks

Instead of manually changing the display value for every instance of the element, you could use JavaScript to add a page-wide style rule to hide all of them. That way you can let the browser handle applying the rule to both existing and future instances of the element for you.
Rough idea:
var rule = "[class^=blocked] { display: none }";
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.style.cssText) {
styleElement.style.cssText = rule;
} else {
styleElement.appendChild(document.createTextNode(rule));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);

Add hanging indent to CKEditor on web page [duplicate]

I'm using CKEditor and I want to indent just the first line of the paragraph. What I've done before is click "Source" and edit the <p> style to include text-indent:12.7mm;, but when I click "Source" again to go back to the normal editor, my changes are gone and I have no idea why.
My preference would be to create a custom toolbar button, but I'm not sure how to do so or where to edit so that clicking a custom button would edit the <p> with the style attribute I want it to have.

Depending on which version of CKE you use, your changes most likely disappear because ether the style attribute or the text-indent style is not allowed in the content. This is due to the Allowed Content Filter feature of CKEditor, read more here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
Like Ervald said in the comments, you can also use CSS to do this without adding the code manually - however, your targeting options are limited. Either you have to target all paragraphs or add an id or class property to your paragraph(s) and target that. Or if you use a selector like :first-child you are restricted to always having the first element indented only (which might be what you want, I don't know :D).
To use CSS like that, you have to add the relevant code to contents.css, which is the CSS file used in the Editor contents and also you have to include it wherever you output the Editor contents.
In my opinion the best solution would indeed be making a plugin that places an icon on the toolbar and that button, when clicked, would add or remove a class like "indentMePlease" to the currently active paragraph. Developing said plugin is quite simple and well documented, see the excellent example at http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 - if you need more info or have questions about that, ask in the comments :)
If you do do that, you again need to add the "indentMePlease" style implementation in contents.css and the output page.

I've got a way to indent the first line without using style, because I'm using iReport to generate automatic reports. Jasper does not understand styles. So I assign by jQuery an onkeydown method to the main iframe of CKEditor 4.6 and I check the TAB and Shift key to do and undo the first line indentation.
// TAB
$(document).ready(function(){
startTab();
});
function startTab() {
setTimeout(function(){
var $iframe_document;
var $iframe;
$iframe_document = $('.cke_wysiwyg_frame').contents();
$iframe = $iframe_document.find('body');
$iframe.keydown(function(e){
event_onkeydown(e);
});
},300);
}
function event_onkeydown(event){
if(event.keyCode===9) { // key tab
event.preventDefault();
setTimeout(function(){
var editor = CKEDITOR.instances['editor1'], //get your CKEDITOR instance here
range = editor.getSelection().getRanges()[0],
startNode = range.startContainer,
element = startNode.$,
parent;
if(element.parentNode.tagName != 'BODY') // If you take an inner element of the paragraph, get the parentNode (P)
parent = element.parentNode;
else // If it takes BODY as parentNode, it updates the inner element
parent = element;
if(event.shiftKey) { // reverse tab
var res = parent.innerHTML.toString().split(' ');
var aux = [];
var count_space = 0;
for(var i=0;i<res.length;i++) {
// console.log(res[i]);
if(res[i] == "")
count_space++;
if(count_space > 8 || res[i] != "") {
if(!count_space > 8)
count_space = 9;
aux.push(res[i]);
}
}
parent.innerHTML = aux.join(' ');
}
else { // tab
var spaces = " ";
parent.innerHTML = spaces + parent.innerHTML;
}
},200);
}
}

Display table cell content in tooltip (jsfiddle won't work on real site)

I am trying to have the full table cell content show as a tooltip. This will let visitors see the part that is hidden since it is too long to fit in the cell.
I am attempting the solution described here (please look there to see expected behavior):
http://jsfiddle.net/zWfac/
var container = $("#container");
$("td").hover(function ()
{
container.children(".tooltip").remove();
var element = $(this);
var offset = element.offset();
var toolTip = $("<div class='tooltip'></div>");
toolTip.css(
{
top : offset.top,
left : offset.left
});
toolTip.text(element.text());
container.append(toolTip);
});
I changed the container var definition from an id to a class:
var container = $(".sortTable");
I added the code to our wordpress site by putting it right before </body> in my child theme's footer.php, inside a jQuery().ready(function() block.
I am getting an error that leads me to think jQuery is not properly initializing but I am too new to this language to be able to troubleshoot effectively. I'd appreciate any suggestions on this.
I have a sample table on this page:
http://frugalmule.com/overflow/
Please note my client previously posted a somewhat incomplete question about this which was removed; I have made many changes to the page since then but I still don't have what he needs. Since the error occurs when putting the JSFiddle to the real site, I don't know how to state the problem in any simpler fashion.

Please replace $ with jQuery in your script. This will solve your problem. You can refer this link: http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Difficulty setting focus on newly created object in javascript

So, related to an earlier question, but forgive me for my naive javascript ways. Basically I now want to automatically bring a text input into focus when it is added to the DOM. Part of me thinks that I might be trying to add focus to the object before it exists, but I'm not quite sure how I would go about fixing it. Right now this is my relevant code:
var searchWrapper = document.createElement("div");
searchWrapper.id = "search-wrapper";
this.parentNode.replaceChild(searchWrapper, this);
document.getElementById("search-wrapper").focus();
But it's not quite working. Should I be setting focus as a callback on replaceChild, or is there some other way to do this?

Try the following:
Live Demo
var searchOrig = document.getElementById("search-wrapper");
var searchWrapper = document.createElement("div");
searchWrapper.id = "search-wrapper";
searchWrapper.setAttribute('tabindex', '0');
searchOrig.parentElement.replaceChild(searchWrapper, searchOrig);
document.getElementById("search-wrapper").focus();

Changing the "x" in background-position: "x"px "y"px using jQuery/Javascript for a class

I've just started using sprites to cut down HTTP requests and I'm having a little bit of a problem converting my old script for dealing with my hover animations into the new system. I don't really want to be having a separate function for each button as that is painful especially with the amount of buttons, even copy and paste would be a pain. I don't believe it's the most efficient way of doing things either, not by a long shot and efficiency is the aim here.
I have gotten this far with it:
$(".socButton").hover(function(){
var iD = $(this).attr("id");
var pos = $("#" + iD).css("background-position");
var splitPos = pos.split("px");
splitPos[0] = parseInt(splitPos[0]) += 24;
newPos = splitPos.join("px");
alert(newPos);
}, function(){
});
but the newPos variable just isn't alerting. I've tried some easier looking methods of just changing "background-position-x" but no dice there.
I'm not certain I need to identify the id of the element in order to change it, but it is the id which has the background-position in the stylesheet, not the class, so I'm not really certain.
Any guidance greatly appreciate.
Thanks in advance.
EDIT: I feel I should also point out, it was alerting fine before I added the parseInt, but some whacky results were coming about before I added it.

No, you don't need the ID of the element. jQuery applies inline styles.
Anyway, it would probably be easier if you had a second rule for .socButton in your CSS, i.e. .socButton.hover, which would have correct background position for hover state. In jQuery you would only have to toggle the hover class with $(this).toggleClass('hover').
http://jsfiddle.net/Rn6f4/
$(".socButton").hover(function() {
var pos = $(this).css("background-position");
var splitPos = pos.split("px");
splitPos[0] = parseInt(splitPos[0]);
splitPos[0] += 24.0;
newPos = splitPos.join("px");
alert(newPos);
$(this).css({"background-position": newPos});
}, function(){
});