var nqw_answers = [ "My fortune teller advised against it.", "Sorry, but I can't do anything for the next few hours. I am allowing my food to digest.", "I am currently working on my bucket list.", "The Queen is coming over tonight for some tea and crumpets." ]; $('#nqw_go').click(function() { if( $('#nqw_question').val().length ) { nqw_chosen = $('#nqw_question').val().length % nqw_answers.length; nqw_output = nqw_answers[nqw_chosen]; } else { nqw_output = "Please ask a question."; } $('#nqw_response').html(nqw_output); $('#nqw_response').fadeIn("slow"); }); $( "#nqw_excuse form" ).submit(function( event ) { $( "#nqw_go" ).trigger( "click" ); event.preventDefault(); });
<div id="nqw_excuse"> <div class="nqw_introWords">What's the problem?</div> <form><input type="text" id="nqw_question" placeholder="e.g. I forgot my homework" /> <input type="button" value="go" id="nqw_go" /></form> <div id="nqw_response"></div> </div>
#nqw_excuse { width: 360px; height: 260px; background: url(http://lorempixel.com/output/nightlife-q-c-400-300-5.jpg); padding: 20px; } .nqw_introWords { color: #000; font-family: Arial, Helvetica; font-weight: bold; background-color: rgba(255, 255, 255, 0.8); padding: 5px; } #nqw_question { width: 250px; } #nqw_excuse form { margin-top: 10px; margin-bottom: 30px; } #nqw_response { font-size: 22px; display: none; position: relative; width: 210px; padding: 0px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 10px 15px; min-height: 70px } #nqw_response:after { content: ''; position: absolute; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; right: -15px; top: 30px; }