changeset 23:4d223fd05668

Added animations to the map command.
author Aza Raskin <azaaza@gmail.com>
date Tue, 22 Jul 2008 15:39:31 -0700
parents 4e85f2c5316d
children 5388c9950377
files preview/hip.css preview/hip.html preview/hip.js
diffstat 3 files changed, 32 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/preview/hip.css	Mon Jul 21 12:04:08 2008 -0700
+++ b/preview/hip.css	Tue Jul 22 15:39:31 2008 -0700
@@ -6,6 +6,10 @@
   padding: 4px;
 }
 
+#pretend{
+  position: fixed;
+}
+
 #autocomplete-popup {
   display: none;
   border: 1px solid #000000;
--- a/preview/hip.html	Mon Jul 21 12:04:08 2008 -0700
+++ b/preview/hip.html	Tue Jul 22 15:39:31 2008 -0700
@@ -14,7 +14,7 @@
  <div id="status-line">Blah!</div>
   <input id="search-box" type="text" size="40" />
   <div id="autocomplete-popup"></div>
-  <p>Pretend this box is your selection, OK?
+  <p id="pretend">Pretend this box is your selection, OK?
     <input id="fake-selection" type="text" size="40" />
   </p>
   
--- a/preview/hip.js	Mon Jul 21 12:04:08 2008 -0700
+++ b/preview/hip.js	Tue Jul 22 15:39:31 2008 -0700
@@ -118,14 +118,21 @@
 }
 
 function showAddressPreview() {
-  $(".suggestion").show();
-  $(".map-actions").hide();
+  setTimeout( function(){
+    $(".suggestion").slideDown( 500 );
+    $("#address-list").fadeIn( 700 );
+  }, 500 );
+  $(".map-actions").hide();  
   $("#selected-address").hide();
-  //$(".gaddress").show();
-  $("#address-list").show();
   document.getElementById("preview-pane-large").id = "preview-pane";
-  $("#map").width("225px");
-  $("#map").height("130px");
+  $("#preview-pane")
+    .height("300px")
+    .animate({ height: "140px" });
+  $("#map").animate({ 
+    width: "225px",
+    height: "130px",
+  }, 500);
+  
   $("#map").css("border","5px solid #0066cc");
 
   map.removeControl(mapControl);
@@ -134,27 +141,30 @@
 }
 
 function showMapPreview(map) {
-  $(".suggestion").hide();
+
   $("#address-list").hide();
   
-  $("#selected-address").show();
+  $("#selected-address").fadeIn( 300 );
   document.getElementById("preview-pane").id = "preview-pane-large";
   $("#selected-address").text($(".gaddress-current").text());
   
   map.addControl(mapControl);
   map.addControl(mapType);
   map.enableDragging();
-
-  $("#map").width("100%");
-  $("#map").height("85%");
   $("#map").css("border-width","0px");
   $("#map").css("border-style","none");
-  //$("#map").animate({ 
-  //  width: "100%",
-  //  height: "80%",
-  //}, 150);
-  $(".map-actions").show();
-  //setTimeout("$(\".map-actions\").show()", 175);  
+  $("#preview-pane-large")
+    .height("140px")
+    .animate({ height: "300px" });
+  
+  $("#map").animate({
+    width: "650px",
+    height: "240px",
+  }, 500);
+  setTimeout( function(){
+    $(".map-actions").fadeIn();
+    $(".suggestion").slideUp( 500 );    
+  }, 300 ); 
 }
 
 function setPreview(type, searchTerm) {