Question

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.

Answer 1

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>