Create and Move Content Dynamically

[Total: 0    Average: 0/5]

This file show how to dynamically update content of a DIV in both IE and NS.

Head Code:

<SCRIPT type=text/javascript>
function suppressErrors() { return true; }
if (parseInt(navigator.appVersion) < 4) {
    alert("This program requires a version 4 browser!");
    onerror = suppressErrors;
}
</SCRIPT>
<SCRIPT type=text/javascript>
isNS = navigator.appName.indexOf("Netscape")  != -1
isIE = navigator.appName.indexOf("Microsoft") != -1

function NewDiv(window, id, body, left, top, width) {
    this.window = window;
    this.id     = id;
    this.body   = body;
    var d = window.document;
    d.writeln('<STYLE TYPE="text/css">#' + id + ' {position:absolute;');
    if (left)  d.write('left:'  + left  + ';');
    if (top)   d.write('top:'   + top   + ';');
    if (width) d.write('width:' + width + ';');
    d.writeln('}</STYLE>');
}
if (isNS) {
    NewDiv.prototype.output             = function()      { var d = this.window.document;d.writeln('<DIV ID="' + this.id + '">');d.writeln(this.body);d.writeln("</DIV>");this.layer = d[this.id];}
    NewDiv.prototype.moveTo             = function(x,y)   { this.layer.moveTo(x,y); }
    NewDiv.prototype.moveBy             = function(x,y)   { this.layer.moveBy(x,y); }
    NewDiv.prototype.show               = function()      { this.layer.visibility = "show"; }
    NewDiv.prototype.hide               = function()      { this.layer.visibility = "hide"; }
    NewDiv.prototype.setZ               = function(z)     { this.layer.zIndex = z; }
    NewDiv.prototype.setBgColor         = function(color) { this.layer.bgColor = color; }
    NewDiv.prototype.setBgImage         = function(image) { this.layer.background.src = image;}
    NewDiv.prototype.getX               = function() { return this.layer.left; }
    NewDiv.prototype.getY               = function() { return this.layer.right; }
    NewDiv.prototype.getWidth           = function() { return this.layer.width; }
    NewDiv.prototype.getHeight          = function() { return this.layer.height; }
    NewDiv.prototype.getZ               = function() { return this.layer.zIndex; }
    NewDiv.prototype.isVisible          = function() { return this.layer.visibility == "show"; }
    NewDiv.prototype.setBody            = function() { for(var i = 0; i < arguments.length; i++) this.layer.document.writeln(arguments[i]);this.layer.document.close();}
    NewDiv.prototype.addEventHandler    = function(eventname, handler) {this.layer.captureEvents(NewDiv._eventmasks[eventname]); var newdivel = this;this.layer[eventname] = function(event) { return handler(newdivel, event.type, event.x, event.y, event.which, event.which,((event.modifiers & Event.SHIFT_MASK) != 0),((event.modifiers & Event.CTRL_MASK)  != 0),((event.modifiers & Event.ALT_MASK)   != 0));}}
    NewDiv.prototype.removeEventHandler = function(eventname)          {this.layer.releaseEvents(NewDiv._eventmasks[eventname]);delete this.layer[eventname];}
    NewDiv._eventmasks                  = {onabort:Event.ABORT,onblur:Event.BLUR,onchange:Event.CHANGE,onclick:Event.CLICK,ondblclick:Event.DBLCLICK, ondragdrop:Event.DRAGDROP,onerror:Event.ERROR, onfocus:Event.FOCUS,onkeydown:Event.KEYDOWN,onkeypress:Event.KEYPRESS,onkeyup:Event.KEYUP,onload:Event.LOAD,onmousedown:Event.MOUSEDOWN,onmousemove:Event.MOUSEMOVE, onmouseout:Event.MOUSEOUT,onmouseover:Event.MOUSEOVER, onmouseup:Event.MOUSEUP,onmove:Event.MOVE,onreset:Event.RESET,onresize:Event.RESIZE,onselect:Event.SELECT,onsubmit:Event.SUBMIT,onunload:Event.UNLOAD};
}

if (isIE) {
    NewDiv.prototype.output             = function()                   { var d = this.window.document;d.writeln('<DIV ID="' + this.id + '">');d.writeln(this.body);d.writeln("</DIV>");this.element = d.all[this.id];this.style = this.element.style;}
    NewDiv.prototype.moveTo             = function(x,y)                { this.style.pixelLeft = x;this.style.pixelTop = y;}
    NewDiv.prototype.moveBy             = function(x,y)                { this.style.pixelLeft += x;this.style.pixelTop += y;}
    NewDiv.prototype.show               = function()                   { this.style.visibility = "visible"; }
    NewDiv.prototype.hide               = function()                   { this.style.visibility = "hidden"; }
    NewDiv.prototype.setZ               = function(z)                  { this.style.zIndex = z; }
    NewDiv.prototype.setBgColor         = function(color)              { this.style.backgroundColor = color; }
    NewDiv.prototype.setBgImage         = function(image)              { this.style.backgroundImage = image;}
    NewDiv.prototype.getX               = function()                   { return this.style.pixelLeft; }
    NewDiv.prototype.getY               = function()                   { return this.style.pixelRight; }
    NewDiv.prototype.getWidth           = function()                   { return this.style.width; }
    NewDiv.prototype.getHeight          = function()                   { return this.style.height; }
    NewDiv.prototype.getZ               = function()                   { return this.style.zIndex; }
    NewDiv.prototype.isVisible          = function()                   { return this.style.visibility == "visible"; }
    NewDiv.prototype.setBody            = function()                   { var body = "";for(var i = 0; i < arguments.length; i++) {body += arguments[i] + "n";}this.element.innerHTML = body;}
    NewDiv.prototype.addEventHandler    = function(eventname, handler) { var NewDiv = this;this.element[eventname] = function() { var e = NewDiv.window.event;e.cancelBubble = true;return handler(NewDiv, e.type, e.x, e.y, e.button, e.keyCode, e.shiftKey, e.ctrlKey, e.altKey); }}
    NewDiv.prototype.removeEventHandler = function(eventname)          { delete this.element[eventname];}
}

var msg1 = '<H1 STYLE="color:orange;font-size:12pt">This text will move upon mouseover (and change background color)</H1>'
var msg2 = '<H1 STYLE="color:blue;font-size:20pt">This text alternates color (and placement)</H1>'
var msg3 = '<H1 STYLE="color:red;font-size:19pt">This text alternates color (and placement)</H1>'
var div1 = new NewDiv(window, "d1", msg1, 100, 200);
var div2 = new NewDiv(window, "d2", msg2, 30,30,120);
</SCRIPT>

Body Code:

<script type=text/javascript>
div1.output();
div2.output();
function moveDiv() {
    var i = (Math.random()-.5)*10;
    if  (i < .5) div1.setBody(msg2);
    else div1.setBody(msg3);
}
setInterval("moveDiv()", 100);
div2.addEventHandler("onmousedown", function(d) {d.setBody("*SECRET*<BR>WOW YOU DID IT!");});
div2.addEventHandler("onmouseover", 
       function(d,type,x,y,button,key,shift,ctrl,alt) { 
           if (shift) return; 
           d.moveTo(Math.random()*400, Math.random()*400);
           var r = (Math.floor(Math.random()*240+16)).toString(16);
           var g = (Math.floor(Math.random()*240+16)).toString(16);
           var b = (Math.floor(Math.random()*240+16)).toString(16);
           d.setBgColor("#"+r+g+b);
       });
</SCRIPT>

Times Viewed: 2

Leave a Reply

Your email address will not be published. Required fields are marked *