Skip to content

Instantly share code, notes, and snippets.

@ryanthejuggler

ryanthejuggler/index.html

Created July 30, 2014 16:16
Show Gist options
  • Save ryanthejuggler/bb15b3288a646405e988 to your computer and use it in GitHub Desktop.
Save ryanthejuggler/bb15b3288a646405e988 to your computer and use it in GitHub Desktop.
Download ZIP
Fun delete confirmation
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Delete button demo</title>
<script type="text/javascript" src="//jsfiddle.net/js/coffeescript/coffeescript.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/spacelab/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://daneden.github.io/animate.css/animate.min.css">
<style type='text/css'>
body{
padding: 12px;
}
.btn-label-secondary{
display: none;
}
</style>
<script type="text/coffeescript">
startDelete = ($btn) ->
$btn.find('.btn-label').fadeOut ->
$btn.addClass 'tada animated'
$btn.attr('data-action','confirm-delete')
$btn.find('.btn-label-secondary').show()
confirmDelete = ($btn) ->
$btn.removeClass('tada animated').addClass 'zoomOutDown animated'
$('#delete').click (e) ->
$btn = $('#delete')
console.log $btn.attr 'data-action'
switch $btn.attr 'data-action'
when 'start-delete' then startDelete $btn
when 'confirm-delete' then confirmDelete $btn
</script>
</head>
<body>
<a class="btn btn-danger" id="delete" data-action="start-delete">
<i class="fa fa-trash-o"></i>
<span class="btn-label">Delete forever</span>
<span class="btn-label-secondary">Are you sure?</span>
</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment