프로그래밍(Programming)

따라다니는 톱버튼(파이어폭스, 인터넷익스플로워 지원)

Sherlockhomes 2015. 5. 8. 17:28
728x90

아래소스를 <head>와</head>사이에 삽입

<script type="text/javascript">
function CheckUIElements() { 
  var yMenu1From, yMenu1To, yOffset, timeoutNextCheck; 
  var wndWidth = parseInt(document.body.clientWidth); 
  yMenu1From   = parseInt (webminiLayer.style.top, 10); 
  yMenu1To     = document.body.scrollTop + 200; // 위쪽 위치 
  timeoutNextCheck = 500; 

  if ( yMenu1From != yMenu1To ) { 
    yOffset = Math.ceil( Math.abs( yMenu1To - yMenu1From ) / 20 ); 
    if ( yMenu1To < yMenu1From ) 
      yOffset = -yOffset; 

    webminiLayer.style.top = parseInt (webminiLayer.style.top, 10) + yOffset; 

    timeoutNextCheck = 10; 
  } 
  webminiLayer.style.left = (document.body.clientWidth/2)+440; 
  setTimeout ("CheckUIElements()", timeoutNextCheck); 


function MovePosition() { 
  var wndWidth = parseInt(document.body.clientWidth); 

  // 페에지 로딩시 포지션 
  webminiLayer.style.top = 200; 
  webminiLayer.style.left = (document.body.clientWidth/2)+440; 
  webminiLayer.style.visibility = "visible"; 

  // initializing UI update timer 
  CheckUIElements(); 
  return true; 

</script>

<body>와 </body>원하는 위치에 아래소스 삽입

<div style="position:absolute;top:400px;left:expression( (document.body.clientWidth/2)+404);z-index:2;" id="webminiLayer" name="webminiLayer">  
<a href="#top"><img src="톱버튼이미지경로" width="38" height="24" border="0"></a>
</div>
<script type="text/javascript">MovePosition();</script>

확인결과 사파리,오페라,파폭,익스6/7 모두 작동합니다.
만약에 작동이 안되시는 분들은 상단의 DTD를 아래와 같이 바꿔주시기 바랍니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
버튼의 이미지는 사이트에 맞게 수정해주시면 됩니다.
탑버튼쪽에 메뉴를 삽입하면 메뉴가 따라다니겠죠? 응용해서 사용하세요.

728x90

'프로그래밍(Programming)' 카테고리의 다른 글

VMware 사용법 및 설치 2  (0) 2015.05.08
windows xp 실행 명령어 조합  (0) 2015.05.08
[JSTL] 쿠키 이용  (0) 2015.03.26
PHP에서 cURL 모듈 사용하기  (0) 2015.03.26
리눅스 tar/gz 압축 풀기/하기  (0) 2015.03.26