diff --git a/index.html b/index.html index 5a43538..fe2677b 100644 --- a/index.html +++ b/index.html @@ -120,7 +120,7 @@
-
+
diff --git a/main.js b/main.js index fb028d8..92c2069 100644 --- a/main.js +++ b/main.js @@ -64,6 +64,7 @@ function display_row(rows, cb) { var duration = 250; var fadein_delay = 500; + var fadeout_delay = 400; if (rows.length) { // @@ -75,7 +76,7 @@ function display_row(rows, cb) { .fadeIn(duration, function() { display_row(rows, cb); }) - .delay(1000).fadeOut(); + .delay(fadeout_delay).fadeOut(); } else { // @@ -90,8 +91,10 @@ function display_row(rows, cb) { /** * Display the actual results. +* +* @param cb object Optional callback to fire when done */ -function display_results() { +function display_results(cb) { jQuery(".results_words_key").hide().clone().appendTo(".results"); jQuery(".results_words_value").hide().clone().appendTo(".results"); @@ -99,10 +102,14 @@ function display_results() { jQuery(".results_phrase_key").hide().clone().appendTo(".results"); jQuery(".results_phrase_value").hide().clone().appendTo(".results"); - jQuery(".results_words_key").fadeIn(500, function() { - jQuery(".results_words_value").fadeIn(500, function() { - jQuery(".results_phrase_key").fadeIn(500, function() { - jQuery(".results_phrase_value").fadeIn(500); + jQuery(".results .results_words_key").fadeIn(500, function() { + jQuery(".results .results_words_value").fadeIn(500, function() { + jQuery(".results .results_phrase_key").fadeIn(500, function() { + jQuery(".results .results_phrase_value").fadeIn(500, function() { + if (cb) { + cb(); + } + }); }); }); }); @@ -110,12 +117,20 @@ function display_results() { } // End of display_results() +/** +* Return the width of the browser window. +*/ +function get_width() { + return(jQuery(window).width()); +} + + /** * Return true if we are running on a mobile screen. */ function is_mobile() { - if (jQuery(window).width() < 480) { + if (get_width() <= 480) { return(true); } @@ -130,12 +145,20 @@ function is_mobile() { // jQuery("#roll_dice").on("click", function(e) { + var target_height = 300; + if (is_mobile()) { + target_height = 1000; + } + + jQuery(".results").animate({height: target_height}, 400); + // // If we're running on an iPhone or similar, scroll down so that we can // see the dice rolls and passphrase. // if (is_mobile()) { - location.hash = "#roll_dice_button"; + var aTag = $("a[name='roll_dice_button']"); + $("html,body").animate({scrollTop: aTag.offset().top}, "slow"); } // @@ -201,7 +224,25 @@ jQuery("#roll_dice").on("click", function(e) { // // Now display those rows. // - display_row(rows, display_results); + display_row(rows, function() { + display_results(function() { + + // + // Set the height of this back to auto so we don't have unused space. + // I'm amazed that we don't see a "flash" of the results div + // temporarily shrinking, but this seems to work as per what I saw + // at http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height + // + // Well then. + // + var height = jQuery(".results").height(); + jQuery(".results").css("height", "auto"); + var new_height = jQuery(".results").height(); + jQuery(".results").height(height); + jQuery(".results").animate({height: new_height}, 400); + + }); + }); }); @@ -211,8 +252,7 @@ jQuery("#roll_dice").on("click", function(e) { // jQuery.getScript("./wordlist.js").done( function(data) { -// TEST - jQuery("#roll_dice").click(); // Debugging + //jQuery("#roll_dice").click(); // Debugging }).fail( function(jqxhr, settings, exception) {