I've built an expanding HUD control for a map in a project. I've got
it expanding, and, using some code from this group I have it avoiding
the edges of the viewport on first resize. The problem is that it
doesn't seem like an object updates its position when you make it
draggable with the jQuery UI draggable plugin. The net effect is that
this element constantly resizes outside the viewport, so that only an
edge is showing and it has to be dragged back into the center of the
page. What I'm looking for is a bulletproof solution for a window that
is resizable on click and is aware of its -x and -y position even
after being moved with jQuery UI Draggable. Current code follows...
Thanks!
///////////////////////////////////////////////////////////////////
// Collapse HUD
///////////////////////////////////////////////////////////////////
// Triggers the #data floater to slide down
// if a tab is clicked and it's closed
hud = $('.hud-data');
hudPosition_init = hud.position();
hudWidth_init = hud.width();
var viewport = $(document).width();
var hudOffset = hud.offset();
hudChild = $('.jScrollPaneContainer');
$('.event-controls').click(function() {
var eventBar = $('form.events');
$(eventBar).slideToggle({height:"40px"}, 90);
});
$('li.hud-left-tab').click(function() {
// First, if the hud is collapsed, slide it down
$("#data").slideDown(20);
// Next, if it's been expanded, shrink it
hud.animate({"width" : hudWidth_init}, 90);
hudChild.css({"width": hudWidth_init});
var viewport = $(document).width();
var hudOffset = hud.offset();
$("#map-filter-popdown-shadow").hide();
});
$('li.hud-center-tab').click(function() {
// Perform the same check for this tab
$("#data").slideDown(20);
if (viewport - hudOffset.left > 10) {
hud.animate({"width" : hudWidth_init+359, "margin-left"
:-350},
90);
hudChild.animate({"width": hudWidth_init+360}, 20);
} else {
hud.animate({"width" : hudWidth_init+360}, 90);
hudChild.animate({"width": hudWidth_init+360}, 20);
}
//hud.animate({"width" : hudWidth_init+360}, 90);
//hudChild.css({"width": hudWidth_init+360});
$("#map-filter-popdown-shadow").hide();
});
$('#test-button').click(function(){
alert(hudPosition_init.left);
});
$('img.panel-closure').toggle(function(){
$(this).attr("src","/images/show-panel.png");
$('#data').slideToggle(90);
}, function() {
$(this).attr("src","/images/hide-panel.png");
$('#data').slideToggle(90);
});
///////////////////////////////////////////////////////////////////
//
///////////////////////////////////////////////////////////////////
