Web Publisher
html/css Category
IE6에서 셀렉트박스가 z-index에 무관하게 최상위로 보이는 현상
<!--[if lte IE 6.0]>
<script type="text/javascript">
function selectFix(divID) {
var tar = document.getElementById(divID);
var tarWidth = tar.offsetWidth;
var tarHeight = tar.offsetHeight;
var tarTop = tar.offsetTop;
var tarLeft = tar.offsetLeft;
var coverID = divID + "_cover";
if (document.getElementById(coverID)) return false;
var cover = document.createElement("iframe");
tar.parentNode.insertBefore(cover,tar);
cover.setAttribute("id",coverID);
if (!document.getElementById(coverID)) return false;
var obj = document.getElementById(coverID);
obj.setAttribute("frameborder",0);
obj.style.position = "absolute";
obj.style.top = tarTop + "px";
obj.style.left = tarLeft + "px";
obj.style.width = tarWidth + "px";
obj.style.height = tarHeight + "px";
}
function removeSelectFix(divID) {
var tar = document.getElementById(divID);
var obj = document.getElementById(divID + "_cover");
if (!obj) return false;
tar.parentNode.removeChild(obj);
}
</script>
<![endif]-->
조건부 주석으로 IE6에서만 적용되도록 감쌌음.
아래의 사용법
<script type="text/javascript">
function showPopup() {
document.getElementById("popup").style.display = "";
try{
if(selectFix) {
selectFix("popup");
}
}catch(aa){}
}
function hidePopup() {
document.getElementById("popup").style.display = "none";
try{
if(removeSelectFix) {
removeSelectFix("popup");
}
}catch(aa){}
}
</script>
레이어등이 보이는경우 – showPopup();에 selectFix(layerID)를 추가해 주고,
레이어를 없앨경우 – hidePopup(); 에 removeSelectFix(layerID)를 추가함.
- select를 단순 박스형태로 덮는경우에 사용 가능
- 동적으로 움직이는 레이어나 box형태가 아닌 레이어에 대해 iframe의 한계가 있음.
- 투명한 플래쉬일 경우 역시 iframe의 한계가 있음.
Tab메뉴
javascript
function tabMenu(id,currentNum) {
var objAnchor = [], objLink = [];
var ID = document.getElementById(id);
var objLI = ID.getElementsByTagName('li');
var initialize = function() {
for (var i=0; i<objLI.length; i++) {
objLink[i] = objLI[i].getElementsByTagName('a')[0];
objAnchor[i] = document.getElementById(objLink[i].getAttribute('href').split('#')[1]);
if (i != 0)
objAnchor[i].className += ' hidden';
else
objLink[i].parentNode.className += ' visible';
objEvent(i);
}
if (currentNum) objLink[currentNum-1].onclick();
};
var objEvent = function(num) {
objLink[num].onclick = function() {
for (var i=0; i<objLI.length; i++) {
var imgEl = objLink[i].getElementsByTagName('img')[0]
if (i == num) {
if (imgEl) imgEl.src = imgEl.src.replace('.gif', '_on.gif');
if (objLink[i].parentNode.className.indexOf('visible') == -1)
objLink[i].parentNode.className += ' visible';
objAnchor[i].className = objAnchor[i].className.replace('hidden', '');
} else {
if (imgEl) imgEl.src = imgEl.src.replace('_on.gif', '.gif');
objLink[i].parentNode.className = objLink[i].parentNode.className.replace('visible', '');
if (objAnchor[i].className.indexOf('hidden') == -1)
objAnchor[i].className += ' hidden';
}
}
return false;
}
};
initialize();
}
html
<style type="text/css">
.hidden {visibility:hidden;}
.visible {border:1px solid red;}
</style>
<div class="tab_cont">
<ul id="tab_menu">
<li><a href="#notice1">notice 1</a></li>
<li><a href="#notice2">notice 2</a></li>
<li><a href="#notice3">notice 3</a></li>
</ul>
<div class="box" id="notice1">
notice 1
</div>
<div class="box" id="notice2">
notice 2222
</div>
<div class="box" id="notice3">
notice 3333
</div>
</div>
<script type="text/javascript">
//<![CDATA[
tabMenu('tab_menu',2);
//]]>
</script>
컨테이너 id값과 현재 보여주고 싶은 메뉴를 인수로 갖는다.
- 탭메뉴가 이미지일 경우 “~.gif”와 “~_on.gif”로 작동됨.
- 탭메뉴가 이미지에 관계없이 활성화 된 li에 class=”visible”로 설정
- 내용 중 감춰지는 박스의 class=”hidden”
- 스크립트 중 currentNum 은 초기 활성화 시킬 인수.
접근성을 향상을 위해 숨겨지는 목록에 대해 display:none에서 visibility를 사용했음.
이경우 position기법이 아닐때는 영역문제가 생김에 주의.
Xhtml 1.0 Transitional Document
By: leeyunhan on: Aug 14,2009 In: html/css<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> New Document </title> <link rel="stylesheet" href="" type="text/css" /> <script type="text/javascript" src=""></script> </head> <body> </body> </html>