'개발/HTML/CSS/JS'에 해당되는 글 40건

  1. 2008/04/12 [스크랩] 다양한 효과의 풍선 도움말
  2. 2007/10/09 XP 스타일에 따라 팝업 사이즈 자동으로 리사이징
  3. 2007/09/04 레이어 안의 이미지 마우스로 지도 움직이듯이 이동하는 자바스크립트
  4. 2007/09/01 웹페이지 인쇄 window.print() 원하는 부분 인쇄하기 (5)
  5. 2007/09/01 DIV 태그에서 position 속성
<< prev 1 2 3 4 5 ... 8 next >>

[스크랩] 다양한 효과의 풍선 도움말

개발/HTML/CSS/JS 2008/04/12 13:45 posted by zekill

나는 P 태그

Cat Mammal Sleeping on the TV
Tuna Chicken ;) In the cupboard
Spider Insect Behind you
Chicken Poultry, haha Crossing the road
Lama Mammal Really slow fading tooltip

Move over this

Move over this text to bring up a tooltip.
Notice how the select box disappears





소스


<html>
<head>
    <title>다양한효과의 풍선도움말</title>
<style>
.thdrcell {
    background:#F3F0E7;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    padding:5px;
    border-bottom:1px solid #C8BA92;
}

.tdatacell {
    font-family:arial;
    font-size:12px;
    padding:5px;
    background:#FFFFFF
}

.dvhdr1 {
    background:#F3F0E7;
    font-family:arial;
    font-size:12px;
    font-weight:bold;
    border:1px solid #C8BA92;
    padding:5px;
    width:150px;
}

.dvbdy1 {
    background:#FFFFFF;
    font-family:arial;
    font-size:12px;
    border-left:1px solid #C8BA92;
    border-right:1px solid #C8BA92;
    border-bottom:1px solid #C8BA92;
    padding:5px;
    width:150px;
}

.dogvdvhdr {
    width:300;
    background:#C4D5E3;
    border:1px solid #C4D5E3;
    font-weight:bold;
    padding:10px;
}

.dogvdvbdy {
    width:300;
    background:#FFFFFF;
    border-left:1px solid #C4D5E3;
    border-right:1px solid #C4D5E3;
    border-bottom:1px solid #C4D5E3;
    padding:10px;
}

.pgdiv {
width:320;
height:250;
background:#E9EFF4;
border:1px solid #C4D5E3;
padding:10px;
margin-bottom:20;
font-family:arial;
font-size:12px;
}
</style>

<script src="js/boxover.js"></script>

</head>
<body>
<p style="margin-top:0px" title="header=[Tooltip with fade & delay] body=[some text for the body] delay=[400] fade=[on]"><b>나는 P 태그</b></p>

<table border=1>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Cat] body=[A nocturnal creature found prowling about alley ways throughout the world.]">
<td class=tdatacell>Cat</td><td class=tdatacell>Mammal</td><td class=tdatacell>Sleeping on the TV</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Tuna] body=[A most tasty snack - especially popular in the gym community, containing 27g per 100g protein. Also commonly mistaken for chicken by those cerebrally challenged individuals out there.]">
<td class=tdatacell>Tuna</td><td class=tdatacell>Chicken ;)</td><td class=tdatacell>In the cupboard</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Spider] body=[Spiderman, Spiderman, does whatever a spider can!]">
<td class=tdatacell>Spider</td><td class=tdatacell>Insect</td><td class=tdatacell>Behind you</td>
</tr>        
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Chicken] body=[Most commonly known to be crossing the road - goddam I crack myself up; apparently I shouldn't quit my day job though]">
<td class=tdatacell>Chicken</td><td class=tdatacell>Poultry, haha</td><td class=tdatacell>Crossing the road</td>
</tr>
<tr title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[Lama] body=[Last seen being fed in Napolean Dynamite] fade=[on] fadespeed=[0.01]">
<td class=tdatacell>Lama</td><td class=tdatacell>Mammal</td><td class=tdatacell>Really slow fading tooltip</td>
</tr>
</table></p>

<img src="img/sample.jpg" title="header=[Good! Fantastic Nature] body=[You wouldn't find this funny unless you've seen Southpark series 8<p>Note that this box halts on a single click</p>]"><p>


Move over <span title="cssbody=[dogvdvbdy] cssheader=[dogvdvhdr] header=[Ha ha! Another dog in a hat] body=[Well I lied.  This was actually a legit example - just showing you can have pictures in the captions as well, or any legitamate HTML for that matter<center><p><img src='doghat2.jpg'></p>] fixedabsx=[150] fixedabsy=[270]" style="font-family:arial;font-size:12px;font-weight:bold;color:#ABABAB;cursor:pointer">this</span>

<div style="font-weight:bold;width:250px;border:1px solid #000000;padding:5px" title="header=[A tooltip] body=[Note the select box disappearing] hideselects=[on]">Move over this text to bring up a tooltip.  <br>Notice how the select box disappears</div><br>



</body>
</html>



boxover.js


옵션설명(영문)

The following table lists settings for BoxOver.
Parameter Possible values Default Description
header Any character blank Specifies the header text of the tooltip
body Any character blank Specifies the body text of the tooltip
fixedrelx Any integer N/A Forces the X-coordinate of the tooltip to stay fixed (offset is relative to the annotated HTML element)
fixedrely Any integer N/A Forces the Y-coordinate of the tooltip to stay fixed (offset is relative to the annotated HTML element)
fixedabsx Any integer N/A Forces the X-coordinate of the tooltip to stay fixed (X is an offset relative to the body of the HTML document)
fixedabsy Any integer N/A Forces the Y-coordinate of the tooltip to stay fixed (Y is an offset relative to the body of the HTML document)
windowlock on / off on Make tooltip stick to side of the window if user moves close to the side of the screen.
cssbody Any defined style class Built in styles Specifies CSS class for styles to be used on tooltip body.
cssheader Any defined style class Built in styles Specifies CSS class for styles to be used on tooltip header.
offsetx Any integer 10 Horizontal offset, in pixels, of the tooltip relative to the mouse cursor.
offsety Any integer 10 Vertical offset, in pixels, of the tooltip relative to the mouse cursor.
doubleclickstop on / off on Specifies whether to halt the tooltip when the user double clicks on the HTML element with the tooltip.
singleclickstop on / off off Specifies whether to halt the tooltip when the user single clicks on the HTML element with the tooltip. - if both singleclickstop and doubleclickstop are set to "on", singleslclickstop takes preference.
requireclick on / off off Specifies whether the user must first click the element before a tooltip appears. Intended for use on links so that information appears while the link is followed.
hideselects on / off off Specifies whether to hide all SELECT boxes on page when popup is activated.
fade on / off off Specifies whether to fade tooltip into visibility.
fadespeed Number between 0 and 1 0.04 Specifies how fast to fade in tooltip.
delay Any integer 0 Specifies delay in milliseconds before tooltip displays.

출처: - www.blueb.co.kr -

2008/04/12 13:45 2008/04/12 13:45
TAG , ,
받은 트랙백이 없고 , 댓글이 없습니다.

XP 스타일에 따라 팝업 사이즈 자동으로 리사이징

개발/HTML/CSS/JS 2007/10/09 18:21 posted by zekill

사용자 삽입 이미지


팝업은 기본스타일에서 뛰었을때 지정한 사이즈대로 잘 뜨게 된다.

하지만 XP 스타일일 경우 약간의 차이가 생긴다...

게다가 익스플로러 7 일경우는 옵션으로 주소표시줄과 상태바를 강제적으로 표시할 수도 있기 때문에
사이즈의 차이가 심하게 날때가 있다.

가로 사이즈는 별 이상이 없지만 세로 사이즈가 문제다...
그래서 전에는 보통 세로 사이즈를 좀 길게 해서 여기저기서 내용은 다 보이도록 했었는데
그리하다 보니 디자인도 별로고 그래서 안되겠다 싶어
한번 자바스크립으로 리사이징 스크립트를 만들어보았다.

우선 차이가 몇 픽셀이나 나는지 알아보았다.
다른 경우도 있을지 모르지만 우선 많이 쓰일만한 네가지만 알아보았다.
기본 스타일에서 세로를 100으로 뛰웠을때 실제로 내용 표시부분은 71이었다
뭐 그러니까 29의 차이가 기본이라는거다.
여기에서 xp스타일로만 했을 경우는 36
기본 스타일에서 주소표시줄과 상태바가 나올 경우 71
xp스타일에서 주소표시줄과 상태바가 나올 경우 80
값 나왔으니 해당 값과 비교해서 윈도우 리사이징 ㅋ
테스트해본 걸로는 제대로 동작은 하더라
뭐 숫자비교하고 리사이징만 하는거라 문제될건 없긴하지만....^^;;;;;;


//xp 스타일에 따라 팝업크기 자동변경
function resize_xpstyle(width, height)
{
 var nDefaultGap   = 29;
 var nXpStyleGap   = 36;
 var nURLandStatusGap = 71;
 var nAllGap    = 80;

 resizeTo(width, height);

 if(document.body.clientHeight == height-nDefaultGap)
 {
  //기본 스타일이므로 변경 필요없음!
 }
 else if(document.body.clientHeight == height-nXpStyleGap)
 {
  resizeTo(width, height+(nXpStyleGap-nDefaultGap));
 }
 else if(document.body.clientHeight == height-nURLandStatusGap)
 {
  resizeTo(width, height+(nURLandStatusGap-nDefaultGap));
 }
 else if(document.body.clientHeight == height-nAllGap)
 {
  resizeTo(width, height+(nAllGap-nDefaultGap));
 }
}


------------------------------------------------------------------------
몇가지 상태가 또 있어서..그상황을 추가한다해도...또 다른 상태가 없으란 법이 없기에...-0-;;;
위의 크기 비교해서 하는건 안되겠다.....

그래서 완전한 노멀팝업상태(xp스타일상태도 아니고 상태표시줄 주소표시줄 뭐 이런거 전혀없는...98이나 2000에서 뜨는 팝업 상태)의 크기를 지정하여 클라이언트 영역을 비교해보니..30픽셀 차이가 났다
그래서 무조건 클라이언트 영역을 기준으로 잡아 리사이징을 다시 하니..위 보다 깔끔하다..-0-;;;

//xp 스타일에 따라 팝업크기 자동변경 - 2007년 10월 19일
function resize_xpstyle(width, height)
{
 
 var tmpHeight = height - 30;
 var heightGap=0;

 resizeTo(width, height);

 if(tmpHeight != document.body.clientHeight)
 {
  heightGap = tmpHeight - document.body.clientHeight;
  resizeTo(width, height+heightGap);
 }

}


2007/10/09 18:21 2007/10/09 18:21
TAG , , , , , ,
받은 트랙백이 없고 , 댓글이 없습니다.

레이어 안의 이미지 마우스로 지도 움직이듯이 이동하는 자바스크립트

개발/HTML/CSS/JS 2007/09/04 18:36 posted by zekill


<script language="Javascript1.1">

/*
desc : 레이어 안의 이미지가 클 경우 스크롤이 생성되게 하고 마우스로 이미지 끌어 이동시키는...
지도 찾기 생각하면 될듯...작업 중 필요한 일이 생겨 만들게 되었는데...그런데로 쓸만한듯....이미지가 크면 버벅대서 문제이기도...-0-;;;
date : 2007-04-18
by zekill
*/
///////////////////////////////////////////////////////////////
///////레이어 안의 이미지 마우스로 움직이기 시작///////////////
/////////////////////////////////////////////////////////////
var g_bMouseDown = false;
var g_nChangePositionX = 0;
var g_nChangePositionY = 0;
var g_layerBackground = null;
function IntValue(num){
    var temp = parseInt(num); if(isNaN(temp)){ temp = 0; }  return temp;
}
function js_moving_object_up() {
    g_bMouseDown = false;
}
function js_moving_object_down(target, event) {
 var evt = event||window.event;
 if(target.style.cursor == "move") {
  g_bMouseDown = true;
  g_nChangePositionX = evt.clientX;
  g_nChangePositionY = evt.clientY;
 }
}
function js_moving_object_move(e) {
 if(g_bMouseDown) {
  var evt = e||window.event;
  var distX = g_nChangePositionX - IntValue(evt.clientX);
  var distY = g_nChangePositionY - IntValue(evt.clientY);

  var background = g_layerBackground;
  var maxRight = background.scrollWidth - background.clientWidth;
  var maxBottom = background.scrollHeight - background.clientHeight;

  if(background.scrollLeft <= maxRight) {
   if( (background.scrollLeft == maxRight && distX > 0) || (background.scrollLeft == 0 && distX < 0) ) {
   } else {
    background.scrollLeft += distX;
    g_nChangePositionX = IntValue(evt.clientX);
   }
  }

  if(background.scrollTop <= maxBottom) {
   if( (background.scrollTop == maxBottom && distY > 0) || (background.scrollTop == 0 && distY < 0) ) {
   } else {
    background.scrollTop += distY;
    g_nChangePositionY = IntValue(evt.clientY);
   }
  }


  return false;
 }
}

//이놈으로 시작 js_moving_object(이미지개체, 배경레이어개체)
function js_moving_object(target, layer_background){
 try{
  target.style.position='relative';
  target.style.zIndex='9999';
  target.style.left='0px';
  target.style.top='0px';
 }catch(e){}
 target.style.cursor = "move";
 target.onmousedown = function(event){ js_moving_object_down(target, event); }
 target.onmouseup = js_moving_object_up;
 target.onmouseout = js_moving_object_up;
 target.onmousemove = js_moving_object_move;
 g_layerBackground = layer_background;
}
///////////////////////////////////////////////////////////////
///////레이어 안의 이미지 마우스로 움직이기 종료///////////////
//////////////////////////////////////////////////////////////

</script>



<div name="layer_mainThumb" id="layer_mainThumb" style="width:747px; height: 472px;overflow-x:scroll; overflow-y:scroll;">

<img name="mainThumb" id="mainThumb" src="image url">

<div>


<script>
 js_moving_object(document.getElementById("mainThumb"), document.getElementById("layer_mainThumb"));
</script>

2007/09/04 18:36 2007/09/04 18:36
TAG , , , , ,
받은 트랙백이 없고 , 댓글이 없습니다.

웹페이지 인쇄 window.print() 원하는 부분 인쇄하기

개발/HTML/CSS/JS 2007/09/01 23:02 posted by zekill
음....레이어로 나누어서
인쇄를 시작하기전에 현재 내용을 안보이게 해놓고
원하는 내용만 다른 레이어에 담다 그 레이어만 노출을 시키고 프린트를 한다.
프린트가 완료되면 노출된 레이어내용을 제거하고 숨겨진 원본 레이어를 다시 노출시킨다...

아래는 위 내용을 만들어논것.....예전에 어디서 알게된건데....기억도 안나고....
하여튼 원래 내용이 작동을 잘 안하고 그래서 좀 변경을 했다...레이어를 좀 추가시켰다고 해야하낭...
할튼 페이지 내용이 많다면 내용을 옮기고 뭐 이런것때문에 시간이 좀 많이 걸린다...약 100-200 페이지 이상 되는 출력일 경우이므로 그리 문제는 없다...그정도페이지면 원래 많이 걸린다...이게 좀더 많이 걸린다느것뿐....-0-;;;


============================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 인쇄 테스트 </TITLE>

<script language="JavaScript">
    function printLayer () {
      if (document.all && window.print) {
        window.onbeforeprint = beforeLayer;
        window.onafterprint = afterLayer;
        window.print();
      }
    }
    function beforeLayer () {
      if (document.all) {
        objContents.style.display = 'none';
        objSelection.innerHTML = document.all['printArea'].innerHTML;
      }
    }
    function afterLayer () {
      if (document.all) {
        objContents.style.display = 'block';
        objSelection.innerHTML = "";
      }
    }


</script>

</HEAD>

<BODY>

<DIV ID="objContents">

    이건 안찍을꺼란 말이지...

    <input type="button" value="출력" onclick="printLayer();">


    <DIV id="printArea" name="taxBill">

    이걸 찍을꺼야~~~

    </DIV>


</DIV>

<DIV ID="objSelection">
</DIV>


</BODY>
</HTML>
2007/09/01 23:02 2007/09/01 23:02
TAG ,
트랙백 16개 , 댓글 5개가 달렸습니다.

DIV 태그에서 position 속성

개발/HTML/CSS/JS 2007/09/01 23:02 posted by zekill
DIV의 position style 을 보면

static
relative
absolute
fixed
inherit

이렇게 있다... 설명하자면...


static
CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다.
HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면, 위에서 부터 차곡 차곡 쌓이는 기본적인 형태이다.
 
relative
한개의 div가 있고 relative로 설정할 경우엔 static과 큰 차이는 없다. 하위에 div가 있을 경우엔 하위의 div를 absolute 배열 할 수 있다.
 
absolute
흔히 레이어라는 개념으로 알고 있는 값이다. div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정되게 띄울 수 있다.
 
fixed
기본적으로 absolute와 같다. absolute는 canvas의 스크롤에 따라 올라가고 내려가지만 fixed의 경우는 스크롤에 상관없이 지정한 위치에 고정된다.
 
inherit
상위에서 지정한 값을 상속한다.



라고 한다.....뭐 여기서 젤 많이 쓰이는게
absolute와 relative 정도 인데...두가지 차이만 잘 이용하면 편할때가 간혹 생긴다.




이 두가지 속성의 차이를 보자면....

absolute 의 경우
말 그대로 절대적인 위치값이다... 브라우저를 띄우고 보았을때 브라우저에서 젤 좌측상단이 top 0, left 0이 되는것이다.
div태그를 이용해서 포지션 속성을 이 absolute 로 해놓고 top과 left를 0 으로 지정해놓으면 이 div태그를 html 소스의 어느곳에 위치시키던지 항상 젤 상단의 좌측에 나타나게 된다는 것이다. r u okay?


relative 의 경우
이 것은  absolute 와는 다르게 상대적인 위치값이다...뭐 말이야 이렇게 된다고 해도 직접 보지 않으면 잘 이해가 안된다.
div태그를 이용해서 포지션 속성을 relative 로 해놓고 top과 left를 0으로 지정해보자 테이블도 몇개 있고 이미지도 몇개 있는 소스에서 이 div태그를 여기저기에 옮겨보며 확인 해보자 다른 태그같이 그 위치로 이동한다.
테이블 두개가 있을 경우 그 사이에 이 태그를 집어넣으면 top과 left 0 이라도 테이블 두개의 사이에 위치한다
그뒤에 top 과 left의 값을 변경해보자~
그럼 그 기본 위치에서부터 입력한 값만큼 이동될것이다


이런 차이가 있다....-0-;;;


예전에 필요해서 찾아 썼다가 쓸일 없다고 잊고있었는데.....
다시 쓰려고 보니 까&#47674;었다가 찾아보고나서 사용하게 되었다....잊어먹는 습관....-0-;;;;
역시 적어놓는게 좋다....
2007/09/01 23:02 2007/09/01 23:02
TAG , , ,
받은 트랙백이 없고 , 댓글이 없습니다.
<< prev 1 2 3 4 5 ... 8 next >>