<table> 에서 style="border:solid 1px #000" 형태로 선을 넣었을경우.

 

공백상태의 행이나 열에서는 선이 표시가 안되는 경우가 있습니다.

 

이럴경우 각 <td> 에 &nbsp; 를 넣으면 해결이 되긴하지만..

 

양이 많을 경우 완전 노가다가 됩니다.ㅎㅎㅎ

 

이럴경우 border-collapse:collapse; 를 이용하면 공백에도 선이표시가 됩니다.

 

style="border:solid 1px #000;border-collapse:collapse;" 로 넣어주시면 됩니다.^^

저작자 표시 비영리
신고

따라 다니는 퀵메뉴 만들기


<!-- 퀵 메뉴 -->

<div style="float:right; top:50px; position:absolute; z-index:10; left:750px;" id="floater">

퀵메뉴에 들어갈 아이템 영역!!!

</div>


<!-- 퀵 메뉴 -->

<script language="javascript"type="text/javascript">

var lastScrollY = 0;

$(function(){

var diffY = document.documentElement.scrollTop;

// scroll event

$(window).scroll(function(){

var diffTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

if (diffY != lastScrollY) {

percent = .10 * (diffY - lastScrollY);

if (percent > 0) {

percent = Math.ceil(percent);

} else {

percent = Math.floor(percent);

}

diffTop = parseInt($("#floater").offset().top) + percent;

lastScrollY = lastScrollY + percent;

}

$("#floater").stop();

$("#floater").animate({"top": diffTop}, 500);

});

});

</script>

저작자 표시 비영리
신고

인터넷에 넘 복잡시럽고 어려운게 많아서.. 여기저기 블로그에서 본 것들을 합치고 내가 직접 해본걸루 정리해두기

 

보통 통계검색시 시작일,종료일로 많이 달력스크립트 넣는데.. 자바스크립트로 웹에 돌아다니는건 넘 복잡해여 ㅋㅋ

제이쿼리로 클린하게! ㅋㅋ

친절하게 인풋박스 2개인 경우로  ^^

 

 

 

소스는 아래 더보기를 누르면 있구요.. 같은색깔끼리 잘 맞춰주심됩니당.

 

빨간색으로 표시한 부분은 input 박스 우측에 달력이미지버튼이 바로붙거나 위로붙어나오는경우가 있는데

해당 css로 조절해준거구요. 사이트 ui에따라 조절해주시면 됩니다.

그밑에 hide()는 이게 div영역이 하나 잡히는데 보기싫어서 감추어주었습니다. 요것도 각 사이트에 맞게 사용하심 될듯합니다.

 

도움이 되셧다면 공감, 덧글 꾸욱~^^

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 

<script language="javascript" type="text/javascript">
$(document).ready(function() {

//******************************************************************************
// 상세검색 달력 스크립트
//******************************************************************************
var clareCalendar = {
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
dateFormat: 'yymmdd', //형식(20120303)
autoSize: false, //오토리사이즈(body등 상위태그의 설정에 따른다)
changeMonth: true, //월변경가능
changeYear: true, //년변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
buttonImageOnly: true, //이미지표시
buttonText: '달력선택', //버튼 텍스트 표시
buttonImage: 'res/img/comn/calendar.gif', //이미지주소
showOn: "both", //엘리먼트와 이미지 동시 사용(both,button)
yearRange: '1990:2020' //1990년부터 2020년까지
};
$("#fromDt").datepicker(clareCalendar);
$("#toDt").datepicker(clareCalendar);
$("img.ui-datepicker-trigger").attr("style","margin-left:5px; vertical-align:middle; cursor:pointer;"); //이미지버튼 style적용
$("#ui-datepicker-div").hide(); //자동으로 생성되는 div객체 숨김
});

</script>

 

 

<input name="fromDt" type="text" id="fromDt" size="8" maxlength="8" title="시작일자"> ~
<input name="toDt" type="text" id="toDt" size="8" maxlength="8" title="종료일자">

저작자 표시 비영리
신고

네이버에서 돌아가고있는 텍스트 롤링 스크립트 입니다..

