Added tooltips and made location save dialog draggable
rodzic
16b5179a4e
commit
b75357834f
|
@ -0,0 +1,7 @@
|
|||
.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(../images/tipsy.gif); }
|
||||
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
|
||||
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
|
||||
.tipsy-north { background-position: top center; }
|
||||
.tipsy-south { background-position: bottom center; }
|
||||
.tipsy-east { background-position: right center; }
|
||||
.tipsy-west { background-position: left center; }
|
Plik binarny nie jest wyświetlany.
Po Szerokość: | Wysokość: | Rozmiar: 867 B |
|
@ -25,15 +25,17 @@ $time = time() + 3600;
|
|||
<script type="text/javascript" src="http://www.google.com/jsapi?key=<?php echo GMAPS_API_KEY; ?>">
|
||||
</script>
|
||||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<link href="css/pred.css" type="text/css" rel="stylesheet">
|
||||
<link href="css/pred.css" type="text/css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="css/tipsy.css" type="text/css" />
|
||||
<link href="css/cupertino/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript">
|
||||
// load jquery and jqueryui before loading jquery.form.js later
|
||||
// Load jquery and jqueryui before loading jquery.form.js later
|
||||
google.load("jquery", "1.4.2");
|
||||
google.load("jqueryui", "1.8.1");
|
||||
</script>
|
||||
<script src="js/jquery.form.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.jookie.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.tipsy.js" type="text/javascript"></script>
|
||||
<script src="js/date.jsport.js" type="text/javascript"></script>
|
||||
<script src="js/pred.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
@ -118,6 +120,7 @@ var hlTimeout = 5000; // high latency
|
|||
|
||||
<!-- save location -->
|
||||
<div id="location_save" class="box ui-corner-all">
|
||||
<img src="images/drag_handle.png" class="handle" />
|
||||
<h1>Save Launch Location</h1><br />
|
||||
<form name="location_save_form" id="location_save_form">
|
||||
<table name="req_table" id="req_table">
|
||||
|
@ -167,7 +170,7 @@ var hlTimeout = 5000; // high latency
|
|||
<td>
|
||||
Launch Site:
|
||||
<span>
|
||||
<a id="cookieLocations">Custom</a>
|
||||
<a id="cookieLocations" class="tipsyLink" title="View your saved launch sites">Custom</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
|
@ -185,12 +188,12 @@ var hlTimeout = 5000; // high latency
|
|||
<tr>
|
||||
<td>
|
||||
<span>
|
||||
<a id="setWithClick">Set With Map</a>
|
||||
<a id="setWithClick" class="tipsyLink" title="Use the map to set your desired launch site">Set With Map</a>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span>
|
||||
<a id="req_open">Save Location</a>
|
||||
<a id="req_open" class="tipsyLink" title="Save this location to a browser cookie">Save Location</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
@ -0,0 +1,104 @@
|
|||
(function($) {
|
||||
$.fn.tipsy = function(options) {
|
||||
|
||||
options = $.extend({}, $.fn.tipsy.defaults, options);
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var opts = $.fn.tipsy.elementOptions(this, options);
|
||||
|
||||
$(this).hover(function() {
|
||||
|
||||
$.data(this, 'cancel.tipsy', true);
|
||||
|
||||
var tip = $.data(this, 'active.tipsy');
|
||||
if (!tip) {
|
||||
tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
|
||||
tip.css({position: 'absolute', zIndex: 100000});
|
||||
$.data(this, 'active.tipsy', tip);
|
||||
}
|
||||
|
||||
if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') {
|
||||
$(this).attr('original-title', $(this).attr('title') || '').removeAttr('title');
|
||||
}
|
||||
|
||||
var title;
|
||||
if (typeof opts.title == 'string') {
|
||||
title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
|
||||
} else if (typeof opts.title == 'function') {
|
||||
title = opts.title.call(this);
|
||||
}
|
||||
|
||||
tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
|
||||
|
||||
var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
|
||||
tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
|
||||
tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
|
||||
var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
|
||||
var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;
|
||||
|
||||
switch (gravity.charAt(0)) {
|
||||
case 'n':
|
||||
tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
|
||||
break;
|
||||
case 's':
|
||||
tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
|
||||
break;
|
||||
case 'e':
|
||||
tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
|
||||
break;
|
||||
case 'w':
|
||||
tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
|
||||
break;
|
||||
}
|
||||
|
||||
if (opts.fade) {
|
||||
tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8});
|
||||
} else {
|
||||
tip.css({visibility: 'visible'});
|
||||
}
|
||||
|
||||
}, function() {
|
||||
$.data(this, 'cancel.tipsy', false);
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
if ($.data(this, 'cancel.tipsy')) return;
|
||||
var tip = $.data(self, 'active.tipsy');
|
||||
if (opts.fade) {
|
||||
tip.stop().fadeOut(function() { $(this).remove(); });
|
||||
} else {
|
||||
tip.remove();
|
||||
}
|
||||
}, 100);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
// Overwrite this method to provide options on a per-element basis.
|
||||
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
|
||||
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
|
||||
// (remember - do not modify 'options' in place!)
|
||||
$.fn.tipsy.elementOptions = function(ele, options) {
|
||||
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
|
||||
};
|
||||
|
||||
$.fn.tipsy.defaults = {
|
||||
fade: false,
|
||||
fallback: '',
|
||||
gravity: 'n',
|
||||
html: false,
|
||||
title: 'title'
|
||||
};
|
||||
|
||||
$.fn.tipsy.autoNS = function() {
|
||||
return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
|
||||
};
|
||||
|
||||
$.fn.tipsy.autoWE = function() {
|
||||
return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
|
||||
};
|
||||
|
||||
})(jQuery);
|
|
@ -27,6 +27,7 @@ $(document).ready(function() {
|
|||
// make launch card draggable
|
||||
$("#input_form").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
||||
$("#scenario_info").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
||||
$("#location_save").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
||||
$("#location_save_local").draggable({containment: '#map_canvas', handle: 'img.handle', snap: '#map_canvas'});
|
||||
$("#run_pred_btn").button();
|
||||
$("#req_sub_btn").button();
|
||||
|
@ -721,6 +722,7 @@ function setupEventHandlers() {
|
|||
$("#req_name").val("Unnamed");
|
||||
$("#location_save").fadeIn();
|
||||
});
|
||||
$(".tipsyLink").tipsy({fade: true});
|
||||
google.maps.event.addListener(map, 'mousemove', function(event) {
|
||||
showMousePos(event.latLng);
|
||||
});
|
||||
|
|
Ładowanie…
Reference in New Issue