DHTML for Opera

[Total: 0    Average: 0/5]

This is a DHTML script for most web browsers.

Head Code:

<style type="text/css">

#d1 {
  position: absolute;
  width: 300px;
  height: 300px;
  visibility: hidden;
  color: #000000;
  background: #ccccff;
}

#d2 {
  position: absolute;
  width: 300px;
  height: 300px;
  visibility: hidden;
  color: #000000;
  background: #ccffcc;
}

#d3 {
  position: absolute;
  width: 150px;
  height: 150px;
  visibility: hidden;
  color: #000000;
  background: #ffcccc;
}

</style>

<script type="text/javascript" language="javascript">

var d1, d2, d3, w, h;

window.onload = function()
{
  // Element references are assigned to these variables purely for convenience.
  // In the remaining code I can use "d1" instead of "document.getElementById('d1')".
  
  d1 = document.getElementById('d1');
  d2 = document.getElementById('d2');
  d3 = document.getElementById('d3');

  initial_setup();

  // w and h will hold the original dimensions of the window.
  w = window.innerWidth;
  h = window.innerHeight;
  resizeCheck();
}

//-----------------------------------------------------------------------------
// It appears that Opera has a problem similar to NN4's resize problem.
// And since there is no onResize event, we have to make our own. This function
// runs once every second and checks to see if the window's width and/or height
// have changed. If yes, the page is reloaded.

function resizeCheck()
{
  if (w != window.innerWidth || h != window.innerHeight) {
    location.replace(location.href);
    return;
  }  
  setTimeout("resizeCheck()", 1000);
}

//-----------------------------------------------------------------------------

function initial_setup()
{
  opMoveTo(d1,200,50);
  opMoveTo(d2,250,75);
  opMoveTo(d3,75,75);

  opZIndex(d1,1);
  opZIndex(d2,2);
  opZIndex(d3,3);
  
  opBgColor(d1,'#ccccff');
  opBgColor(d2,'#ccffcc');
  opBgColor(d3,'#ffcccc');

  opTxtColor(d1,'#000000');
  opTxtColor(d2,'#000000');
  opTxtColor(d3,'#000000');
  
  opShow(d1);
  opShow(d2);
  opShow(d3);
}

function color_example()
{
  opBgColor(d1,'#0000ff');
  opBgColor(d2,'#00ff00');
  opBgColor(d3,'#ff0000');
  opTxtColor(d1,'#ffffff');
  opTxtColor(d2,'#ffffff');
  opTxtColor(d3,'#ffffff');
}

//-----------------------------------------------------------------------------
// The remaining functions provide a core dhtml library for Opera. Notice that
// each function requires an Element reference as the first argument. The next
// step would be to implement this library as an object. Then, of course, the
// next step would be to make that object provide cross-browser support. I have
// done this with CrossBrowserElement, and it will be available soon.

function opMoveTo(ele, x, y)
{
  ele.style.pixelLeft = x;
  ele.style.pixelTop = y;
}

function opMoveBy(ele, dx, dy)
{
  ele.style.pixelLeft += dx;
  ele.style.pixelTop += dy;
}

function opShow(ele)
{
  ele.style.visibility = 'visible';
}

function opHide(ele)
{
  ele.style.visibility = 'hidden';
}

function opSizeTo(ele, w, h)
{
  ele.style.pixelWidth = w;
  ele.style.pixelHeight = h;
}

function opSizeBy(ele, dw, dh)
{
  ele.style.pixelWidth += dw;
  ele.style.pixelHeight += dh;
}

function opZIndex(ele, z)
{
  ele.style.zIndex = z;
}

function opBgColor(ele, c)
{
  ele.style.background = c;
}

function opTxtColor(ele, c)
{
  ele.style.color = c;
}

//-----------------------------------------------------------------------------
</script>

Body Code:

<form name="form1">
  <h2>Opera DHTML Examples</h2>
  <p>
  <input type="button" value="Move d2" onclick="opMoveBy(d2,10,10)"><br>
  <input type="button" value="Move d3 To 0,0" onclick="opMoveTo(d3,0,0)"><br>
  <input type="button" value="Move d3 To 75,75" onclick="opMoveTo(d3,75,75)"><br>
  </p><p>
  <input type="button" value="Make d1 Larger" onclick="opSizeBy(d1,10,10)"><br>
  <input type="button" value="Make d1 Smaller" onclick="opSizeBy(d1,-10,-10)"><br>
  </p><p>
  <input type="button" value="Hide d2" onclick="opHide(d2)"><br>
  <input type="button" value="Show d2" onclick="opShow(d2)"><br>
  </p><p>
  <input type="button" value="Bring d1 To Top" onclick="opZIndex(d1,2);opZIndex(d2,1)"><br>
  <input type="button" value="Bring d2 To Top" onclick="opZIndex(d1,1);opZIndex(d2,2)"><br>
  </p><p>
  <input type="button" value="Change Colors" onclick="color_example()"><br>
  </p><p>
  <input type="button" value="Reset All Examples" onclick="initial_setup()"><br>
  </p>
</form>

<!-- Here are three absolutely positioned elements. Notice that d3 is nested in d2. -->

<div id="d1">
  <b>d1</b>
</div>

<div id="d2">
  <b>d2</b><br><br>
  <i>d2 contains d3</i>
  <div id="d3">
    <b>d3</b><br><br>
    <i>d3 is a child of d2</i>
  </div>       
</div>


Times Viewed: 1

Leave a Reply

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