We Keep Coding

How to output element height in an alert box (height is stored in a variable)?

Why when I try to output element height (which is in stored variable) I get an alert box :
https://jsfiddle.net/2z7yLwhf/
I want to alert the number which is the height of div.item1...
jQuery:
function number() {
var number = $('.item1').height($('.item2').outerHeight());
alert(number);
}
number();

You have a parenthesis mismatch. It should be
var number = $('.item1').height($('.item2')).outerHeight();
since you want to get the height, and then extract outerHeight.
https://jsfiddle.net/2z7yLwhf/1/
EDIT: This is really a workaround -- I don't actually know why it works. Do it this way instead:
var number = $('.item1').outerHeight();
https://jsfiddle.net/2z7yLwhf/2/

.height(...) returns the the jQuery object (for chaining), not the height you passed it.
You need to store the number first.

send Javascript variable to .css({transform: translate (var,var)})

I wanted to move a div 136px to right with transform property so i wrote:
`
$(".the_div").css({"transform":"translate(136px,0px)"});
and the_div class contains
.the_div
{
transition-duration:2s;
}
and it worked but now i want to send a javascript variable instead of 136px.
is that possible? how can i do that?
a variable like
var my_width = window.innerwidth * 0.1;
i wrote
$(".the_div").css({"transform":"translate(my_width+'px',0px)"});
and it obviously didnt work.
do you have an idea to move a div One-tenth of screen width to right (using transform property)?

You can do this in pure Javascript as well using template strings.
(PS - you don't even need JQuery)
First, save the div in a variable
const theDiv = document.querySelector('.the_div');
Second, save the value you want to translate in a variable
let number = 136;
Lastly, set the style attribute of the div
theDiv.style.transform = `tranlate(${number}px,0)`;
Hope this helps answer your question
Here is a helpful link for template strings
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

simply you just need concatenate variable in string in javascript " + my_width + "
$(".the_div").css({"transform":"translate(" + my_width + "px,0px)"});

Use a variable for the index of an array in javascript

Here is my code:
var span = getSpanWithClass("galleria-current");
var slideNumber = span.innerHTML
var imageIDDivs = document.getElementsByClassName("slideshowImage");
var singleimageidDiv = imageIDDivs[slideNumber]
If I use this, sigleImageidDiv doesn't have anything in it. If I just put 0 or 1 in like this:
var singleimageidDiv = imageIDDivs[1]
It works fine. slideNumber is 1, in my test cases.
I have tried these as well:
var singleimageidDiv = imageIDDivs[Number(slideNumber)]
var singleimageidDiv = imageIDDivs[parseInt(slideNumber)]
What is the proper way to use a variable as the index of an array?

Parse to int with a radix.
This is the proper way of doing it:
imageIDDivs[parseInt(slideNumber, 10)];
Live DEMO
If it doesn't work, then your problem is somewhere else.
BTW indexes work with strings as well.
DEMO

innerHTML returns the string inside the element, so if even if you have a number inside your element, it'll be returned as a string, that's why when you use that variable as an index for your array, you don't get a result.
Using parseInt is an acceptable solution, you could also just do something like span.innerHTML * 1, that would force JS to treat the string as an integer.

I think, you have an error in your getSpanWithClass function.

JQuery adding number value

can someone help me debug this please???
i'm really don't know whats wrong with my code...
i'm trying to add number value to another number value.... but it does not work as i expected...instead it just add the number as a string.
Here is my demo:
(already solved)
and here is the js code:
$(document).ready(function(){
$("#map").click(function(e){
var x = parseInt((e.pageX - this.offsetLeft)) - parseInt("140");
var y = parseInt((e.pageY - this.offsetTop)) - parseInt("140");
var coor = $("#map").css("background-position").split(" ");
var cx = parseInt(coor[0].replace("px",""));
var cy = parseInt(coor[1].replace("px",""));
$("#map").stop().animate({"backgroundPosition": x+cx+" "+y+cy},"slow");
alert("X:"+x+", CX: "+cx+"\n Y:"+y+", CY:"+cy+"\n Background-pos:"+$("#map").css("background-position"));
});
});
please tell me what's wrong with it...

Put parentheses () around your arithmetic operations.
$("#map").stop().animate({"backgroundPosition": (x+cx)+" "+(y+cy)},"slow");
Otherwise, adding the whitespace string will force the JS to concatenate your numbers as a string.
Fiddle example

In your animate-Statement towards the end you set background position to:
x+cx+" "+y+cy
This is interpreted as a string, because the four +-operations are interpreted equally. You do, really, concatinate a string (" "). Thus, the entire result of this expression becomes a string and the addition is no longer an addition but a concat.
However, if you capsulate the math into parenthesis, then you should be fine. Your second-last line becomes:
$("#map").stop().animate({"backgroundPosition": (x+cx)+" "+(y+cy)},"slow");
(note the extra brackets around x+cx)

Isn't it ?
var x = parseInt((e.pageX - $(this).offset().left)) - parseInt("140");
var y = parseInt((e.pageY - $(this).offset().top)) - parseInt("140");

The following works for me:
$("#map").click(function(e){
alert(e.pageX);
alert(this.offsetLeft);
alert(parseInt(e.pageX)-parseInt(this.offsetLeft));

javascript problem with implicitly typed variables

Forgive this novice question (novice in Javascript!).
In a html page I have a set of images with a name and a number: img1 img2 img3... img12...
And there is a JS function where I need to iterate from (say) img5 to last img.
If I write this:
function iterateImg(objImgID) {var imgNum = objImgID.replace("img","");
for (i=imgNum+1;i<20;i++)
.../...
The variable "i" is treated as a string, and i+1 receive the value "51" if the passed object's ID is img5.
Of course I can still iterate from 1 to n and only perform the desired task when the value of i reaches 6, but that would be an ugly fix.
How can I fix this please? How can I create a variable that will be treated as an integer before I use it as seed?
Besides, what would you recommend as best practice?

var imgNum = Number(objImgID.replace("img",""));
That'll do it.
Or better yet (because I love regex)
var imgNum = Number(objImgID.match(/[0-9]+/));

Use parseInt to convert the string to a number
var imgNum = parseInt(objImgID.replace("img", ""));

There are several ways to force JavaScript to convert it into a number
parseInt(x, 10) - the 10 is the base of the number
x - 0 - subtracting only works for numbers
x * 1 - multiplying also

var imgNum = parseInt(objImgID.replace("img",""), 10);
Now when you do var i=imgNum+1, it will perform addition of 2 integers.