A-AA+then

ทีแรกผมตั้งใจจะให้จบเรื่อง shout box ไปเลย แต่ไหนๆก็ไหนๆแล้วมันยังค้างคาอยู่ในหัวผมอีกเรื่องนึง ก็คือการแสดงผลนี่แหละ ซึ่งความจริงมันก็ไม่ได้เกี่ยวข้องอะไรกับ AJAX เลย มันเป็นเพียงความสามารถของ IE อันหนึ่ง กับ Javascript เสียเป็นส่วนใหญ่ (จริงๆก็ทั้งหมดนั่นแหละ) แต่เพื่อความสมบูรณ์ของบทความเลยเอามาลงเพิ่มเติมให้ละกัน

ที่ผมบอกตั้งแต่บทที่แล้วว่าการแสดงผลมันถูกแบ่งออกเป็น 2 ส่วนตามชนิดของ Browser ส่วนแรกก็คือ IE (น่าจะตั้งแต่ 5.5 ขึ้นมา)

  /* สุ่ม effect */
  switch (Math.floor(Math.random()*7)) {
  case 6: filterstring="progid:DXImageTransform.Microsoft.Checkerboard(squaresX=24, squaresY=16, direction='right', duration=1)"; break
  case 5: filterstring="progid:DXImageTransform.Microsoft.Pixelate(duration=2)"; break
  case 4: filterstring="progid:DXImageTransform.Microsoft.Fade(duration=3,overlap=1.0)"; break
  case 3: filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0, Duration=3, Motion=reverse, wipeStyle=1)"; break
  case 2: filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0, Duration=3, wipeStyle=1)"; break
  case 1: filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0, Duration=3, Motion=reverse)"; break
  default: filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0, Duration=3)"; break
  }
  var imgobj=document.getElementById(divid);
  if (imgobj.filters && window.createPopup) {
  imgobj.style.filter=filterstring;
  imgobj.filters[0].Apply();
  }
  imgobj.innerHTML=val;
  if (imgobj.filters && window.createPopup) imgobj.filters[0].Play();

เป็นการใช้คุณสมบัติ filter ของ IE ครับ โดยในตอนแรกจะเป็นการสุ่ม effect แบบต่างๆเพื่อกำหนดให้กับ filterstring แล้วจึงเอาค่านี้มากำหนดให้กับ imgobj.style.filter เพื่อแสดงผลครับ

/* change the opacity for different browsers */
function shout_changeOpac(opacity, id) {
  var object = document.getElementById(id).style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";

}

var shout_divcurr='shout1';
var shout_divnext='shout2';

function shout_blendDiv(divid, val, millisec) {
  var speed = Math.round(millisec / 100);
  var timer = 0;

  /* สร้าง Layer ใหม่ภายใน Layer หลัก */
  if (!document.getElementById('shout1')) {
    var Objdivid=document.getElementById(divid);
    Objdivid.style.position="relative";
    Objdivid.innerHTML='<div id="shout1"></div><div id="shout2"></div>';
  }
  
  /* สลับ Layer */
  shout_divcurr=shout_divnext;
  shout_divnext=(shout_divcurr=='shout1') ? 'shout2' : 'shout1';

  //กำหนดค่าใหม่ให้กับ Layer shout_divcurr
  shout_changeOpac(0, shout_divcurr);
  document.getElementById(shout_divcurr).innerHTML=val;
  document.getElementById(shout_divcurr).style.zIndex++;
  document.getElementById(shout_divnext).style.zIndex--;

  /* fade in shout_divcurr และ fade out shout_divnext */
  for(i=0; i<=100; i++) {
    setTimeout("shout_changeOpac("+i+", shout_divcurr)",(timer * speed));
    n=100-i;
    setTimeout("shout_changeOpac("+n+", shout_divnext)",(timer * speed));
    timer++;
  };
};

สำหรับในส่วนที่ 2 จะเป็นการแสดงผลบน Browser อื่นครับ เช่น Firefox, Opera, Netscap (ที่ทดสอบแล้ว) โดยใช้วิธีการกำหนด opacity ครับซึ่งในกรณีนี้ในแต่ละบราวเซอร์มีตวามแตกต่างกันในวิธีการกำหนด ทำให้เราต้องใช้หลายวิธีในการกำหนดครับ เช่น opacity,MozOpacity,KhtmlOpacity หรือ filter เป็นต้น

เนื่องจากเราต้องทำการ fade สลับกันใน 2 layer คือ layer หนึ่งจะ fade in ในขณะที่อีก layer หนึ่งจะ fade out ทำให้เราต้องมีการสร้าง layer ใหม่ขึ้นมาเพื่อจัดการแทน คือ shout1 และ shout2 โดยจะมีการสร้างขึ้นมาแทนที่ภายใน layer แสดงผลเดิมเพื่อแสดงผลแทนครับ

สามารถนำไปดัดแปลงใช้กับการแสดงผลอื่นๆได้ตามต้องการครับ

AJAX

Relate

^