I want to make a sms system, where users can send a sms message and then it is showed.
So for every new message I get I need to make a new div, add it and scroll the others down
Does anyone know a good example or tutorial to get me started on this?
Znos 0 Newbie Poster
fxm 23 Posting Pro
This
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
var ctr=0
function addmsg(){
var oLst = document.getElementById('scrl')
oLst.insertBefore(document.createTextNode(++ctr),oLst.firstChild)
oLst.insertBefore(document.createElement('br'),oLst.firstChild)
}
</script>
<title></title>
</head>
<body>
<input type=button onclick="addmsg()" value='msg'>
<div id='scrl'></div></button>
</body>
</html>is one approach.
Znos 0 Newbie Poster
Nice, this was exactly what I was looking for ^^
Now all I need to do is make the div's like 10% more transparant every time they move one step down?
fxm 23 Posting Pro
This
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<script type="text/javascript">
var ctr=0
function addmsg(msg) {
var oLst = document.getElementById('scrl')
with(oLst) {
var cElms = getElementsByTagName('span')
for (var j = cElms.length, i = 0; i < j; i++) {
if (i == 9) {
removeChild(lastChild)
} else {
cElms[i].setAttribute('style', "filter:alpha(opacity=" + (10 - i) * 10 + "); opacity:" + (1 - i / 10))
}
}
var oNew = document.createElement('span')
oNew.appendChild(document.createElement('br'))
oNew.appendChild(document.createTextNode(msg))
insertBefore(oNew, firstChild)
}
}
</script>
<title></title>
</head>
<body>
<input type=button onclick="addmsg(++ctr)" value='msg'></button>
<div id='scrl'></div>
</body>
</html>works in Firefox and Chrome.
I haven't tested other browsers.
Znos commented: Thank you :) +0
Znos 0 Newbie Poster
This is exactly what I needed, thank you so much!
fxm 23 Posting Pro
Opera and Safari(pc) also work with that code.
IE does not, and the workaround isn't ready yet :(
Znos 0 Newbie Poster
Doesn't matter, since it only has to work in Google Chrome :)
farjang 0 Newbie Poster
I think you don't need to use JavaScript, you can use DIV and CSS http://www.domedia.org/oveklykken/css-div-scroll.php
fxm 23 Posting Pro
This cross-browser version
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<style type="text/css">
.op8 { color: green; }
.op9 { color: blue; }
.op10 { color: red; }
</style>
<script type="text/javascript">
var ctr = 0
function addmsg(msg) {
var oLst = document.getElementById('scrl')
with(oLst) {
var oNew = document.createElement('span')
if (window.opera || typeof oNew.currentStyle === 'undefined') {
oNew.appendChild(document.createElement('br'))
} else {
oNew.style.setAttribute('cssText', 'width:90%')
}
oNew.appendChild(document.createTextNode(msg))
insertBefore(oNew, firstChild)
var cElms = getElementsByTagName('span')
for (var j = cElms.length, i = 0; i < j; i++) {
if (i == 9) {
removeChild(cElms[9])
} else {
cElms[i].style.opacity=1-i/10
cElms[i].setAttribute('class','op'+(10-i))
cElms[i].style.filter = "alpha(opacity="+(10-i)+"0)";
cElms[i].setAttribute('className','op'+(10-i))
}
}
} // with
} // func
</script>
<title></title>
</head>
<body>
<form>
<input type="button" onclick="addmsg(++ctr)" value='msg'>
</form>
<div id='scrl'>
</div>
</body>
</html>has been tested in Chrome/Firefox/Opera/Safari(pc)/IE8. It should also work in IE7 and IE6.
fxm 23 Posting Pro
This is a final version - if not the final version :)
The 'Emulate IE7' <meta> tag was included by accident; even it if had no effect I decided to remove it to avoid any misunderstanding.
Caution: IE renders this page in quirks mode. Do not change the DOCTYPE declaration to one that triggers standards mode; if you do, the setting of width: at line 28 will no longer trigger hasLayout==true for the <span> being added, and that in turn would mean that the opacity setting at line 43 would no longer do anything. [Of course non-IE browsers are unaffected by any of this.]
If I ever decide to do a 'really' final version, I will do it in strict standards mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
<style type="text/css">
.op8 { color: green; }
.op9 { color: blue; }
.op10 { color: red; }
</style>
<script type="text/javascript">
var ctr = 0
function addmsg(msg) {
var oLst = document.getElementById('scrl')
with(oLst) {
var oNew = document.createElement('span')
if (window.opera || typeof oNew.currentStyle === 'undefined') {
oNew.appendChild(document.createElement('br'))
} else {
oNew.style.setAttribute('cssText', 'width:90%')
}
oNew.appendChild(document.createTextNode(msg))
insertBefore(oNew, firstChild)
var cElms = getElementsByTagName('span')
for (var j = cElms.length, i = 0; i < j; i++) {
if (i == 9) {
removeChild(cElms[9])
} else {
var iDec = 10-i
cElms[i].style.opacity=iDec/10
cElms[i].setAttribute('class','op'+iDec)
cElms[i].style.filter = "alpha(opacity="+iDec+"0)";
cElms[i].setAttribute('className','op'+iDec)
}
}
} // with
} // func
</script>
<title></title>
</head>
<body>
<form>
<input type="button" onclick="addmsg(++ctr)" value='msg'>
</form>
<div id='scrl'>
</div>
</body>
</html> Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.