We Keep Coding

How do I animate/interpolate between two CSS values in Javascript

The following code is working fine, but I'm looking for a way to animate/interpolate between the two creating a slide effect. How can I achieve this?
(I need to have the odd click function as is probably because of how the rest of the site works, otherwise I would have used the jqueryUI slide function)
$('.boxbtn').on('click', function () {
var boxwidth = $('.box').width();
console.log(boxwidth);
console.log('-' + boxwidth + 'px');
var oddClick = $(this).data("oddClick");
$(this).data("oddClick", !oddClick);
if (oddClick) {
$(".box").css('margin-left', ('-' + boxwidth + 'px'));
}
});

scripting in css with some creativity

I found the following creative accepted answer
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).css('offset');
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
I wanted to know how .css('offset') is working so I made a jsfiddle but it's alerting "undefined".
Can anyone describes about this, working and is correct way?
Comment:
I know to use .offset() but I don't mean to use this, but my question regards how the accepted answer's code is working ....... with .css('offset')? That's all.

There's no offset property in CSS. with jQuery.css(propertyName) you can only access properties that exist. Everything else will return null.
for example:
jQuery.css('myImaginativePropertyname'); // returns null
jQuery.css('border'); // would return '0px none rgb(0, 0, 0)'
However
You can access the event.target (DOM element) like this:
jQuery('.get-close-to').hover(function(e) {
var elem = e.target;
alert( 'Left: ' + elem.offsetLeft + '\nTop: ' + elem.offsetTop );
}, function(e){});
I added the second function so that the code won't be executed twice. If you have only single function as input on jQuery.hover(), it will execute both in hover and blur. If you add a second function as a parameter, the first one will be executed on hover, while the second will be executed on blur of the element.
Here's the fiddle: http://jsfiddle.net/JLAK4/2/
Some people may argue to use jQuery(this).offset() instead, but why waste cpu cycles for yet another method call while you already have your DOM element populated and at your disposal? jQuery is a nice compatibility layer, I give you that. But abusing and overusing it makes no sense at all.

Do you want to be using .offset() instead?
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});

Try this:
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});

I think he wanted to say like this: working fiddle
jQuery('.get-close-to').hover(function() {
var offset = jQuery(this).offset();
alert( 'Left: ' + offset.left + '\nTop: ' + offset.top );
});
But mistakenly he has typed .css('offset') may be.

get height of a div and set the height of another div using it

I have two divs, neither have a height set in css, as I want to take whatever height they end up as and set the other div to be that height.
The javascript I have is this
function fixHeight() {
var divh = document.getElementById('prCol1').height;
document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
document.getElementById('prCol2').style.height = divh + 'px';
}
I have the following line of code just to see if I am getting some kind of actual response.
document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
I have a onload set to run the function
my two divs look like this
<div id="prCol1">
..content..
</div>
<div id="prCol2" class="slideshow">
..content..
</div>

Use offsetHeight - http://jsfiddle.net/HwATE/
function fixHeight() {
var divh = document.getElementById('prCol1').offsetHeight; /* change this */
document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
document.getElementById('prCol2').style.height = divh + 'px';
}

You can use jQuery to get the height and set it.
var h = $("#prCol1").height();
$("#prCol2").height(h);

you can get height by this code:
document.getElementById('YourElementID').clientHeight;

There are jQuery plugins to do this in a general way. Here's one.

I would recommend using jQuery here. You can't get the height of an element like you are trying in any browser I know of. Here is the code if you use jQuery which is very straightforward. I wouldn't try to do this without jQuery because browsers can be different in respect to how you access height.
function fixHeight() {
var $prCol1 = $('#prCol1');
var divh = $prCol1.height();
$prCol1.html('<ul><li>' + divh + '</li></ul>');
$('#prCol1').height(divh);
}

Binding events to a jquery object not working

I've been trying to bind events to jquery objects (code below) but its really not working at all. Could somebody offer me a suggestion? Thanks!
var img = thumbnail[0].appendChild(document.createElement('img'));
img.className = 'smallboard';
img.src = 'res/smallboard' + i + '.jpg';
img.onload = function() {console.log('small board loaded.');}
img.style.top = (8-i)*height+5 + 'px';
img.style.left = 4 + 'px';
var jqimg = $(img);
jqimg.bind('click', function(){
console.log(i + '');
show_board(i-1, true);
});
Here, thumbnail is a jquery element and i is a small whole number. I had problems with binding it in another way as well. (code below)
highlight = $('<div id="level_highlight"></div>');
highlight.css('height', height + 'px');
highlight.css('width', width + 'px');
highlight.css('display', 'inline');
highlight.css('left', posx + 'px');
highlight.css('top', posy + 'px');
highlight.bind('mouseover', function() {console.log('mousing over highlight');});
Its not working here either. I feel I am making a silly error somewhere. I'm using Chrome.
Thank you!

seems to work for me...
see my jsFiddle example. Am I missing something?

Is it just an error in your retranscription here or did you froget
the var before highlight ?
var highlight = $('');
Did you append it somewhere in the DOM ($('body').append(highlight);) or something, if it already exists, you should do var highlight = $('#level_highlight'); instead

Thanks guys. The answer was that since this code is an over-simplification of the code-base, I'd missed out a part where the z-index for the container element for this section was set to -10. Set that part correct and it worked like a charm.
Thanks.

Converting simple Javascript to jQuery

I have this:
<script type="text/javascript">
window.onresize = fontResize;
function fontResize() {
document.body.style.fontSize = parseInt(document.documentElement.clientWidth/100) + 'px';
}
</script>
Could someone have a crack at converting this to jQuery please, i have DIV's with class "features" and i need the P text to fill them when they are resized, so i need to font-size to grow/shrink along with the DIV. That make sense?
Thanks

Is this what you are looking for?
window.onresize = fontResize;
function fontResize() {
$('body').css('font-size',parseInt($('body').css('width'))/100) + 'px');
}

Here... jQuerified
$(document).ready(function(){
$(window).bind('resize initialSize',function(){
$('body').css('font-size', ($(window).width()/8) + 'px');
}).trigger('initialSize');
});

This one takes in account the initial size
function fontResize(){
$('body').css('font-size', ($(window).width()/8) + 'px');
}
fontResize();
$(window).resize( fontResize );
http://jsfiddle.net/Hpgfp/1