'Web'에 해당되는 글 60건
- 2010/02/18 Javascript - Element Opacity Control for Cross Browser
- 2010/02/03 UX를 편리하게 하기 위한 7 CSS 팁
- 2009/09/23 Ext JS 3.0
- 2009/09/16 For Beginner XML DOM & Javascript Guide
- 2009/08/04 Identity 2.0
- 2009/07/20 Javascript : Microsoft OS & Internet Explorer Agent Check
- 2009/05/08 Javascript – 이벤트 추가
- 2009/03/12 How to set css style on disabled FORM INPUT Tag
- 2009/02/17 스크립트에서 클라이언트 프로그램 실행 시키는 방법 (3)
- 2009/02/09 CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법 (2)
Javascript - Element Opacity Control for Cross Browser
자바스크립트로 HTML Element의 투명도(Opacity)를 조절하는 경우 크로스 브라우저(Cross Browser)를 지원하기 위해 삽질을 하게 된다.
이럴 때 아래 코드를 이용하자
function setOpacity(id, opacity) {
var object = id.style;object.opacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
}
이올린에 북마크하기
이올린에 추천하기'Web > JavaScript' 카테고리의 다른 글
| Javascript - Element Opacity Control for Cross Browser (0) | 2010/02/18 |
|---|---|
| Ext JS 3.0 (0) | 2009/09/23 |
| Javascript : Microsoft OS & Internet Explorer Agent Check (0) | 2009/07/20 |
| Javascript – 이벤트 추가 (0) | 2009/05/08 |
| 스크립트에서 클라이언트 프로그램 실행 시키는 방법 (3) | 2009/02/17 |
| [js]브라우저의 오른쪽 상단의 X표시를 누르거나 창을 닫을때 이벤트 잡기! (1) | 2009/01/05 |
Cross Browser,
element,
html,
javascript,
opacity,
자바스크립트,
크로스 브라우징,
프로그래밍,
서울특별시 영등포구 여의동 | 서울 영등포구 여의도동
Trackback : http://i-ruru.com/trackback/525
-
Subject kssn 무엇일까요?
2010/02/18 16:34
오늘 아침 뉴스를 보고 깜짝 놀랐습니다. 뉴스에서 동영상 유투브에서 우리나라 국민들의 주민번호를 알아낼수 있는 동영상이 인터넷 상에 떠돌아 다니면서 제법 큰 병원이나 할것 없이 동영상을 따라 하기만 하면 각종 개인정보들이 굴비 엮듯이 줄줄이 사탕처럼 나오더군요. kbs 9시 뉴스에 나왔는데 2010년 21회 벤쿠버 동계올림픽 때문에 묻혀서 가네요.. 정작 아주 중요한 사건인데 말이죠.. 개인정보가 유출되고 있어서 마음이 많이 안타깝습니다. KSSN이..
7 Quick CSS Enhancements for Better User Experience
- Firefox, Opera, and Safari에서만 됨
::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }2. Prevent Firefox Scrollbar Jump
- Firefox용
html { overflow-y:scroll; }3. Rounded-Corner Elements
input { -moz-border-radius:10px; -webkit-border-radius:10px; }4. Print Page Breaks
.page-break { page-break-before:always; }5. Attribute-Specific Icons
a[href$='.pdf'] { padding:0 20px 0 0; background:transparent
url(/graphics/icons/pdf.gif) no-repeat center right; }6. CSS Pointer Cursors
input[type=submit],label,select,.pointer { cursor:pointer; }7. display:block Links
#navigation li a { display:block; }[참조사이트]
'Web > CSS' 카테고리의 다른 글
| UX를 편리하게 하기 위한 7 CSS 팁 (0) | 2010/02/03 |
|---|---|
| How to set css style on disabled FORM INPUT Tag (0) | 2009/03/12 |
| CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법 (2) | 2009/02/09 |
| 버튼을 CSS로 이쁘게~ (0) | 2008/06/21 |
| IE 6에서 나타나는 배경이미지 깜빡임 현상 수정 (2) | 2008/01/28 |
| DIV를 이용해 가운데 정렬 (1) | 2008/01/24 |
Trackback : http://i-ruru.com/trackback/534
http://www.extjs.com/blog/2009/08/10/ext-js-30-be-outstanding/
UI 관련 JavaScript 라이브러리로 유명한 ExtJS 3.0이 얼마전에 나왔죠.
크게 바뀐 점은 많이 사용해보지 않은 저는 잘 모르겠군요.
대신 아래 발췌해온 내용 처럼 Designer Preview 라는 내용이 흥미롭군요.
Adobe Air 프로그램으로 ExtJS 를 이용한 디자인을 하고 미리보면서 작업할 수 있어요.
UI를 보면서 작업한다는게 참 멋지고 좋을듯..?
Designer Preview
Constructing your interfaces in code will be a thing of the past. We are releasing a Designer Preview that will allow you to experiment with the designer interface and to explore how configs affect your layout. Soon, you will be able to build your application components using base Ext components and Certified User Extensions.
Code generation is currently not available. Our intentions are to charge a fee for this service and to enable our community to create and sell their creations on our marketplace. Our goals are lofty. We want to be the iTunes of Web App Development.
'Web > JavaScript' 카테고리의 다른 글
| Javascript - Element Opacity Control for Cross Browser (0) | 2010/02/18 |
|---|---|
| Ext JS 3.0 (0) | 2009/09/23 |
| Javascript : Microsoft OS & Internet Explorer Agent Check (0) | 2009/07/20 |
| Javascript – 이벤트 추가 (0) | 2009/05/08 |
| 스크립트에서 클라이언트 프로그램 실행 시키는 방법 (3) | 2009/02/17 |
| [js]브라우저의 오른쪽 상단의 X표시를 누르거나 창을 닫을때 이벤트 잡기! (1) | 2009/01/05 |
Trackback : http://i-ruru.com/trackback/503
얼마전에 댓글로 문의하신 분이 있는데..
정말 잘 정리된 내용이 있었군요.
아쉽지만 영문이라 문제지만,
그래도 참 좋은 내용의 사이트인 것은 확실합니다.
'Web > AJAX' 카테고리의 다른 글
| For Beginner XML DOM & Javascript Guide (0) | 2009/09/16 |
|---|---|
| Ajax 호출의 일반적인 패턴 (0) | 2007/08/21 |
| ASP.NET에서 사용할 정말 편한 Ajax Library (2) | 2007/08/18 |
| Ajax Pattern (0) | 2007/08/08 |
| Ajax DOM 제어 (0) | 2007/07/08 |
| Ajax를 통해 특정영역에 페이지 로드 (0) | 2007/07/05 |
Trackback : http://i-ruru.com/trackback/499
http://identity20.com/media/OSCON2005/
Dick Hardt 의 Identity 2.0 에 대한 강연 내용입니다.
정말 유명한 내용이죠.
간만에 서핑중에 링크를 발견해서 이곳에 가져옵니다.
언제 봐도 멋진 강연이네요 ^ ^
'Web > WEB2.0' 카테고리의 다른 글
| Identity 2.0 (0) | 2009/08/04 |
|---|---|
| SOA (0) | 2007/11/02 |
| Web2.0 Workgroup (0) | 2007/08/29 |
| 제2차 테터캠프 대전 KAIST (0) | 2007/05/21 |
Trackback : http://i-ruru.com/trackback/475
Javascript : Microsoft OS & Internet Explorer Agent Check
Web Page에서 브라우저와 OS에 따라 다른 조치를 해야 하는 경우가 있습니다.
그래서 브라우저에서 받아올 수 있는 User Agent 값을 분석해서 이에 이용하게 되죠.
다음과 같이 값을 체크하는 부분을 공통으로 작성하여 가져다가 쓰면 좋을 것 같네요.
테스트 페이지(Test page): BrowserTest.html
<html>
<head>
<title>Browser Agent Test</title>
<script type="text/javascript">
function BrowserIs()
{
var agt = navigator.userAgent.toLowerCase();
this.osver = 1.0;
if (agt)
{
var stOSVer = agt.substring(agt.indexOf("windows ") + 11);
this.osver = parseFloat(stOSVer);
}
this.major = parseInt(navigator.appVersion);
this.nav = ((agt.indexOf('mozilla')!=-1)&&((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible')==-1)));
this.nav2 = (this.nav && (this.major == 2));
this.nav3 = (this.nav && (this.major == 3));
this.nav4 = (this.nav && (this.major == 4));
this.nav6 = this.nav && (this.major == 5);
this.nav6up = this.nav && (this.major >= 5);
this.nav7up = false;
if (this.nav6up)
{
var navIdx = agt.indexOf("netscape/");
if (navIdx >=0 )
this.nav7up = parseInt(agt.substring(navIdx+9)) >= 7;
}
this.ie = (agt.indexOf("msie")!=-1);
this.aol = this.ie && agt.indexOf(" aol ")!=-1;
if (this.ie)
{
var stIEVer = agt.substring(agt.indexOf("msie ") + 5);
this.iever = parseInt(stIEVer);
this.verIEFull = parseFloat(stIEVer);
}
else
this.iever = 0;
this.ie3 = ( this.ie && (this.major == 2));
this.ie4 = ( this.ie && (this.major == 4));
this.ie4up = this.ie && (this.major >=4);
this.ie5up = this.ie && (this.iever >= 5);
this.ie55up = this.ie && (this.verIEFull >= 5.5);
this.ie6up = this.ie && (this.iever >= 6);
this.ie7up = this.ie && (this.iever >= 7);
this.ie8up = this.ie && (this.iever >= 8);
this.win16 = ((agt.indexOf("win16")!=-1)
|| (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1)
|| (agt.indexOf("windows 16-bit")!=-1) );
this.win31 = (agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) ||
(agt.indexOf("windows 16-bit")!=-1);
this.win98 = ((agt.indexOf("win98")!=-1)||(agt.indexOf("windows 98")!=-1));
this.win95 = ((agt.indexOf("win95")!=-1)||(agt.indexOf("windows 95")!=-1));
this.winnt = ((agt.indexOf("winnt")!=-1)||(agt.indexOf("windows nt")!=-1));
this.win32 = this.win95 || this.winnt || this.win98 ||
((this.major >= 4) && (navigator.platform == "Win32")) ||
(agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1);
this.os2 = (agt.indexOf("os/2")!=-1)
|| (navigator.appVersion.indexOf("OS/2")!=-1)
|| (agt.indexOf("ibm-webexplorer")!=-1);
this.mac = (agt.indexOf("mac")!=-1);
this.mac68k = this.mac && ((agt.indexOf("68k")!=-1) ||
(agt.indexOf("68000")!=-1));
this.macppc = this.mac && ((agt.indexOf("ppc")!=-1) ||
(agt.indexOf("powerpc")!=-1));
this.w3c = this.nav6up;
}
function ObjectStripShow(obj, outputDivId)
{
var outputStr = "";
for (var i in obj) outputStr += i + " = " + eval('obj.' + i) + "<br/>\n";
if (outputDivId == null || document.getElementById(outputDivId) == null)
document.write(outputStr);
else
document.getElementById(outputDivId).innerHTML = outputStr;
}
window.onload = function()
{
var bi = new BrowserIs();
ObjectStripShow(bi, 'output');
};
</script></head>
<body>
<div id="output">
</div>
</body>
</html>
결과(Result ):
osver = 5.2
major = 4
nav = false
nav2 = false
nav3 = false
nav4 = false
nav6 = false
nav6up = false
nav7up = false
ie = true
aol = false
iever = 7
verIEFull = 7
ie3 = false
ie4 = true
ie4up = true
ie5up = true
ie55up = true
ie6up = true
ie7up = true
ie8up = false
win16 = false
win31 = false
win98 = false
win95 = false
winnt = true
win32 = true
os2 = false
mac = false
mac68k = false
macppc = false
w3c = false
'Web > JavaScript' 카테고리의 다른 글
| Javascript - Element Opacity Control for Cross Browser (0) | 2010/02/18 |
|---|---|
| Ext JS 3.0 (0) | 2009/09/23 |
| Javascript : Microsoft OS & Internet Explorer Agent Check (0) | 2009/07/20 |
| Javascript – 이벤트 추가 (0) | 2009/05/08 |
| 스크립트에서 클라이언트 프로그램 실행 시키는 방법 (3) | 2009/02/17 |
| [js]브라우저의 오른쪽 상단의 X표시를 누르거나 창을 닫을때 이벤트 잡기! (1) | 2009/01/05 |
Trackback : http://i-ruru.com/trackback/483
웹 페이지에서 컨트롤이나 Element에 이벤트를 추가하기 위해 Cross-browser를 고려해야 한다.
이럴 때 다음과 같이 코드를 작성하면 되겠다.
if (window.addEventListener)
{
window.addEventListener('click', SomeClass.ClickEventMethod , false);
}
else
{
window.attachEvent('onclick', SomeClass.ClickEventMethod );
}
특정 타겟 브라우저로 개발을 하더라도 위와 같이 작업하는 습관은 정말 중요할 것 같다.
'Web > JavaScript' 카테고리의 다른 글
| Ext JS 3.0 (0) | 2009/09/23 |
|---|---|
| Javascript : Microsoft OS & Internet Explorer Agent Check (0) | 2009/07/20 |
| Javascript – 이벤트 추가 (0) | 2009/05/08 |
| 스크립트에서 클라이언트 프로그램 실행 시키는 방법 (3) | 2009/02/17 |
| [js]브라우저의 오른쪽 상단의 X표시를 누르거나 창을 닫을때 이벤트 잡기! (1) | 2009/01/05 |
| DHTML을 빠르게 하는 12가지 튜닝 (0) | 2008/07/14 |
Trackback : http://i-ruru.com/trackback/452
잘 모르던 내용인데 Google Chrome 내에 있는 라이브러리를 보다가 알게 되었네요.
textarea:disabled,
input:not([type]):disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled {
background-color: #EBEBE4;
}
위와 같이 테그에 type 속성을 xpath 잡는 방식으로 잡네요. 그리고 그 뒤의 다른 속성 지정방식은 일반 CSS에서 하는 방식과 같으니 중요하진 않네요 ㅎㅎ
모르셨던 분들은 메모해두시길 ^ ^
'Web > CSS' 카테고리의 다른 글
| UX를 편리하게 하기 위한 7 CSS 팁 (0) | 2010/02/03 |
|---|---|
| How to set css style on disabled FORM INPUT Tag (0) | 2009/03/12 |
| CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법 (2) | 2009/02/09 |
| 버튼을 CSS로 이쁘게~ (0) | 2008/06/21 |
| IE 6에서 나타나는 배경이미지 깜빡임 현상 수정 (2) | 2008/01/28 |
| DIV를 이용해 가운데 정렬 (1) | 2008/01/24 |
Trackback : http://i-ruru.com/trackback/428
일단 이건 MS IE 전용이라는 가정이 있어야하고 -_ -;
먼저 클라이언트에 "C:\winetc\eMule\emule.exe" 파일(실행파일)이 있다고 가정한다.
보안문제가 발생할 수 있으므로, "신뢰할 수 있는 사이트"에 등록되어 있어야 사용 가능한 스크립트입니다.
작성 HTML
과연 써먹을 구석이 있긴 한걸지 -_ -;;<html>
<head><head>
<script language="javascript">
function aa()
{
var objWSH = new ActiveXObject("WScript.Shell");
var retval = objWSH.Run("C:\\winetc\\eMule\\emule.exe",1,true);
}
</script><body>
<input type="button" name="test" onclick="aa();">
</body>
</html>
그래도..
HTA application(MSDN을 찾아보시길;)을 만든다면 써먹지 않을지 생각된다;
'Web > JavaScript' 카테고리의 다른 글
| Javascript : Microsoft OS & Internet Explorer Agent Check (0) | 2009/07/20 |
|---|---|
| Javascript – 이벤트 추가 (0) | 2009/05/08 |
| 스크립트에서 클라이언트 프로그램 실행 시키는 방법 (3) | 2009/02/17 |
| [js]브라우저의 오른쪽 상단의 X표시를 누르거나 창을 닫을때 이벤트 잡기! (1) | 2009/01/05 |
| DHTML을 빠르게 하는 12가지 튜닝 (0) | 2008/07/14 |
| 다양한 HTML 소스복사 / 마우스 우클릭 방지 모음 (0) | 2008/05/23 |
Execute,
HTA,
javascript,
loca program,
microsoft,
Programming,
script,
스크립트,
실행,
자바스크립트,
클라이언트 프로그램,
프로그래밍
Trackback : http://i-ruru.com/trackback/376
-
JKwang 2009/04/23 23:31
질문있습니다만.위와같이 하면 "자동화 서버는 개체를 작성할 수 없습니다."라고 자바스크립트 에러가 나오는데 해결방안이 있는지요???
신뢰할수있는싸이트에 등록해주었고 로컬이랑 인터넷 영역에 안전하지않은 스크립팅~~~ 사용으로 해주었습니다.ㅠ_ㅠ;;-
써니루루 2009/04/24 02:51
마지막줄에 적어둔 내용대로 웹 페이지 상에서는 스크립트 권한 문제로 사용하지 못하는 경우가 많습니다.
그래서 HTA 프로그램 등에만 사용하셔야할 것 같습니다.
위 코드를 응용해서 *.hta 확장자로 windows 로컬에서만 작동하는 프로그램을 개발할 때 유용하죠.
일반적으로 CD에 들어있는 autorun에 실행될 설치 페이지나 cd 목록 페이지를 만들때 자주 사용되는 *.hta에 적용하기 좋은 내용입니다.
-
-
JKwang 2009/04/24 11:15
그런내용이었군요^^감사합니다~!!
일단 핵심적인 내용을 먼저 하면
1. 문자열을 출력하는 영역에 너비(width)가 고정되어야 합니다.
2. 문자열의 넘어서는 부분을 생략(ellipsis)하고, 다른 넘어서는 부분은 안보이게(hidden) 처리합니다.
예를들어 다음과 같은 코드를 실행해보면
이해하시는데 빠를거에요 ^ ^
<table id=tb border=1 style="table-layout:fixed;">
<tr>
<td style="overflow: hidden; text-overflow:ellipsis; width:150px;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
</table>
결과는 다음과 같이 ... 문자가 붙어 나타나죠 ^ ^
'Web > CSS' 카테고리의 다른 글
| UX를 편리하게 하기 위한 7 CSS 팁 (0) | 2010/02/03 |
|---|---|
| How to set css style on disabled FORM INPUT Tag (0) | 2009/03/12 |
| CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법 (2) | 2009/02/09 |
| 버튼을 CSS로 이쁘게~ (0) | 2008/06/21 |
| IE 6에서 나타나는 배경이미지 깜빡임 현상 수정 (2) | 2008/01/28 |
| DIV를 이용해 가운데 정렬 (1) | 2008/01/24 |
Trackback : http://i-ruru.com/trackback/399
-
M 2009/02/09 22:08
text-overflow는 CSS3의 속성이라 IE6,7는 물론이고 일부 신형 브라우져에서도 안될 확률이 높네요.
Prev
