Forums: Front End:

I'm using jQuery for all of my fancy javascript needs so far on this project, but I'm not very far in so if this requires some other library, I could make a change.

Basically, I'm creating an html calendar that needs to be clickable for more info:



So the user clicks on a day in the grid, and a little ajax div pops up, pulling the info for that day's events from the DB.

My problem is, I can only find code on the interweb for modal popups - where they're centered on the screen and everything else fades out. I don't want that. I want to be able to specify the popup to always happen at a certain point from the object that called it, and I want it to still allow access to the stuff underneath.

-----

I literally just want to create an empty block on click at a specified x,y coordinate from the DOM object that made the request, and then populate that block with another file via AJAX.

I'm not interested in fancy fade-ins or animated openings or anything like that. I just want to click a link a create an AJAX window anchored to (but not in the layout of) a parent element.

-----

jQuery has UI/Dialog but so far I'm not having much luck getting them to act like I want.

edit: disregard this (this second post, not this question)

on the UI/Dialog options page it looks like you can specify a coordinate pair with the "position" command

http://docs.jquery.com/UI/Dialog/dialog#options

position String, Array
Specifies where the dialog should be displayed. Possible values: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport). Default value: 'center'.

Yeah, I saw that too. So I guess if I can get the x,y coord of the anchor that calls it, then I could pass that info along...

Still, not and ideal solution. I'd rather avoid jQuery altogether if I can. No reason to use a whole library (especially the UI extensions I have to load in addition to jQuery for Dialog).

Okay, I got it kind of working, but now I need some help from someone who knows jQuery better than I do.

Basically, each active table cell has the following in it:

<td><a href="#" class="date-btn">...</a></td>

$(".date-btn").click(function(){
	$.ajax({
		url: "test.php",
		cache: false,
		success: function(html){
			$(".date-btn").before("<div class=\"date-info\">"+html+"</div>");
	}
	});
	return false;
});

i'm not sure about jquery but i just did something very similar with mootools. i can post that if you still aren't committed to jquery?

I actually got it figured out:

function calendarInfo(date){
	var object = "#daybtn-"+date;
	$(".date-info").remove();
	$(object).before("<div class=\"date-info\" style=\"display:none;\"><span style=\"color:#4c4c4c;font-size:10px;\">loading events for "+date+"...</span></div>");
	$(".date-info").show("normal");
	$.ajax({
		url: "includes/module_calendarinfo.php?date="+date,
		cache: false,
		success: function(html){
			$(object).prev(".date-info").html(html);
			$(".date-info").show("normal");
		}
	});
};

<a id="daybtn-2008-04-22" class="date-btn" href="#" onclick="calendarInfo('2008-04-22');return false;">...</a>

So that creates a new div (date-info) as a sibling to the button that calls it, so the positioning is already set. date-info is absolutely positioned so it doesn't break the layout of everything else, and that all seems to work.

this totally seems like a case where your IDs become an array, and you choose your location, events, etc. based off the array index. Use php to send the array variable to your jquery function?

$("#id:eq(2)").before("<div class=\"date-info\">"+html+"</div>");

Well, my method works PERFECTLY in Safari, a little funky in Firefox (sits on top of the calendar, but sits behind any other block level elements in the body), and falls to shit in all versions of IE.

Basically, in IE the info box sits on top of the desired table cell, but behind all other table cells that come after it. So it's unusable.

So I guess now I need to rework my code so that rather than the info box being a child of the table cell, I just create it as a child of the body and position it based on my mouse location at click or something...

Stupid IE.

the tip #3 on this page might be a nice start. it works well across browsers.

demos.mootools.net/Tips

i'm really a fan of mootools.

There is a plug-in for jquery called fancyzoom that is for displaying images from a thumnail.

I haven't had a look at the code but it might be useful place to start as the images expand from the thumbnail position on the page.

I found this: ClueTips which looks promising...

Fixed it, without that other plugin.

function calendarInfo(date){
	var object = "#daybtn-"+date;
	var offset = $(object).offset();
	$(".date-info").remove();
	$("body").prepend("<div class=\"date-info\" style=\"display:none;left:"+offset.left+"px;top:"+offset.top+"px;\"><span style=\"color:#4c4c4c;font-size:10px;\">loading events for "+date+"...</span></div>");
	$(".date-info").show("normal");
	$.ajax({
		url: "includes/module_calendarinfo.php?date="+date,
		cache: false,
		success: function(html){
			$(".date-info").html(html);
			$(".date-info").show("normal");
		}
	});
};

NICE. I'd love to see this when it's done.

:thumbsoup:

Thanks. I'll definitely post a link when it's all done - should be early May.
Right now though it's all super secret client stuff - otherwise I would have just posted a link to what I had initially