안내창 위치시키기 2

안내창 위치시키기 2

링크와 안내창의 위치를 잘 배치하는 방법은 링크와 가장 가깝게 안내창을 보여주면 그 링크의 안내창이라는 것을 잘 표현할 수 있습니다. 그리고, 안내창이 페이지에 있는 위치에 따라 안내창의 크기에 따라 링크와 조화를 이루어야 페이지가 잘 정돈되어 보이고 안내창 레이어의 크기에 따라서 이동막대로 이동을 해야 전체 안내창을 볼 수 있는데 이 이동막대로의 화면 이동을 최대한 줄이면 좀 더 편하게 안내창을 볼 수 있습니다. 가능하면 현재 화면에 안내창을 보이게 하면 됩니다.

그리고, nn4에서 안내창이 처음 출력시의 전체문서 밖으로 레이어를 위치시키면 이동한 레이어의 위치에 따른 이동막대가 생기지 않기 때문에 밖에 위치한 안내창의 일부는 페이지 HTML 소스를 보지않는 한 볼 수가 없습니다. 이들의 모든 문제를 지금부터 해결해야 할 것입니다.

안내창 위치시키기 1에서 사용한 코드는 단순히 링크 아래에 안내창을 보여줍니다. 화면보다 큰 안내창을 보면 한 페이지 아래에 안내창의 일부가 놓이게 되어 이동막대를 끌어옮겨야 전체 안내창을 볼 수 있고 만약 페이지 가장 아래나 위에 있는 링크의 경우 nn4에서 안내창의 일부를 볼 수가 없는 문제가 있습니다. 그래서 이들 문제를 해결할 수 있는 코드를 위의 코드에 넣어주어야 합니다.

가능한 한 페이지에 안내창을 다 보이게 하기 위해서 이것저것 해보다가 링크의 중앙에 안내창을 보이게 했습니다. 한 페이지가 넘어가는 페이지에서 안내창의 크기에 따라 한 페이지에 두고 한 페이지가 넘으면 보이는 페이지 가장 위에 안내창을 위치 시켜서 이동막대의 사용을 최소화합니다. 이것을 하기 위해서 링크에서의 안내창과 페이지의 넓이 관계를 5가지 구역으로 나눴습니다.

링크를 눌렀을 때 안내창이 나올 수 있는 모든 경우를 예상하여 전체 페이지에서 위치와 가능한 한 화면에 놓기를 판단할 수 있습니다. 위의 5가지 경우를 좌우도 같이 적용을 합니다.

로 페이지에서 높이와 넓이에 따라 안내창을 위치시키기 위해 heightCenter()함수에게 안내창 레이어와 링크의 event를 처리함수에게 보냅니다.

로 안내창을 링크를 기준으로 페이지에서 높이 위치를 지정합니다.

페이지 넓이에 따른 widthCenter()의 경우도 같은 방식으로 제어합니다. 그리고, 각 안내창에는 닫을 수 있는 링크를 넣어줘야지 안내창을 보고 페이지의 내용을 볼 수 있습니다.

너무 큰 레이어를 안내창으로 사용하면 페이지의 양에 따라서 이런 빈공간이 나올 수 있고 이동막대를 사용하여 안내창을 봐야하므로 안내창으로 사용할 레이어의 크기는 가급적 한 페이지를 넘지 않는 크기로 하면 이런 문제들을 예방할 수 있습니다. 이 페이지의 목적은 안내창으로 사용할 레이어의 크기에 상관없이 링크와 가장 가깝게 창을 보여줍니다.

한가지 주의점이라면 너무 큰 레이어를 안내창으로 사용시 좀 혼란스러울 수 있고 안내창 레이어의 좌표는 left:0 top:0으로 처음에 지정해야지 빈공간이 나오지 않습니다.

function heightCenter(OBJ, E) { 

if(n4) { 
var ODH = OBJ.document.height 
var posTop = E.pageY - ODH/2
var posElementUp = E.pageY - ODH/2
var posElementDown = E.pageY + ODH/2
var screenUp = window.pageYOffset +2 
	// 2를 더해주고 2을 빼준것은 nn4에서 레이어가 border가 있을 경우 
	// 다운되는 경우가 있었다. 그래서 border를 빼주니 페이지와 안내창 간의 
	// 시각적인 구분이 잘 되지않아 2px, 2px의 간격을 두었다. 
var screenDown = window.pageYOffset + window.innerHeight -2
var posY = 0;
	
if(self != top) { 
	posY += 4 
	if( document.width > window.innerWidth+4 ) posY += -16 ; 
	screenDown += posY
}
else if(document.width > window.innerWidth) { 
	posY += -16 
	screenDown += posY
}

if(posElementUp > screenUp && posElementDown < screenDown) {
	posTop = posElementUp; 
}
else if( posElementDown > document.height ) { 
	while( (posElementDown > screenDown) && (posElementUp > screenUp) ) {
			posElementDown--
			posElementUp--
	}
	if(posElementDown > document.height && document.height > screenDown) 
		posElementUp = document.height - ODH; 
}
else if(posElementUp < screenUp && posElementDown < screenDown) {

	while( posElementDown < document.height && posElementUp < screenUp) {
			posElementDown++; 
			posElementUp++
	}
}
else if(posElementUp > screenUp && posElementDown > screenDown 
	&& posElementDown < document.height ) {

	while( posElementDown > screenDown && posElementUp > screenUp) {
			posElementDown--; 
			posElementUp--
	}
}
else if(posElementUp < screenUp && posElementDown > screenDown ) { 

	while( posElementDown < document.height && posElementUp < screenUp) {
			posElementDown++; 
			posElementUp++
	}
}
posTop = posElementUp
if(posTop < 0) posTop=0; 
if( posTop+ODH > document.height && document.height > screenDown) 
	posTop = document.height - ODH 
}	
else if(e4) {
var ODH = OBJ.offsetHeight 
var posTop = E.clientY + document.body.scrollTop - ODH/2 
var posElementUp = E.clientY + document.body.scrollTop - ODH/2 
var posElementDown = E.clientY + document.body.scrollTop + ODH/2 
var screenUp = document.body.scrollTop + 2
var screenDown = document.body.scrollTop + document.body.clientHeight - 2

if(posElementUp > screenUp && posElementDown < screenDown) {
	posTop = posElementUp; 
}
else if(posElementUp < screenUp && posElementDown < screenDown) {
	while(posElementUp < screenUp) {
		posTop++
		posElementDown++; 
		posElementUp++
	}
}
else if(posElementUp > screenUp && posElementDown > screenDown) { 
	while( posElementDown > screenDown && posElementUp > screenUp) {
		posTop--
			posElementDown--; 
			posElementUp--
	}
}
else if(posElementUp < screenUp && posElementDown > screenDown ) { 
	while( posElementUp < screenUp) {
		posTop++
		posElementDown++; 
		posElementUp++
	}
}
if( posTop < 0 ) posTop = 0; 
}
return posTop
}