twitter.com에서 Top tweets에서의 push notification이 흥미로워서
javascript에서 흉내만 내봤다.
오랜만에 prototype과 scriptaculous를 써서 그런지 버벅거리긴 했다.
---------------------------<Source Code>----------------------------------
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/effects.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" charset="utf-8">
#input {
width: 200px;
margin-bottom: 5px;
}
#button {
width: 60px;
height: 30px;
margin-bottom: 10px;
border: 1px solid #CCCCCC;
}
#wrapper {
height: 200px;
overflow: hidden;
}
#comments {
width: 200px;
height: 250px;
overflow: hidden;
}
.talk {
height: 49px;
color: #FFFFFF;
background-color: #23A420;
border-bottom: 1px solid #000000;
}
</style>
</head>
<body>
<div>
<input type="text" id="input" />
<div id="button">click</div>
</div>
<div id="wrapper">
<div id="comments">
<div id="5" class="talk">
<div>5</div>
</div>
<div id="4" class="talk">
<div>4</div>
</div>
<div id="3" class="talk">
<div>3</div>
</div>
<div id="2" class="talk">
<div>2</div>
</div>
<div id="1" class="talk">
<div>1</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
<!--
// setting id of first-child
var comments = $('comments').childElements();
var nowId = comments[0].id;
$('button').observe('click', function () {
// create new comment element
var superDiv = document.createElement('div');
superDiv.className = 'talk';
nowId++;
superDiv.id = nowId;
var childDiv = document.createElement('div');
childDiv.innerHTML = $('input').value;
superDiv.appendChild(childDiv);
// attach new comment
$('comments').insert({
top: superDiv
});
new Effect.SlideDown(superDiv);
new Effect.Opacity(superDiv, {from: 0, to: 1});
// remove last comment
var newComments = $('comments').childElements();
var len = newComments.length;
newComments[len-1].remove();
});
//-->
</script>
</body>
</html>
'Client-Side > Javascript' 카테고리의 다른 글
| JavaScript - Zoo Keeper (0) | 2010.06.06 |
|---|---|
| CSS3와 jQuery TOOLS 를 사용한 탭디자인 (0) | 2010.05.11 |
| 이메일 체크. (0) | 2009.09.24 |
| javascript mootools addEvent 주의사항. (0) | 2009.09.17 |
| jsdoc-toolkit 실행하기. (0) | 2009.09.15 |
