Develop Reference

Problems with Master Page

I have been learning JavaScript for a week and because I already have some knowledge in CSS and HTML I was trying to make a simple page with an option to change the body's background picture by pressing a button. I know how to do that by getting the body as a variable. However, I know how to do 'document.getElementByTagName', but I work with Master Pages, which means there is no body tag at the beginning of the HTML code. What could I do to work around that?

document.querySelector('body') // will take the first catch of a tag
document.querySelector('.class') // will take the first catch of a class
document.querySelector('#id') // will get the exact id
document.querySelector('[name="first_name"]') // will get the first catch of a custom or existing property as name

Dynamic html- find what variable causes page to update

I'm inspecting a dynamic html webpage. There is an element that looks like this:
<span id="x">3</span>
It's value constantly changes based on some variable. So for example if the variable changes to 10, the text inside the span element will also change to 10 like this:
<span id="x">10</span>
I want to find where this variable is that is causing this change. Where in inspect element can I find this variable and manipulate it?

Try the sources tab of the Dev Tools.
If can't find it in the elements tab, try the sources tab:
For example this is looking at some JavaScript of github.com:
Look for the JavaScript that may be manipulating this element, I have no idea what it could be, but I'd first look for something along the lines of:
var [VARIBALE_NAME] = document.getElementById("x")
Though on many dynamic web pages it can be very difficult to find something like that. This is because many web pages are dynamically created and tend not to be very human-readable.

You should go to script tags in the inspect page and search where it is getting this element. i.e, somewhere in the script there will be something like this;
document.getElementById('x').innerHTML = that-variable-which-you-are-finding; // as the id of the span is x.
In this way you will get the name of the variable. Then in the script tags, search for that variable on other positions and you will get where it is getting updated.

Generate Bootstrap tooltip on-the-fly

I have a page with a text and some words in the text can change dynamically. These words have an element and should have a tooltip. When the user hovers the word (or I guess on a touch device clicks it), a tooltip should be generated using generateSpecialMarkupElement($(element).text()). Once the HTML has been rendered to the DOM another JavaScript function has to be called replaceMarkupHTML().
I don't have control over these functions unfortunately.
Now I'm wondering if there is a simple way in bootstrap get this done. For instance a before event to run the first function and an after event to call the second one.
Here is a simple example text and simplified versions of the functions:
http://jsfiddle.net/8aqz5auk/1/
So is there a bootstrap-way of hooking/intercepting this kind of thing? Or is there maybe another simple way it could be done?
Edit: I just had an idea. When bootstrap shows a tooltip, it seems to inject an element into the DOM. The interesting part is the container with the class 'tooltip-inner'. So I tried to listen on the body for new elements matching '.tooltip-inner' to be injected and whenever that happens I try to manipulate it:
$('body').on('DOMNodeInserted', '.tooltip-inner', function () {
var el = $(this)
el.html("") // empty the tooltip element
el.append(generateSpecialMarkupElement(el.text())) // insert the generated markup element
replaceMarkupHTML() // replace the markup element with normal html
});
Unfortunately it doesn't work. It just throws a a million errors and the site freezes when I try it.
Edit 2:
Thanks to Chris Barr, I got a little bit closer: http://jsfiddle.net/8aqz5auk/2/
But the tooltip doesn't always show up and the position of the tooltip seems to be kind of wrong (shows up on top of the word, rather then next to/above/below/...).

You might want to look into the tooltip events listed in the docs: https://getbootstrap.com/docs/3.3/javascript/#tooltips-events
$('.elements-with-tooltips').on('show.bs.tooltip', function () {
// do something…
})
You can run a function: before being shown, after being shown, before hiding, after hiding, and when the element is inserted into the DOM.

How to create image buttons that activate jQuery/js function

I'd need to have like buttons inside tr elements to do js/jQuery things when clicked.
Strangely I'm having a hard time finding good knowledge on how to execute jQuery/js from inline html/image button.
Here's what I had in mind:
first create a custom function for the like button
jQuery.fn.likebutn = function(theword, wordnumber) {
//check if button is lighted up and if it is break
//change button to lighted up
jQuery(this).attr("src", "http://i46.tinypic.com/n18g3q.png");
//add word to a div element
jQuery('#cntrldiv0').append("<p>theword<p>");
//ajax like.php file with the word and username/id
jQuery.post('like.php', {theword:theword, userid: userid});
};
then dynamically insert the function call and it's parameters (as the table is being created in PHP) in the image button element (so inline in html)
likebutn({theword: ${'row' . $wordnumber}, wordnumber:$wordnumber});
Which outputs
likebutn(theword:foraminated, wordnumber:1)
for example.
So how do I evoke the function like that from html?
And on a side note, why is there so much event listening in jQuery/js image buttons I'm seeing when surfing the web (instead of what I'm suggesting), isn't that slower than evoking inline in html?
Here's how the construct would look: http://jsfiddle.net/Bc64R/

Unless you have a variable called foraminated, this is incorrect:
likebutn(theword:foraminated, wordnumber:1)
should be:
likebutn(theword:"foraminated", wordnumber:1)
from html:
<... onclick="jQuery(this).likebutn(...)">

Javascript execution order

