Develop Reference

Moving a div to the right

I have this really fundamental question, but I have no idea wheres the problem.
Here's fiddle: http://jsfiddle.net/nL6fvrz8/
I just simply want to move the object to the right with this js, but when I do that in the fiddle it doesnt move at all and if I do it on my computer, it keeps giving me the primary position of the 200px(the amount i want to add it to its first position)
function doMove(){
var foo = document.getElementById("foo");
foo.style.left = (foo.style.left + 200) + 'px';
}
I know its prolly a little simple, but im clueless. Thanks for your help.

Only inline styles can be referenced via the x.style syntax. To get styles set via a style sheet, use getComputedStyle:
function doMove() {
var elem = document.getElementById("foo");
var foo = window.getComputedStyle(elem, null).getPropertyValue("left");
elem.style.left = parseInt(foo,10) + 200 + 'px';
}
jsFiddle example

Define basic position in JS as well, and add parseInt when reading style (left is string in format like this 200px).
document.getElementById("foo").style.left = "300px";
function doMove() {
var foo = document.getElementById("foo");
foo.style.left = (parseInt(foo.style.left) + 200) + 'px';
}

Get Computed Height - Javascript - Not jQuery

I have two divs side by side set to height auto. I want them to have equal height, so i combined them as members of an array.
I recurse through the array and set the not-tallest ones to the height of the tallest. Problem is everything i have tried to get the COMPUTED height has resulted in the incorrect value.
I have tried the following:
(els[x].currentStyle) ? h=els[x].currentStyle.height : h=window.getComputedStyle(els[x],null).height;
h = el.clientHeight || el.offsetHeight || el.scrollHeight;
Both of these are yielding 640 px'ish while the computed is 751.8 in my particular showing.
Is there possbily a constant I can use to get the correct height. Like maybe the number im getting would be on a standard size screen (like 960 pixels high or such) then multiple that by the window size?

