Skip to content

Instantly share code, notes, and snippets.

@1000k

1000k/flash_message.html

Created October 18, 2012 09:31
Show Gist options
  • Save 1000k/3910713 to your computer and use it in GitHub Desktop.
Save 1000k/3910713 to your computer and use it in GitHub Desktop.
Download ZIP
Flash message pane in jQuery Mobile.
Raw
flash_message.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page 1</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<style type="text/css" media="screen">
.flash_message {width:100%; position:fixed; bottom:-2rem; background:#fee; color:#f00; display:none; opacity:0; line-height:2rem; padding:1rem;}
</style>
</head>
<body>
<div data-role="page" data-theme="a" id="page1">
<div data-role="content">
<a href="page2.html" data-role="button">Go to page2.html</a>
</div>
<div class="flash_message"></div>
</div>
<script type="text/javascript">
$("#page1").live("pageshow", function() {
console.info("pageshow");
$flash = $(".flash_message");
$flash.html("Flash Message");
console.log($flash.html());
if ($flash.is(":hidden")) {
$flash.css("display","block").animate({
opacity: 1
, bottom: 0
}, 500, function() {
console.log("openings completed.");
console.log($flash.height());
console.log($flash.width());
console.log($flash.is(":hidden"));
}).delay(3000).animate({
opacity: 0
, bottom: "-2rem"
}, 500, function() {
console.log("closing completed.");
console.log($flash.height());
console.log($flash.width());
console.log($flash.is(":hidden"));
});
} else {
$flash.hide();
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment