We Keep Coding

Even distribution of the replacement of words in a paragraph

Apologies if this is a dumb question - and seeing that the problem is mathematical in nature rather than a coding issue, I'm not sure how appropriate it is here, but I thought I'd ask.
My problem is as follows:
At the top of the page is a slider, which outputs a value from 0 to 100, depending on the slider's position.
Beneath this I have a paragraph of text that contains x number of pronouns (each wrapped in a <span class='pronoun'> tag), which I would like to replace with the person's name. In other words, I'm trying to replace every nth pronoun, the value of n being dependent on the position for the slider.
For example: (if my paragraph has 16 pronouns)
(Slider = 0) - no pronouns are replaced.
(slider = 25) - 4 pronouns are replaced, more or less equally distributed.
(slider = 50) - 8 pronouns are replaced, more or less equally distributed.
(slider = 75) - 12 pronouns are replaced, more or less equally distributed.
(slider = 100) - 16 pronouns are replaced.
Odd number of pronouns, or other positions of the slider on the scale might prove to be a little trickier, but rounding to the nearest integer should be accurate enough for what I am trying to achieve.
My current attempts are bringing me to this:
$('#pronouns').on('input', function() {
var slider = $(this).val();
$('#commentContainer').find('.sortable').each(function(index) {
var innerDivId = $(this).attr('id');
var name = atob($(this).data('all').name);
var comment = $(this).find('p');
var count = comment.children('.pronoun').length;
var i = 0;
var child = 0;
var children = [];
while (i <= count) {
n = parseInt(count/((count/100)*slider));
child = (n * i) + 1;
children.push(child);
comment.children('.pronoun:nth-child(' + child + ')').html(name);
i++;
}
console.log("slider is " + slider + ", pronouns : " + count + ", i is: " + i + ", n is: " + n + ", children are: " + children.toString());
});
});
However, as it stands my slider is having the opposite effect - the distribution is becoming larger, not smaller, as the slider goes to the right.
Any suggestions or pointers would be appreciated. There may also be an alternate solution I haven't remotely thought of, and I'm equally open to suggestions in that regard.

Solving exponential equations from 2 points

I have been working on this code for a while now, and since I am only in 9th grade, I don't have much algebra experience. I have tried many things, and this is where my scripts are now.(Note, this is just the JavaScript, the id's being called for are the boxes with the info and the output).
<script>
function SolveExp() {
//constants
var d = document;
//Point values
var EX1 = eval(d.getElementById('EX1').value);
var EX2 = eval(d.getElementById('EX2').value);
var EY1 = eval(d.getElementById('EY1').value);
var EY2 = eval(d.getElementById('EY2').value);
//Exponential Equation y=a*bx
var a,bx,EQX,EQY;
//To organize the system for "x"
if(EX1 > EX2) {
EQX = EX1 - EX2;
}
else if(EX2 > EX1) {
EQX = EX2 - EX1;
};
//To organize the system for "y"
if(EY1 > EY2) {
EQY = EY1 / EY2;
}
else if(EY2 > EY1) {
EQY = EY2 / EY1;
};
a = -(EY1) + Math.pow(bx,EX1);
bx = Math.pow(EQY,EQX);
document.getElementById('ExpEQ').innerHTML = "y = " + a + "(" + bx + ")<sup>x</sup>";
}
</script>
That only works with "b" in the form y = a(b)x from the points (0,4) and (1,8). A is always -3 when I plug those points into the boxes. The equation is completely different when I use points from the same line. Any got solutions?

you can't use bx in the equation for a before you have assigned it a value. those two lines are out of order. EQX and EQY don't get assigned to anything if EX1 = EX2 or EY1 = EY2. eval is a taboo word in javascript and should be used with extreme caution. Other people will harass you about using it. Read up about why it's bad and decide for yourself.

Javascript if conditional for a CSS value

