 |
iframe 으로 불려질 문서의 크기에 따라 자동으로 크기를 설정 해 주는 스크립트 입니다
많은 분들이 필요하신 소스일것 같네요
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> J@sko Sample Script </title>
<meta name="Generator" content="EditPlus">
<!-- [1단계] 아래의 코드를 <head> 와 </head> 사이에 붙여 넣으세요 -->
<script type="text/javascript">
var iframeids=["myframe"] // iframe 에 사용할 ID 를 지정 해 주세요
var iframehide="yes"
function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent)
currentfr.attachEvent("onload", readjustIframe)
}
}
function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}
function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}
if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller
</script>
<!----------------- 여기까지 ----------------->
</head>
<body>
<!-- [2단계] 아래의 방법으로 iframe 태그를 넣으세요 -->
<iframe id="myframe" src="http://www.jasko.co.kr/homepage/main.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
<!-- 여기에서 주의할 점은 스크립트의 맨 처음에 지정한 iframe 의 아이디를 반드시 사용해야 한다는 점입니다 --->
<!----------------- 여기까지 ----------------->
<p>
위의 페이지는 iframe 태그에 의해 불려진 페이지의 전체 입니다<br>
이처럼 이 스크립트를 사용하면 불려질 문서의 길이가 자동으로 체크되어 그 길이만큼 iframe 이 보여집니다
</body>
</html>
|
|
자동크기 아이프레임
|
|
|
| | | | | |
<A HREF="javascript:jaskoFind={x:function(){var r,i,s=document.selection.createRange().text;if(!s)s=prompt('찾을글자는요?:','JASKO');if(s){r=document.body.createTextRange();for(i=0;r.findText(s);i++){r.execCommand('BackColor','','yellow');r.collapse(false)};alert(i)}}};jaskoFind.x()">페이지안의 특정 단어를 찾아줍니다</A>
|
|
특정단어 하이라이트시키키
|
|
|
| | | | | |
<html>
<head>
<title>Page Navigator</title>
<style type="text/css">
.pageNavigator_item_normal {
padding-left:5px;
padding-right:5px;
font-size:12px;
width:20px;
display:block;
float:left;
}
.pageNavigator_item_focused {
padding-left:5px;
padding-right:5px;
font-size:16px;
font-weight:bold;
width:20px;
display:block;
float:left;
}
</style>
<!-- Java Script -->
<script type="text/javascript">
<!--//
// 여기서부터...
function getElementsByClass(_class, el_id) {
var parent, els, returnArr = new Array(), i = 0;
parent = (el_id) ? document.getElementById(el_id) : document;
els = parent.getElementsByTagName('*') || parent.all;
for (i; i < els.length; i++)
if (els[i].className == _class)
returnArr[returnArr.length] = els[i];
return returnArr;
}
function pause(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}
function pageNavigator() {
this.target = "pageNavigator";
this.start = 1;
this.end = 99;
this.currentPage = 1;
this.per = 10;
this.nStart = 1;
this.nEnd = 99;
this.pageURL = "#";
this.normalClass = "pageNavigator_item_normal";
this.focusedClass = "pageNavigator_item_focused";
this.activate = function(objId) {
this.target = objId;
}
this.setStartPage = function(page) {
this.start = page;
}
this.setEndPage = function(page) {
this.end = page;
}
this.setCurrentPage = function(page) {
if (page <= this.end && page >= this.start) {
this.currentPage = page;
} else {
this.currentPage = this.start;
}
this.nStart = this.currentPage - Math.round(this.per / 2);
if (this.nStart < this.start) {
this.nStart = this.start;
}
this.nEnd = this.nStart + this.per - 1;
if (this.nEnd > this.end) {
this.nEnd = this.end;
this.nStart = this.end - this.per + 1;
}
}
this.setPerPage = function(num) {
this.per = num;
}
this.setPageURL = function(pUrl) {
this.pageURL = pUrl;
}
this.setNormalClass = function(classSelector) {
this.normalClass = classSelector;
}
this.setFocusedClass = function(classSelector) {
this.focusedClass = classSelector;
}
this.display = function() {
var rect = document.createElement("DIV");
rect.id = this.target;
rect.innerHTML = "";
nStart = this.nStart;
nEnd = this.nEnd;
nCurrent = this.currentPage;
if (nStart < this.start) {
nStart = this.start;
}
if (nEnd > this.end) {
nEnd = this.end;
}
for (var i=nStart; i <= nEnd; i++) {
var item = document.createElement("A");
item.id = "pageNavigator_item_" + i;
if (i == nCurrent) {
item.className = this.focusedClass;
} else {
item.className = this.normalClass;
}
item.act = null;
if(i == nStart) {
if (i != this.start){
item.act = "prev";
}
}
if(i == nEnd) {
if (i != this.end) {
item.act = "next";
}
}
item.innerHTML = i;
item.href = this.pageURL + i;
item.onmouseover = focusMe;
rect.appendChild(item);
}
document.getElementById(this.target).innerHTML = "";
document.getElementById(this.target).appendChild(rect);
}
this.nextPage = function() {
this.nEnd++;
if (this.nEnd > this.end) {
this.nEnd = this.nEnd - 1;
} else {
this.nStart++;
}
this.currentPage = this.nEnd;
//pause(500);
this.display();
}
this.prevPage = function() {
this.nStart = this.nStart - 1;
if (this.nStart < this.start) {
this.nStart++;
} else {
this.nEnd = this.nEnd - 1;
}
this.currentPage = this.nStart;
//pause(500);
this.display();
}
}
function focusMe() {
var objs = getElementsByClass(pNav.focusedClass, this.target);
for(var i = 0; i < objs.length; i++) {
objs[i].className = pNav.normalClass;
}
this.className = pNav.focusedClass;
pause(50);
if (this.act == "next") {
pNav.nextPage();
}
if (this.act == "prev") {
pNav.prevPage();
}
}
// 여기까지 외부 .js파일로 만들어두면 좋겠죠.
var pNav = new pageNavigator();
window.onload=init;
function init() {
pNav.setNormalClass("pageNavigator_item_normal");
pNav.setFocusedClass("pageNavigator_item_focused");
//요 아래부분을 해당하는 게시판 페이지에 맞춰 뿌려주면 되겠죠.
pNav.setStartPage(1); // 게시물 목록의 첫 페이지
pNav.setEndPage(99); // 게시물 목록의 마지막 페이지
pNav.setPerPage(10); // 리스트에 한번에 보일 페이지 갯수
pNav.setCurrentPage(7); // 처음 보일 때의 선택 페이지
pNav.setPageURL("list.php?page="); // 링크될 페이지 URL
pNav.activate("page_navigation"); //대체될 페이지 네비게이션 영역
pNav.display();
}
//-->
</script>
</head>
<body>
<div id="nothing">
자.. 여기쯤에 게시판 목록이 있다 치고...
</div>
<div id="page_navigation">
<a href="">1</a>
...
<a href="">11</a>
<a href="">12</a>
<a href="">13</a>
<a href="">14</a>
<a href="">15</a>
<a href="">16</a>
<a href="">17</a>
<a href="">18</a>
<a href="">19</a>
<a href="">20</a>
...
<a href="">99</a>
</div>
</body>
</html>
|
|
다이나믹 페이지네비게이터
|
|
|
| | | | | |
|
http://exploding-boy.com/images/cssmenus/menus.html
|
|
css 디자인 메뉴
|
|
|
| | | | | |
<html>
<head>
<title>이미지 없이 라운딩 박스 + 보더 표현하기!</title>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC; background:#EEEEEE}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.box{ margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; background:#EEEEEE; font-size:12px}
</style>
</head>
<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">이미지 없이 라운딩 박스 + 보더 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
|
|
라운딩 테이블 + 보더
|
|
|
| | | | | |
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title> jasko sample script </title>
</head>
<body>
<P ID="lastLineEffect" STYLE="text-align:justify; text-align-last:auto">
JavaScript Source Bank J@SKO
</P>
<!---- 아래의 방법으로 정열방법을 지정 해 보세요 --->
<p>
<A HREF="javascript:void(lastLineEffect.style.textAlignLast='auto')">자동 정열</A>
<A HREF="javascript:void(lastLineEffect.style.textAlignLast='center')">가운데 정열</A>
<A HREF="javascript:void(lastLineEffect.style.textAlignLast='justify')">배분 정열</A>
<A HREF="javascript:void(lastLineEffect.style.textAlignLast='left')">왼쪽 정열</A>
<A HREF="javascript:void(lastLineEffect.style.textAlignLast='right')">오른쪽 정열</A></P>
</body>
</html>
|
|
텍스트 정렬
|
|
|
| | | | | |
<style type="text/css">
#layer1{ /** 첫 번째 레이어에 사용할 레이어의 위치와 모양입니다 ***/
position:absolute;
LEFT:100; TOP:100; /** 위에서 100 픽셀, 왼쪽에서 100픽셀 떨어진 곳에 보여집니다 ***/
width:200; height:100; /** 가로 200 픽셀, 높이 100 픽셀입니다 ***/
background-color:orange; /** 배경색은 오렌지색 ***/
}
#layer2{ /** 두 번째 레이어에 사용할 레이어의 위치와 모양입니다 ***/
position:absolute;
TOP:200; LEFT:300; /** 위에서 200 픽셀, 왼쪽에서 300픽셀 떨어진 곳에 보여집니다 ***/
width:200; height:100; /** 가로 200 픽셀, 세로 100 픽셀짜리 레이어 입니다 ***/
background-color:lightgreen; /** 배경색은 밝은 그린색입니다 ***/
}
</style>
<body></body> 에서는 아래처럼 레이어를 보여줄 수 있습니다
<div id=layer1>
오렌지색 레이어
</div>
<div id=layer2>
연두색 레이어
</div>
|
|
CSS 와 DIV 태그로 나타내기
|
|
|
| | | | | |
<!----- 1. 아래의 스크립트를 HEAD 부분에 붙여 넣으세요 -------->
<SCRIPT LANGUAGE="JavaScript">
<!--
function Check(x,y) {
for(i=1;i<=4;i++) {
z = "option" + i ;
document.all[z].src = "off.gif" ;
}
document.all[x].src = "on.gif"
document.all.action.value = x
}
//-->
</script>
<!------------------ 여기까지 --------------->
</HEAD>
<BODY>
<!----- 2. 원하는 위치에 아래와 같이 코드를 붙여 넣으세요 ------->
<input type=text name=action value="option1">
<p>
<a href="#"><img border="0" src="on.gif" width="11" height="11" name=option1 onclick=Check(this.name,"")></a>
첫번째 항목</p>
<p>
<a href="#">
<img border="0" src="off.gif" width="11" height="11" name=option2 onclick=Check(this.name,"")></a>
두번째 항목</p>
<p>
<a href="#"><img border="0" src="off.gif" width="11" height="11" name=option3 onclick=Check(this.name,"")></a>
세번째 항목</p>
<p>
<a href="#"><img border="0" src="off.gif" width="11" height="11" name=option4 onclick=Check(this.name,"")></a>
네번째 항목</p>
<!------------------ 여기까지 -------------->
|
|
이미지 라디오 버튼
|
|
|
| | | | | |
<STYLE TYPE="text/css">
<!--
.print {page-break-before: always;}
-->
</STYLE>
<p>첫번째 페이지에서 프린트 할 본문내용....
<p class=print>두번째 페이지에서 출력할 본문 내용
<p class=print>세번째 페이지에서 출력할 본문 내용
<p class=print>네번째 페이지에서 출력할 본문 내용
:
:
:
위에서 보는것처럼 스타일시트에서 클래스를 지정해 줄때
page-break-before: always 로 설정 한 후,
원하는 부분에서 <태그 class=print> 처럼 설정을 해 주면 해당 클래스를 만나게 되면 페이지를 바꾸어 출력하게 해 줍니다
|
|
페이지 나누어 프린트하기
|
|
|
| | | | | |
|
|
포토샵에 열려있는 창 한번에 닫기
|
|
|
| | | | | |
레이어 팔레트에서, 레이어들을 모두 Hidden 속성으로 하고, 저장을 하면, 파일의 용량이 작아집니다.
|
|
psd파일 용량 줄이기
|
|
|
| | | | | |
Ctrl 키와, Shift키, Alt 키를 동시에 누른채로 포토샵 실행메뉴를 클릭합니다.
|
|
포토샾 초기화
|
|
|
| | | | | |
<script language=javascript>
//쿠기설정
function getCookie(name){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length ) {
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
function dxpopgo(chk, url, popname, w, h, t, l) {
if(getCookie(chk) != "no" ){
var child = null;
child = window.open(url,popname,"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=" + w + ",height=" + h + ",top=" + t + ",left=" + l);
child.opener = self;
child.focus();
}
return;
}
function setCookie(name, value, expiredays){
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name+"="+escape( value )+"; path=/;expires="+todayDate.toGMTString()+";"
}
//div 배너 닫기 스크립트
function divbannerclose()
{
pop.style.display = "none";
if(window.document.divbanner.chkdivbanner.checked == true)
{
setCookie("Event12", "no", 1);
}
}
function divbanneropen()
{
if(getCookie("Event12") != "no" ){
pop.style.display = "block";
}
}
</script>
<div id="pop" name="pop" style="position:absolute;top:280px;left:545px;display:none">
<form name="divbanner">
<table cellpadding=0 cellspacing=0 width=100%>
<tr>
<td>
<a href="URL"><img src="이미지경로" border="0"></a><br>
<input type=checkbox name="chkdivbanner"><a href="javascript:divbannerclose();"><font color="#ffffff">오늘 하루 그만보기</font></a>
<a href="javascript:divbannerclose()"></a>
</td>
</tr>
</table>
</form>
</div>
|
|
쿠키 DIV베너
|
|
|
| | | | | |
<SCRIPT>
<!--
// 첫번째 이미지
var picture1="../240_9.jpg"
// 두번째 이미지
var picture2="../240_8.jpg"
// 이미지의 크기를 설정 합니다
var picturewidth=240
var pictureheight=154
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all) {
document.write('<OBJECT ID="DAControl_Wipe" ')
document.write('STYLE="width:'+picturewidth+';height:'+pictureheight+'"')
document.write('CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D">')
document.write('</OBJECT>')
m = DAControl_Wipe.MeterLibrary;
whatTransformation = new ActiveXObject("DXImageTransform.Microsoft.Wipe");
whatPictures = new Array();
whatPictures[0] = m.ImportImage(picture1);
whatPictures[1] = m.ImportImage(picture2);
forward = m.Interpolate(0, 1, 3);
back = m.Interpolate(1, 0, 2);
whatMovement = m.Sequence(forward, back).RepeatForever();
whatTransformation.GradientSize = 1.0;
whatTransformation.WipeStyle = 0;
theResult = m.ApplyDXTransform( whatTransformation, whatPictures, whatMovement );
DAControl_Wipe.Image = theResult.OutputBvr;
DAControl_Wipe.Start();
}
//-->
</SCRIPT>
|
|
페이드 이미지 효과
|
|
|
| | | | | |
<SCRIPT LANGUAGE="JavaScript">
<!--
<!---Edited by JASKO-->
<!---Web Site : http://www.javascript.co.kr-->
var globopObject;
var opIndex=0;
var cleared=true;
var direction=10;
function dynOpacity(opObject,stop)
{
if (stop)
{
clearInterval(window.tm);
cleared=true;
opIndex=10;
return;
}
globopObject=opObject;
if (opIndex>110) direction=-4;
if (opIndex<0) direction=4;
opIndex+=direction;
globopObject.style.filter='alpha(opacity:' + opIndex + ')';
if (cleared)
{
window.tm=setInterval("dynOpacity(globopObject,false);",1);
cleared=false;
}
//alert(window.tm);
}
function handleevent()
{
if (event.type=="mouseover")
if(event.srcElement.tagName=="IMG")
if (event.srcElement.parentElement.tagName=="A")
{
dynOpacity(event.srcElement,false);
}
if (event.type=="mouseout")
if(event.srcElement.tagName=="IMG")
{
event.srcElement.style.filter="";
dynOpacity(event.srcElement,true);
}
}
document.onmouseover=handleevent;
document.onmouseout=handleevent;
//-->
</SCRIPT>
|
|
온마우스어버 알파
|
|
|
| | | | | |
|