I have had a lot of good use of this little function I came up with
function getH(id)
{
return document.getElementById(id).offsetHeight;
}
// I have a styles.js file where this function feels right at home. Access this function from anywhere.
This will return the height of any given elements given to the function (by it's ID). So now we'r 1/3 of the way.
Then use the Math.max() function to get the height of the largest element.
var maxH = Math.max(getH("ID1"),getH("ID2"));
This is 2/3 of the way, YAY - Now set the elements height to be the same.
var x = document.getElementById("ID1");
var y = document.getElementById("ID2");
x.style.height = maxH +"px";
y.style.height = maxH +"px"; //Remember the +"px" has to be added as a string, thats the reason for the "".
DONE!! - Now put it all together
I would imagine something like this
function setElementHeight()
{
var maxH = Math.max(getH("ID1"),getH("ID2"));
var x = document.getElementById("ID1");
var y = doc...("ID2");
x.style.height = maxH +"px";
y.style.height = maxH +"px";
}
// Don't forget to include the first function in you'r .js file
This WILL set both ID's to the same height and the height WILL be equal to the highest. That is what you want, isn't it?
--EDIT--
I would throw away the array if I were you. Just have the 2 DIV's each with a unique ID and make them equally tall based upon that.
Molle

If you have the DOM document, you can try the below code:
let divElement = document.getElementById('divId');
let height = document.defaultView.getComputedStyle(divElement).height;
'height' will have the exact height of the element with 'divId' once it is computed.

jQuery variable issue

Quick overview, when a user clicks a link with an anchor tag it opens the closest hidden div to that anchor on the destination page.
My problem seems pretty basic I just can't figure it out.
Why does this work(specifying the variable to set the height to, in this case height7):
var height7 = 100;
if(window.location.hash) {
var hash = window.location.hash.substring(1);
$('a[name='+hash+']').closest('[id^="option"]').show();
$('a[name='+hash+']').closest('[id^="option"]').height(height7);
} else {
// No hash found
}
And this not work(in this case trying to build the name of the div i want to open, place it in a variable and passing it to the height() function exactly as above, for some reason it doesn't accept the variable):
if(window.location.hash) {
var hash = window.location.hash.substring(1);
var option_name = $('a[name='+hash+']').closest('[id^="option"]').attr("id");
var hash_div_height_id = "height" + option_name.substring(6);
alert(hash_div_height_id);
$('a[name='+hash+']').closest('[id^="option"]').show();
$('a[name='+hash+']').closest('[id^="option"]').height(hash_div_height_id);
} else {
// No hash found
}

You're assigning different values in each case:
$('a[name='+hash+']').closest('[id^="option"]').height(height7); //height = 100
$('a[name='+hash+']').closest('[id^="option"]').height(hash_div_height_id); //height = "height" + option_name.substring(6)

You seem to be assigning a string value
var hash_div_height_id = "height" + option_name.substring(6);
.height(hash_div_height_id);
Where as it is supposed to be a number.
So hash_div_height_id will be something like height + something
When setting a height property it expects
An integer representing the number of pixels, or an integer with an
optional unit of measure appended (as a string).

Javascript style.left is empty string

next.onclick = function() {
move('left', li_items[0]);
};
var move = function(direction, el) {
pos = el.style[direction].split('px')[0];
pos = parseInt(pos, 10) + 10;
el.style[direction] = pos + 'px';
};
I'm using the simple code above to try and move an element. Now when I breakpoint on this, the value of el.style[direction] is: " ". So then when i try to do anything with it, it breaks. Why would this be? Isn't style.left supposed to return an integer?

Why would this be?
Presumably because it hasn't been set to anything.
Isn't style.left supposed to return an integer?
No. It is supposed to return a string containing the value of the CSS left property as set directly on the element (either by setting the JS property itself or by using a style attribute). It does not get a value from the cascade and it should only be an integer if the value is 0 (since all other lengths require units).
See How to get computed style of a HTMLElement if you want to get the computed value for the property rather than what I described in the previous paragraph.

style provides the original style as calculated from the CSS, not the updated and possibly dynamic style. You probably want currentStyle instead.

next.onclick = function() {
move('left', li_items[0]);
};
var move = function(direction, el) {
var lft = document.defaultView.getComputedStyle(el)[direction];
pos = parseFloat(lft);
pos = parseInt(pos, 10) + 10;
el.style[direction] = pos + 'px';
};
Note: like Elliot said you'll have to get the currentStyle/computedStyle. Here's a way to make it cross-browser, however when applying styles via JS, this is one good case where some sort of framework (eg Prototype [Scriptaculous], jQuery) would be useful.

Just a comment.
In your code:
> pos = el.style[direction].split('px')[0];
> pos = parseInt(pos, 10) + 10;
The split in the first line is superfluous, in the second line parseInt will convert (say) 10px to the number 10 just as effectively (and more efficiently) than what you have.
pos = parseInt(el.style[direction], 10);

Check whether variables are equal with jquery

Hey i am new to jquery and i was wondering whether someone could give me some help when it comes to working with variables. The below is what i have thus far. I want to find a certain divs left position and width and then do some basic maths with those variables. Sorry is this explanation is a little confusing. So just a example as to how i would create a variable from a divs width and how to check whether variables are equal to one another would be great.
$(document).ready(function(){
//Check distance from left
var p = $(".GalleryItem");
var position = p.position();
$(".LeftPosition").text( "left: " + position.left + ", top: " + position.top );
//Check width of GalleryItem
var GalleryContainer = $(".GalleryItem");
$(".WidthText").text( "innerWidth:" + GalleryContainer.innerWidth() );
//Check width of Gallery
var GalleryContainer = $("#Gallery");
$(".WidthGalleryText").text( "innerWidth:" + GalleryContainer.innerWidth() );
});

The .width() function is "recommended when width needs to be used in a mathematical calculation". It also covers windows and document rather than just divs.
var position = $('.GalleryItem').position();
var galleryItemLeft = position.left;
var galleryItemWidth = $('.GalleryItem').width();
var galleryWidth = $('#Gallery').width();
// do calculations such as
var galleryItemRight = galleryItemLeft + galleryItemWidth;
// check if one width = another
if(galleryItemWidth == galleryWidth) { ... }
For jQuery, working with return values is just like working with any return value in javascript. Set a var = to the function (expecting a return value), compare with the '==' operator. In jQuery you can also set the actual selector objects to variables as you have done with 'var p = $('.GalleryItem');' To compare selector objects you would compare them by their properties, such as position, width, color, etc.
Hope this helps.

I guess you could just do something like:
var galleryItemWidth = $(".GalleryItem").innerWidth();
var galleryWidth = $("#Gallery").innerWidth();
And then just check something like this:
if (galleryItemWidth == galleryWidth) {
// Do something
}
else {
// Do something else
}
Or maybe I misunderstood your question?