I want to give a static javascript block of code to a html template designer, which can be:
either inline or external or both
used once or more in the html template
and each block can determine its position in the template relative to the other javascript code blocks.
An example could be image banners served using javascript. I give code to template designer who places it in two places, once for a horizontal banner in the header and once for a vertical banner. The same code runs in both blocks but knowing their positions can determine if to serve a horizontal or a vertical image banner.
Make sense?
Another example: Say you have the same 2 javascript tags in a web page calling an external script on a server. Can the server and/or scripts determine which javascript tag it belongs to?
NOTE: Can we say this is a challenge? I know that I can avoid this puzzle very easily but I come across this on a regular basis.

JavaScript code can locate all <script> elements on the page and it can probably examine the attributes and the content to check from which element it came from. But that's probably not what you want.
What you want is a piece of JavaScript which replaces tags on the page with ad banners. The usual solution is to add a special element, say a IMG, for this and give that IMG an id or a class or maybe even a custom attribute (like adtype="vertical") and then use JavaScript to locate these elements and replace the content by changing the src attribute.
For example, using jQuery, you can should your images like so:
<img src="empty.gif" width="..." height="..." class="ad" adtype="..." />
Then you can locate each image with
$('img.ad')
[EDIT] Well, the server obviously knows which script belongs into which script tag because it inserts the script. So this is a no-brainer.
If the script wants to find out where it is in the DOM, add something which it can use to identify itself, say:
<script>var id= '329573485745';
Then you can walk all script tags and check which one contains the value of the variable id.
If you call an external script, then you can do the same but you must add the ID to the script tag as you emit the HTML:
<script id="329573485745" src="..." />
Then the external script can examine the DOM and lookup the element with this id. You will want to use an UUID for this, btw.
This way, a piece of JS can locate the script tag which added itself to the page.

Best thing would probably be to make an insert once function, and then have him insert only the function call where needed.
Like this:
timescalled=0
function buildad(){
var toinsert="" //Code to generate the desired piece of HTML
document.write(toinsert)
timescalled+=1 //So you can tell how many times the function have been called
}
Now a script block calling the function can simply be inserted wherever a banner is needed
<script type="text/javascript">buildad()</script>

Thanks for the tips everyone but I'll be answering my own question.
I figured out several ways of accomplishing the task and I give you the one which works nicely and is easy to understand.
The following chunk of code relies on outputting dummy divs and jQuery.
<script>
// Unique identifier for all dummy divs
var rnd1="_0xDEFEC8ED_";
// Unique identifier for this dummy div
var rnd2=Math.floor(Math.random()*999999);
// The dummy div
var d="<div class='"+rnd1+" "+rnd2+"'></div>";
// Script which :
// Calculates index of THIS dummy div
// Total dummy divs
// Outputs to dummy div for debugging
var f1="<script>$(document).ready(function(){";
var f2="var i=$('."+rnd1+"').index($('."+rnd2+"'))+1;";
var f3="var t=$('."+rnd1+"').length;";
var f4="$('."+rnd2+"').html(i+' / '+t);";
var f5="});<\/script>";
document.write(d+f1+f2+f3+f4+f5);
</script>

Why not not just place the function call on the page instead of the entire code block? This way you can pass in a parameter to tell it what type of advertisement is needed?
BuildAd('Tower');
BuildAd('Banner');
Javascript itself has no clue of it's position in a page. You have to target a control on the page to get it's location.

I don't think it is possible for JavaScript code to know where it was loaded from. It certainly doesn't run at the point it is found, since execution isn't directly tied to the loading process (code usually runs after the whole DOM is loaded). In fact, in the case of externals, it doesn't even make sense, since only one copy of the code will be loaded no matter how many times it is encountered.

It shouldn't be the same code for each banner - there will be a parameter passed to whatever is serving the image banner which will specify the intended size.
Can you give a specific example of what you need this for?
To edit for your recent example: The simple answer is no. I could help you approach the problem from a different direction if you post details of your problem

The term "static block of code" leaves a lot of room for interpretation.
Inline scripts (e.g., ones that rely on document.write and so must be parsed and executed during the HTML parsing phase) cannot tell where they are in the DOM at runtime. You have to tell them (as in one of the first answers you got).
I think you'll probably find that you need to change your approach.
A common way to keep code and markup separate (which is useful when providing tools to HTML designers who aren't coders) is to have them use a script tag like so:
<script defer async type='text/javascript' src='pagestuff.js'></script>
...which then triggers itself when the page is loaded (using window.onload if necessary, but there are several techniques for being triggered earlier than that, which you want because window.onload doesn't trigger until the images have all loaded).
That script then looks for markers in the markup and manipulates the page accordingly. For instance (this example uses Prototype, but you can do the same with raw JavaScript, jQuery, Closure, etc.):
document.observe("dom:loaded", initPage);
function initPage() {
var verticals = $$('div.vertical');
/* ...do something with the array of "vertical" divs in `verticals`,
such as: */
var index;
for (index = 0; index < verticals.length; ++index) {
vertical.update("I'm vertical #" + index);
}
}
The designers can then have blocks on the page that are filled in by code which they flag up in a way that's normal for them (classes or attributes, etc.). The code figures out what it should do based on the classes/attributes of the blocks it finds when it runs.