Mercurial > hip
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) {