Skip to content

Instantly share code, notes, and snippets.

@ranyefet

ranyefet/list_items.html

Created October 22, 2012 10:02
Show Gist options
  • Save ranyefet/3930732 to your computer and use it in GitHub Desktop.
Save ranyefet/3930732 to your computer and use it in GitHub Desktop.
Download ZIP
List items with jQuery
Raw
list_items.html
<!doctype html>
<html>
<head>
<title>List items with jQuery</title>
<style>
#header {
background-color:#94D4E0; font-family:tahoma; height:50px; margin-left:auto; margin-right:auto; width:400px; text-align:center; vertical-align:text-bottom; font-size:20px; line-height:250%;
}
#control {
position:absolute; align:float;
}
#list {
font-family:Tahoma; font-size:15; margin-left:auto; margin-right:auto; width:400px; list-style: none; padding: 0;
}
.item {
background-color:#A9DECF; height: 25px; line-height:170%; margin-top:5px; display: none; padding-left: 8px;
}
.item button {
float:right;
}
</style>
</head>
<body>
<div id="control">
<br /><br /><input id="input_content" type=text></input><button onclick="addStory(input_content.value);">Add</button>
</div>
<br /><div id='header'>
Header
</div>
<hr size="5" color="74B7C4">
<ul id='list'>
<!--<li id='ttt' style="background-color:A9DECF; height:25; line-height:170%; margin-top:5;"><LI>Test story<button id=btn1 style="float:right;" onclick="destroyStory(this.parentElement.parentElement.id);">x</button></li> -->
</ul>
<script src='http://code.jquery.com/jquery-1.8.2.min.js'></script>
<script>
for(i=0;i<15;i++) {
addStory('New Story '+ i);
}
function addStory(content) {
var $item = $('<li />')
.addClass('item')
.html( '&bull; ' + content )
.append(
$('<button />')
.text('x')
.click(function() {
$(this).parent().hide(250)
})
);
$("#list").append($item);
$item.fadeIn(250);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment