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?

Recommended Answers

All 9 Replies

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.

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?

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.

commented: Thank you :) +0

This is exactly what I needed, thank you so much!

Opera and Safari(pc) also work with that code.
IE does not, and the workaround isn't ready yet :(

Doesn't matter, since it only has to work in Google Chrome :)

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.

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.