Develop Reference

translating jquery code gives me troubles, this.querySelector is not a function, from $(this).find('img')

so i have not found similar issue, i thought equivalent of .find is querySelector, and 'this' exist in pure JS too, i think similar script work so i hope it works the same
i am translating this function
$('.my-gallery').each(function() {
$(this).find('a').each(function() {
$(this).attr('data-size', $(this).find('img').get(0).naturalWidth + 'x' + $(this).find('img').get(0).naturalHeight);
});
});
and this is my current translated code
var elements = document.querySelectorAll('.my-gallery');
Array.prototype.forEach.call(elements, function(){
var a = this.querySelector('a');
Array.prototype.forEach.call(a, function(){
this.getAttribute('data-size', this.querySelector('img').naturalWidth + 'x' + this.querySelector('img').naturalHeight);
});
});
everything goes find but it gets stuck at this.querySelector('img').naturalWidth, i am not sure why beacuse this.getAttribute works fine, so why i cannot query chilren of this element

You can do more than just translate it. You can improve on it so you don't have to use this. It also looks like you're trying to set the attribute and not get it, based on your jQuery code.
The below should work for you.
Array.from(document.querySelectorAll('.my-gallery a')).forEach(function(anchor) {
anchor.setAttribute('data-size', anchor.querySelector('img').naturalWidth + 'x' + anchor.querySelector('img').naturalHeight);
});

JavaScript: Variable in class to be searched

I'm pretty new to javascript, so this is probably a fairly easy question. However, part of the problem why I can't fix it myself is, that I don't know exactly what to search for.
I have multiple progress bars, these are distinguishable by implementing a class:
<div class=\"progress_bar bar" + pbid + "\" value =\"100\">
Now, in JS, I try to adress them directly by their class:
function updatepb(pbid) {
var val = $('.progress_bar.bar' + pbid).progressbar('value');
val += 60;
$('.progress_bar.bar' + pbid).progressbar('value', val);
};
This does not work.
If I adress the bars directly, e.g
$('.progress_bar.bar1').progressbar('value', val);
it works.
So the problem is basically just how to implement the variable.
Can someone please tell me what I'm missing? :-)

dynamically generated js buttons with closures to assign onclick function parameters

I am running into a problem people have posted before: JavaScript dynamic parameters
But my code uses nodes rather than innerHTML assignments, so the existing SO post doesn't seem to apply to my code.
I want to dynamically generate HTML buttons in a table. For each button, I want to call a function with parameters that depend on the button's index/position in the table. First I tried just using lambda functions with the variable over which I was incrementing. This didn't work, so I also tried dynamically named variables, meaning each button should be passing a differently named variable to deal with lazy-loading effects. But this didn't work either. You can see both versions of what I tried in the code below:
This code I paste below is in a for-loop. In the following, I increase i by 1 each time. offset and jj are unchanged within the loop.
var variableDynamic = i.toString();
window['variableName' + variableDynamic] = i + offset;
upvote.onclick = function() {
upVoteA(i + offset, jj);
//upVoteA(window['variableName' + variableDynamic] , jj);
};
upvote.innerHTML = "Upvote"
Someone told me to look into closures, so following this recommendation: http://www.usepatterns.com/blog/javascript-closures I rewrote the onclick function declaration as:
upvote.onclick = function() {
var a = i + offset;
var b = kk;
function closeIt(){
upVoteA(a,b);
}
closeIt();
};
This still has the same effect that every button calls upVoteA with the same parameter, namely the last/highest value.
I realize I could refactor my code to turn these into .innerHTML set statements and then I'd print the variable and it would be set as a printed statement instead of a lazily-loaded variable. But I'd like not to do that if possible. (apologies that it's not technically lazy loading, the name seems reasonably apt)
Is there a way to make my code work? And why are the closures failing? I thought closures should preserve the environment they were created in, but that is not the case with my code. Which portion of the "environment" are preserved with closures?

This is a very bad answer, but it works
var funcStr = "function dummy() { upVoteA(" + (i + offset) + "," + jj + "); }";
eval(funcStr);
upvote.onclick = dummy;
But if you have something better, please let me know.

Modifying CSS background-position by increment via javascript

Whereas I have plenty of experience with PHP coding, I am pretty new to using javascript so I hope this question doesn't come off as stupid.
My goal here is to create a button that when pressed causes the background-position in a defined DIV object to alter its background-position by one pixel.
I've been doing a lot of searching on Google as well as this site in particular and following the tips I have found I've been playing around with the javascript functions a lot but I can't seem to get one that works the way I need it.
My current incarnation looks like this:
<SCRIPT TYPE="text/javascript">
var xObject = 0; // Global
function xMinus(ele) {
xObject-=1;
document.getElementById(ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' });
}
</SCRIPT>
Where the goal is upon clicking the button (containing onclick="javascript:xMinus('divID');" ) the background should shift to the left by one pixel.
However currently when I click it, Error Console gives me "Error: document.getElementById(ele).css is not a function".
I've tried a few different variations but always get similar results, or "Variable is not defined". Clearly I have no idea what I am doing. Please help! I am coding this for friends and do not want to keep them waiting too long.

If you are not using jQuery then,
document.getElementById(ele).style.backgroundPosition = xObject + 'px ' +'0px';

What are you passing inside the ele? It should be a string of the id of the element and it shouldn't start with a number.
Try rewriting the code this way:
var xObject = 0; // Global
function xMinus(ele) {
xObject--;
$('#'+ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' });
}
I hope you are using jQuery! :) If not using jQuery, it should be:
document.getElementById(ele).style.backgroundPosition = xObject + 'px ' + '0';
And for the handler, that <a> tag, the code should be: (shouldn't contain javascript:)
BG Left Push!

jQuery- .css() not working for an input

This should be a really simple problem, but I can't quite figure out what I am doing wrong. I am trying to access the CSS property 'border-bottom' like this:
var temp = $('#divName').css('border-bottom');
Unfortunately, after this, temp contains the string ""
Does anyone know why this is not working or what I should do differently to make it function? Thanks.

The styles have to be more specific. Since border-bottom is a short-property for other properties (similar to background, to name a common one), the property has to be explicitly given.
var elem = $('#divName');
var border_width = elem.css('border-bottom-width');
var border_color = elem.css('border-bottom-color');
var border_style = elem.css('border-bottom-style');
var border_bottom = border_width + " " + border_color + " " + border_style;
Fiddle: http://jsfiddle.net/6wRj4/
See also: MDN: border-bottom short-hand.

Check to ensure that $('#divName') does select a single element. You can use array syntax on a jquery object to get back the underlying DOM object. You should also check (for example, using Firebug) to make sure that the DOM element you're looking at does have the style that you're looking for.
If both of those things are working correctly, you might try using the more granular border properties... border-bottom-style, border-bottom-width, etc.

Try with document.getElementById("divName").style.borderBottom;.