# HG changeset patch # User Aza Raskin # Date 1216766371 25200 # Node ID 4d223fd05668f365006e2cebc0b99f1cf83f4a2e # Parent 4e85f2c5316da17894dc1afc6842e1c214a1fd17 Added animations to the map command. diff -r 4e85f2c5316d -r 4d223fd05668 preview/hip.css --- 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; diff -r 4e85f2c5316d -r 4d223fd05668 preview/hip.html --- 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 @@
Blah!
-

Pretend this box is your selection, OK? +

Pretend this box is your selection, OK?

diff -r 4e85f2c5316d -r 4d223fd05668 preview/hip.js --- 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) {