예전에 퍼온건데 .. 흠 요즘에 쓸대가 있으려나 모르겠네요 .^^

<html>
<head>
<style type="text/css">
*{font-family:돋움,Dotum,AppleGothic,sans-serif;font-size:12px;color:#333;}
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,fieldset,input,blockquote,th,td{margin:0;padding:0;}
ol,ul,dl{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover,a:hover b,a:hover em,a:hover span{color:#06c;text-decoration:underline;}

/*rolling Button*/
div.rollBtn{position:absolute;z-index:3;}
div.rollBtn a.next{background-position:-22px 0px;cursor:hand;}
div.rollBtn a.previous{margin-right:3px;cursor:hand;}
div.rollBtn a span{display:none;}

#bKey{position:relative;margin-top:9px;width:270px;zoom:1;}
#bKey .keyBg{margin:1px 0 0 0;overflow:hidden;height:18px;}
#bKey ul{clear:both;}
#bKey ul li{float:left;height:18px;}
#bKey ul li.x{background:url(http://simg.paran.com/top_v2.2/top/ic_line06.gif) 100% 0 no-repeat;margin:0 7px 0 0;padding:0 7px 0 0;}
#bKey ul li a{font-weight:bold;color:#FB6A31;letter-spacing:-1px;}
#bKey .rollBtn{left:203px;top:0;}
#bKey .rollBtn .up{margin-right:3px;}
</style>
<script language="JavaScript">
// ----- GetXMLHttpRequest
var msxmlNames = new Array("MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");

function getRequest() {
if(window.ActiveXObject) {
for(var i = 0;i < this.msxmlNames.length; i++) {
try {
return new ActiveXObject(this.msxmlNames[i]);
} catch (e) {}
}
} else if(window.XMLHttpRequest) {
/* Mozilla XMLHttpRequest */
return new XMLHttpRequest();
} else {
/* None found */
return null;
}
}
// ----- GetXMLHttpRequest


// ----- AutoScrolling
var timeout1 = null;
var timeout2 = null;
var timeout3 = null;

function scrolling(objId,sec1,sec2,speed,height){
this.objId=objId;
this.sec1=sec1;
this.sec2=sec2;
this.speed=speed;
this.height=height;
this.h=0;
this.div=document.getElementById(this.objId);
this.htmltxt=this.div.innerHTML;
this.div.innerHTML=this.htmltxt+this.htmltxt;
this.div.isover=false;
this.div.onmouseover=function(){this.isover=true;}
this.div.onmouseout=function(){this.isover=false;}
var self=this;
this.div.scrollTop=0;
timeout1 = window.setTimeout(function(){self.play()},this.sec1);
}
scrolling.prototype={
play:function(){
var self=this;
if(!this.div.isover){
this.div.scrollTop+=this.speed;
if(this.div.scrollTop>this.div.scrollHeight/2){
this.div.scrollTop=0;
}else{
this.h+=this.speed;
if(this.h>=this.height){
if(this.h>this.height|| this.div.scrollTop%this.height !=0){
this.div.scrollTop-=this.h%this.height;
}
this.h=0;
timeout2 = window.setTimeout(function(){self.play()},this.sec1);
return;
}
}
}
timeout3 = window.setTimeout(function(){self.play()},this.sec2);
},
prev:function(){
if(this.div.scrollTop == 0)
this.div.scrollTop = this.div.scrollHeight/2;
this.div.scrollTop -= this.height;
},
next:function(){
if(this.div.scrollTop == this.div.scrollHeight/2)
this.div.scrollTop =0;
this.div.scrollTop += this.height;
}
};
// ----- AutoScrolling


var scrollData = null;

// ----- GetData
function getData() {
var req = getRequest();

req.onreadystatechange = function() {
if(req.readyState == 4 && req.status == 200) {
scrollData = req.responseText;
reStartScroll("jFavList");
}
}

req.open("GET", "목록을 text/plain 으로 내려주는 url");
req.send(null);
};
// ----- GetData


// ----- ReStartScroll
function reStartScroll(divID) {
var div = document.getElementById(divID);
window.clearTimeout(timeout1);
window.clearTimeout(timeout2);
window.clearTimeout(timeout3);

div.innerHTML = scrollData;
new scrolling(divID,1000,1,1,18);
};
// ----- ReStartScroll

</script>
</head>
<body>
<table>
<tr>
<td>
<div id="bKey">
<div id="jFavList" class="keyBg">
<ul><li>좋은소스</li></ul><ul><li>감사감사</li></ul><ul><li>근데...</li></ul><ul><li>어디서퍼왔더라</li></ul>
</div>
<script type="text/javascript"> new scrolling("jFavList",1000,1,1,18); </script>
</div>
</td>
</tr>
</table>
&nbsp;<br>&nbsp;<br>
<input type="button" value="updateData" onclick="getData()"/>
</body>
</html>

저작자 표시 비영리
신고

홈페이지에 트위터 위젯을 달아봅시다.^^

트위터에서는 자체적으로 트위터 위젯을 제공해줍니다. ^^

디자인까지 제공하니 따로 디자인할필요도 없고 아주 유용한 서비스를 제공하는것이죠~

 

 



http://www.twitter.com 에 접속하여 로그인후 setting -  profile 메뉴로 들어갑니다.

 

 


(You can also add Twitter to your site here )  버튼을 클릭합니당.

 

 

 

③ My Website 버튼을 클릭합니다.^^

 

 

 




④자신의 글만 소개하는 Profile Widget, 트위터의 글을 검색하는 Search Widget, 즐겨찾기한 글만 보여주는 Faves Widget, 자신이 설정한 리스트 사용자의 글을 보여주는 List Widget 등이 나옵니다. 이중 자신이 쓴글을 블로그에 공개할수 있는 Profile Widget 을 선택합니당

 

 

 


⑤[Preference] 탭에서는 위젯의 기본적인 동작을 지정한다.

 

  1)   Poll for new results?
       글의 내용을 위에서부터 하나씩 밀어내면서 소개하는 효과를 내준다.
  2)   Include scrollbar?
       스크롤 바를 보이게 할 것인지 선택한다.
       만약 옆의 Poll for new results를 켰다면 굳이 선택하지 않아도 된다.
 3)   Timed Interval
       몇 초의 간격을 두고 하나씩 아래로 움직일 것인가를 설정한다.
 4)   Load all tweets
       한 번에 모든 글을 보여준다. 스크롤바 버튼과 같이 사용하면 좋다.
 5)   Number of Tweets
       한 번에 소개하는 글의 개수를 정한다. 자신의 하루 글 작성 수를 넣으면 적당하다.
 6)   Show Avatars?
       글마다 프로필 사진을 앞에 보여줄 것인지 결정한다.
 7)   Show Timestamps?
       시간을 보여준다. 켜두는 것이 좋다.
 8)   Show Hashtags?
       해시태그를 보여준다. 역시 켜두는 것이 좋다.
 9)   Test Settings
       미리보기 기능이다. 위의 사항을 적용시킨 후, 이 버튼을 클릭하면 미리보기 할 수 있다


 

⑥   [Appearance] 탭에서는 위젯의 색깔을 바꿀 수 있다.
       각 컬러 박스를 클릭해서 원하는 색상을 선택한다.
 1)   위젯 상단과 하단의 바탕색 지정
 2)   위젯 상단과 하단의 글자색 지정
 3)   위젯 내부의 바탕색 지정
 4)   위젯 내부의 글자색 지정
 5)   인터넷 링크가 있을 경우의 색깔 지정


 

 


⑦[Dimensions] 탭에서는 위젯의 가로 세로 크기를 정할 수 있다.
 1)   위젯의 가로 길이를 픽셀 단위로 입력한다.
 2)   위젯의 세로 길이를 픽셀 단위로 입력한다.
 3)   크기를 지정하지 않고 정해진 크기를 모두 채우는 가변 크기로 지정하고 싶다면 이 옵션을 선택한다.

 

 


⑧[Finish & Grab Code] 버튼을 클릭하면 박스 안에 소스가 생성된다.
   박스 안의 소스 코드를 복사한다.

 

 

저작자 표시 비영리
신고