I'm trying to write a JavaScript conditional which states, "If the #inner id's 'top' value is currently less than 500px then decrease it by 15px."
I am using jQuery and the code works fine if I remove the conditional.
But the following does not work:
if parseInt($("#inner").css("top"), 10 < 500 {
$("#inner").css("top", parseInt($("#inner").css("top"), 10) + 15 + "px");
}

Syntax errors, several of them ?
Try seperating it a little so you see what's going on :
var top = parseInt( $("#inner").css("top"), 10 );
if ( top < 500 ) {
$("#inner").css("top", top + 15);
}

Error in your syntax.
var top = parseInt($("#inner").css("top"), 10);
if (top < 500) {
$("#inner").css("top", (top + 15) + "px");
}
Would be good to read about if statetement here : W3Schools

SetInterval slowing down

After finding out I cannot use vender prefixes in Javascript, I tried to make my own fade-to-blur. After about 5-10 seconds of the script running the console.log calls slow to around one per second. Is this something on my end?
Here's the code I've made
var i = 0;
var iv = setInterval(function(){
if(Number(i) > 2)
{
clearInterval(iv);
}
console.log(i);
r = i.toFixed(2);
$('#r').css('filter', 'blur(' + r + 'px)');
$('#r').css('-webkit-filter', 'blur(' + r + 'px)');
$('#r').css('-moz-filter', 'blur(' + r + 'px)');
$('#r').css('-o-filter', 'blur(' + r + 'px)');
$('#r').css('-ms-filter', 'blur(' + r + 'px)');
i += 0.01;
}, 1);
And a JSFiddle
I'm guessing it's the way JS deals with floating-point numbers, also is there any way to get the fade to blurry more smooth? It's quite jumpy once i gets to around 0.8. How do I fix the second delay on the setInterval? Can anyone else reproduce this?
Things to note
The same thing occurred while trying to do the same with a for-loop, but it also rendered the page useless until it got to 2 when the loop stopped.

You can make the script faster by caching the calculation of the string 'blur(' + r + 'px)' into a javascript variable and save unwanted calculation.
You can also cache the $('#r') object into a javascript variable or even use the jquery css multiple-word properties: $('#r').css({propertyName : value , propertyName : value})
Something like:
var calc = 'blur(' + r + 'px)';
$('#r').css({
'filter' : calc ,
'-webkit-filter' : calc,
'-moz-filter' : calc,
'-o-filter' : calc,
'-ms-filter' : calc
});
check it here: http://jsfiddle.net/gMq3P/3/

jquery.event.drag - Run script for every X pixels dragged

I am using jquery.event.drag.js in a project I am creating, and I am trying to figure out a way to run a script for every X amount of pixels I have dragged. I am using only the X axis for this. Here is some code I have right now.
$('body').drag(function( ev, dd ){
var newcell = currentCell;
var dragOffset = Math.floor(dd.offsetX / 100);
if (dragOffset >= 1) {
alert("Dragged 100px");
}
newcell += dragOffset;
$('#info').html(dragOffset + " | " + dd.offsetX);
updateStack(newcell, magnifyMode);
});
This works, however, since this script runs for every pixel dragged, this runs the alert after 100px dragged, but from then on it runs for every pixel I drag it after that. I'm looking for a way to only run it for every 100px I drag it. Any ideas?

have an outside variable tracking when you last did the alert:
var chunkedOffset = 0;
$('body').drag(function( ev, dd ){
var newcell = currentCell;
var dragOffset = dd.offsetX / 100;
if (dragOffset > chunkedOffset) {
chunkedOffset = dragOffset;
alert("Dragged 100px");
}
newcell += dragOffset;
$('#info').html(dragOffset + " | " + dd.offsetX);
updateStack(newcell, magnifyMode);
});

I'm not entirely familiar with drag.js, but, you could just use modulus division to make sure its every 100px.
x % 100 - will be 0 if divisible by 100, so
if(dd.offsetX % 100 == 0)
{
alert("Dragged 100px");
}