Develop Reference

Max-height based on height of other element

I would like to be able to set the max-height of one element based on the (variable) height of another one — though I'm very much a JS beginner, I'm just about positive there's a way to do so with it. This is not the parent element I want to base the max-height on. Obviously, I want this solution to work regardless of whatever the height of the element might be at any given time on any given page.
Just to be clear, I want to find the height of, let's say, an element with the class "ElementOne", and then set the max-height of "ElementTwo" to, say, height-of-ElementOne plus 113px.
How do I go about doing this?

I use this snippet by Paul Irish to do just that:
$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}
// usage: $(‘div.unevenheights’).setAllToMaxHeight()

I think thats what you mean:
var h = document.getElementById("ElementOne").style.height;
document.getElementById("ElementTwo").style.maxHeight = h + 113 + "px";

This uses jquery to assign an event listener to the resize event of the window and ELementOne (Note: I don't think that most html trigger there own resize event). Here is a jsfiddle: http://jsfiddle.net/xiondark2008/UPqsV/
I add color to the divs so you can see them.
html:
<div class="ElementOne"></div>
<div class="ElementTwo"></div>
javascript:
function setHeight(){
var elementOne = $(".ElementOne").height();
$(".ElementTwo").height( elementOne +113);
}
$(window,".ElementOne").resize(setHeight);
setHeight();

Jquery get specific *instance of the class* that triggered an event

I am working on a game in which JSON data is turned into a bunch of classes that are painted on top of the main map. Each icon is a small 20x20 pixel box. Moving the cursor over each box is then meant to change another div's html to relay the information "hidden" inside of each class's value.
My code goes like this:
$('.City_Palace').mousemove(function(e) {
e.stopPropagation();
var x = Math.floor((e.pageX - this.offsetLeft + $("#scrollWindow").scrollLeft()) / tileSize);
var y = Math.floor((e.pageY - this.offsetTop + $("#scrollWindow").scrollTop())/tileSize);
var text = $('#WorldMapMessage').html();
alert(e.target.className);
$('#WorldMapMessage').html(x +', '+ y + " " + $(this).val());
// alert($(this).val());
});
This code currently brings up an alert box with the classname of what caused the event. However, what I need to know is which precise instance of the .City_Palace class triggered the event so I can display the appropriate text. If I were using ids instead of classes, this would be trivial, but for this I need to use classes and know which one is invoking the event.
Thanks for the help!

You already seem to be doing this.
Inside the function you pass into .mousemove(), you have access to this, which refers to the specific instance of the element that's being hovered on. You can use it to get anything else you might need from that specific instance of the element. For example:
$('.City_Palace').mousemove(function(e) {
// $(this) is the specific instance of .City_Palace that's being hovered on.
alert($(this).attr("class")); // Alert the class name.
});

How to calculate each element's height and use these values as a variable in function?

I am trying to create a simple text accordion which calculates each panel's height and return this value as a variable. I can get values with if statements like if ( i === 0 ) { $(this).height(); } but can't get this variable to the outside.I can do this without using variable but it became useless in long term.
Brıefly: I want to calculate each element's height and use this variable inside click function.
Here is jsFiddle which includes the problem.
var panel = $('.holder div');
var trigger = $('a');
panel.each(function(i) {
//problem starts when i try to calculate each ele's height
var eachEleHeight = i.height();
trigger.click(function() {
$(this).prev('div').animate({'height':eachEleHeight+'px'},500);
//this works widthout var eachEleHeight but became useless
//$(this).prev('div').animate({'height':'300px'},500);
});
//this is for hiding text at doc.ready
panel.css('height','56px');
});​

If I well understood, try this :
panel.each(function(i, el) {
// create a reference to te current panel
var $el = $(el);
// execute a function immediately, passing both the panel and its height
(function(p, h) {
// the trigger is targeted as the next link after the current panel
p.next('a').click(function() {
p.animate({ height : h + 'px'},500);
});
}($el, $el.height()));
// set each panel height
$el.css('height','56px');
});
Example fiddle : http://jsfiddle.net/Aw39W/55/

There is a problem with the code you posted. i is the index of the current element. Not the element itself.
Try var eachEleHeight = $(this).height();
Fiddle

The sequence of events you've used seems a bit weird. You're actually binding a click event to all a tags for each panel element. Try this: Fiddle
I just used the min-height and max-height css attributes to store the initial to/from height variables. This will automatically get you your starting heights.

If I understand the question, you want to have the elements height for the accordion animation function. This is a trick but it works. I frequently use Mootools so I'll write using it. You should be able to figure it out.
var orgHeight = i.offsetHeight;
i.setStyle('height','100%');
var eachEleHeight = i.offsetHeight;
i.setStyle('height',orgHeight);
Essentially you would be flipping the element to reveal it's height and flipping it back before the document has time to make it visible on screen.
Not sure this is exactly what you were looking for, but hope it helps.

Mouse Click coordinates - a true solution ... is there one?

There are, as of now, 3,898 posts in StackOverflow regarding mouse click coordinates. They all cover everything on how to find the coordinates for the mouse .... in relation to an element.
Has anyone been able to implement a solution where, at any point of your processing, you can recall the coordinates of the very last mouse click?
I have tried everything and every solution for the last 8 hours or so but cannot come accross anything that can recall the last mouse click coordinates.
Apparently, you have to catch it right where you are processing $('...').click(function(e){...});
How about if I sent the processing somewhere and, within that processing (a few nanoseconds later) I want to find out the coordinates of the last mouse click? How can I retrieve it outside an specific function?
EDIT:
Based on sdleihssirhc's suggestion, I was able to implement a solution that is working for me:
On the main page I have created two divs (to avoid dealing with arrays and global variables):
<div id='mouseX' style='display:none; ' ></div>
<div id='mouseY' style='display:none; ' ></div>
On the main page within the script tags:
$('#wrapper').click(function(e) {
var offset = $(this).offset();
$('#mouseX').text(e.clientX - offset.left);
$('#mouseY').text(e.clientY - offset.top);
});
Whenever needed, I can just:
var clickX = $('#mouseX').text();
var clickY = $('#mouseY').text();
Thank you!

You can set up a global array, for keeping track of coordinates (maybe in an object, whatever). Then you can add an event listener to the document, listening for click. Then it's just a matter of logging the position.
Whenever you want to refer to the position during the last click, just refer to the appropriate element of your global array. (If your logging function unshifted instead of pushing, you could always just look at yourArray[0].)

In the $('...').click(function(e){...}); handler, you can set a global variable with the coordinates. For example:
Globally:
var x = -1, // no previous click
y = -1; // no previous click
In the click handler:
x = e.pageX();
y = e.pageY();
Then, you can just reference x and y when you need the coordinates of the last click.

FullCalendar: How to identify the calendar row of the element?

On eventRender of the fullcalendar, I want to identify the element belongs to which row of the calendar.
eventRender: function(event, element) {
//find calendar row of the element
}

What happens if the event is wrapped over two columns? (i.e. because it is 10 days long)
I'm looking at the source for FullCalendar, and I don't think you're going to find what you want - the element is an absolutely positioned div, and eventRender is called for each "segment" of the event, so if it wraps, you end up with two eventRender calls.
Anyways, if those "gotchas" don't dissuade you, here's a crack at figuring it out. I used the row widths/heights vs the element top to figure it out, I don't really see a more elegant way. Note you'll want to change the .fc-view-month bit to a selector that starts from your actual calendar ID.
eventAfterRender: function(event,element){
var level = undefined;
var elTop = $(element).position().top;
$('.fc-view-month tr[class^="fc-week"]').each(function(){
var rowTop = $(this).position().top;
var height = $(this).height();
if (elTop >= rowTop && elTop < rowTop + height){
level = $(this).attr('class').replace('fc-week','');
return false;
}
});
alert(level);
}
That will alert you with the "row" as defined by the calendar, i.e. the first row is actually "0"
EDIT: just realized that eventRender is called before the element is placed on the calendar, so my idea pretty much won't work. I've changed it to eventAfterRender. I think if it was important enough to you, the thing to do would be to modify FullCalendar so that whenever it sends you the "element" in the eventRender function, it also sends you the placement info (which it has in a structure called segs in the calling function).