현재 내가 쓰려는 웹에디터..

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:51

http://xquared.springbook.playmaru.net/pages/522191

 

var xed;
    
      window.onload = function() {
          xed = new xq.Editor("content_l");
          ## 추후 inclue를 시켜셔 css부분은 별도로 적용하는 방향으로 할 예정
          xed.config.contentCssList = ["/js/editor/stylesheets/xq_contents.css","/css/common_design.css","/css/base.css","/css/common.css","layout.css"];         
          xed.config.imagePathForDefaultToolbar = '/js/editor/images/toolbar/';
          xed.config.imagePathForContent = '/js/editor/images/content/';
          xed.setEditMode('wysiwyg');
          xed.setWidth("100%");             
    xed.setHeight("400px");
      }

이런식으로 호출

 

높이 넓이는 xed.setEditMode('wysiwyg');
다음에 해야 적용된다. 아니면 객체를 찾지 못한다.

config 설정은 내부에 디폴트로 상대경로로 잡혀있기때문에 저렇게 해주어야한다.

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

폼 리사이즈 스크립트  (0) 2011.10.26
네이버 블로그에 사용돼는 태그 관련 스크립트  (0) 2011.10.26
html editor 관련 designMode 에 대해서  (0) 2011.10.26
extjs 에디터 수정  (0) 2011.10.26
attachEvent 혹은 addEventListener 에 대한 테스트...  (0) 2011.10.26
Posted by 삽지리
,

html editor 관련 designMode 에 대해서

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:50

에..

extjs의 htmleditor을 보다가 보니..

어떻게 iframe상에서

에디팅을 하는지 궁금했다.

확인해 본결과..

아래와 같이

       if(isIE){

            iframe.contentWindow.document.designMode = 'on';

       

        } else {

            this.doc.designMode = 'on';

        }

 

designMode 라는 속성을 on시키면

브라우저상에서 편집을 할수가 있었던것 ..

흠좀무

 

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

네이버 블로그에 사용돼는 태그 관련 스크립트  (0) 2011.10.26
현재 내가 쓰려는 웹에디터..  (0) 2011.10.26
extjs 에디터 수정  (0) 2011.10.26
attachEvent 혹은 addEventListener 에 대한 테스트...  (0) 2011.10.26
javascript에서 with <<< 요놈  (0) 2011.10.26
Posted by 삽지리
,

extjs 에디터 수정

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:49

기본적으로 웹에디터로 cms에 적용시 문제가 되는것은 미리보기를 할때 화면에서 스타일이 먹어 있지 않는다는점이다.

현재 메뉴에 따른 css를 적용시켜야하는데

이에 따른 문제를 극복하기 위해 다음과같이 처리한다.

 

getDocMarkup 를 수정하여 처리한다.

 

이건 htmleditor이나 ext-all.js에 있으므로 수정해서 쓰도록 하자.

 

추가사항 : 개행의 경우 ie에서는 <BR> ff에서는 <br>로 되므로 게시판에 입력시 xhtml 1.0으로 간다면 <br />로 다 바꾸어주는것이 옳다고 생각된다.

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

현재 내가 쓰려는 웹에디터..  (0) 2011.10.26
html editor 관련 designMode 에 대해서  (0) 2011.10.26
attachEvent 혹은 addEventListener 에 대한 테스트...  (0) 2011.10.26
javascript에서 with <<< 요놈  (0) 2011.10.26
개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교  (0) 2011.10.26
Posted by 삽지리
,

attachEvent 혹은 addEventListener 에 대한 테스트...

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:39

그냥 한번 더 테스트 해봤다.

정확하게 어떻게 동작하는지 보려고..


<html>
<title>event관련 테스트</title>
<head>
<script type="text/javascript">
 function addEvent(object, event ,listener)
 {
  alert(listener);
     if (object.addEventListener){
  object.addEventListener(event, listener, false);
     } else if (object.attachEvent){

  object.attachEvent('on' + event, listener);
     }
 }

 var a = "aaa()";
 var b = "bbb()";
 var windowOnload = new Array();
 function aaa(){
  alert("야");
  document.getElementById("test").innerHTML="야";
 }
 function bbb(){
  alert("호");
  document.getElementById("test").innerHTML="호";
 }

 function ccc(talk){
  alert(talk);
  document.getElementById("test").innerHTML=talk;
 }

 var d = "바";

 

 addEvent(window,'load',aaa);
 addEvent(window,'load',bbb());
 addEvent(window,'load',function(){ccc('가');});

</script>
</head>
<body>
<div id="test">테스트임둥</div>
</body>
</html>

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

html editor 관련 designMode 에 대해서  (0) 2011.10.26
extjs 에디터 수정  (0) 2011.10.26
javascript에서 with <<< 요놈  (0) 2011.10.26
개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교  (0) 2011.10.26
세로로 돌리는 티커  (0) 2011.10.26
Posted by 삽지리
,

javascript에서 with <<< 요놈

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:36

function MM_reloadPage(init) {  //reloads the window if Nav4 resized
   if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
  document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
 }

 

위와같은 페이지에 보면 with가 쓰이는데..

 

이건 with(navigator){

이안에 들어있는 appName는 appName가 아니라

navigator.appName << 요놈이 호출되는것

}

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

extjs 에디터 수정  (0) 2011.10.26
attachEvent 혹은 addEventListener 에 대한 테스트...  (0) 2011.10.26
개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교  (0) 2011.10.26
세로로 돌리는 티커  (0) 2011.10.26
브라우저가 닫힐때, 새로고침을 할때, 다른사이트로 이동할때 이벤트...  (0) 2011.10.26
Posted by 삽지리
,

개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:35

<head>
<script type="text/javascript">
function addEvent(object, event ,listener)
{
    if (object.addEventListener){
        object.addEventListener(event, listener, false);
    } else if (object.attachEvent){

        object.attachEvent('on' + event, listener);
    }
}
window.onload = function (){alert("히히");}
addEvent(window,'load',new Function(alert("하하")));

addEvent(window,'load',function(){alert("하하");});
window.onload =  function (){alert("후후");}
addEvent(window,'load',new Function(alert("허허")));

addEvent(window,'load',function(){alert("허허");});
</script>
</head>
<body>
</body>

 

이렇게 넣었을경우 하하,허허,후후가 나온다

유추해볼 수 있는것은

이벤트 리스너에 등록된것이 먼저 실행된다와

리스너의 순서는 먼저 등록된것부터 실행된다.

onload는 나중에 것이 우선한다.

정도랄까?

 

-------------------------------------------------

수정했다.

삭제부분은 알고보니 새로운 함수를 만들어서 호출하는 것.

onload시 되는것은 동일하겠지만..

window의 onload이벤트떄 되는것이 아니다 ..위와같이 해야 되는것이다.

 

이게 결과가 후후 허허 하하 가 나온다 리스너는 나중에 등록된것이 먼저 실행된다..

랜덤이라는 이야기도 있던데??

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

attachEvent 혹은 addEventListener 에 대한 테스트...  (0) 2011.10.26
javascript에서 with <<< 요놈  (0) 2011.10.26
세로로 돌리는 티커  (0) 2011.10.26
브라우저가 닫힐때, 새로고침을 할때, 다른사이트로 이동할때 이벤트...  (0) 2011.10.26
javascript 창크기 레이어크기 조절시 이벤트  (0) 2011.10.26
Posted by 삽지리
,

세로로 돌리는 티커

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:32

국정브리핑 하다가 만들어봤담..

 

공공기관에서는 많이 쓰이니깐 좋을듯.

 

<script type="text/javascript" language="JavaScript" src="http://news.go.kr/ticker/korean_news_scroll.js" ></script>
                                         
                         <script type="text/javascript" language="JavaScript">
        <!--
        document.write("<ul>");
        for(i=0; i<NewsTitles.length; i++){
                  document.write("<li style='margin:0;padding:0;height:2em;width:175px;text-overflow:ellipsis; overflow:hidden;'><nobr>");
                  document.write(NewsTitles[i]);
                  document.write("<\/nobr><\/li>");
              }
              document.write("<\/ul>");      
        //-->
       </script>   

 

 

<script type="text/javascript">
         <!--
       doTickerUpper(document.getElementById("국정브리핑 div 아이디 "),2,NewsTitles.length);
      //-->
         </script>

 

 

 

function doTickerUpper(target, target_height, target_num) {
    var mover = target.getElementsByTagName("ul").item(0);

    // set
    mover.style.position = "absolute";
    mover.style.margin = "0 0 0 0";
    mover.style.top = "0em";
    mover.topPosition = 0;
 mover.status = "true";
 mover.onmouseover = function(){  
  this.status = "false";
 }
 mover.onmouseout = function(){  
  this.status = "true";
 }

    // duplicate text
    mover.style.height = target_height * target_num * 2 + "em";
    mover.innerHTML += mover.innerHTML;
 
    // set action
    mover.tickerAction = window.setInterval(
        function()
        {
   if(mover.status != "false"){
             if (mover.topPosition * -1 > (target_height * (target_num))) {
                 mover.topPosition = -0.05;
             } else {
                 mover.topPosition -= 0.05;
             }
   }
            mover.style.top = mover.topPosition + "em";
        }
    , 40);
}

 

 

------------------ 인터벌을 넣은 수정버전 --------------------------

 

/**
 * 사용자 메인 화면 공지사항 티커 스크롤되도록 하는 함수
 * @param {Object} target 스크롤 대상 객체
 * @param {Object} target_height 스크롤 너비
 * @param {Object} target_num 스크롤 갯수
 */
function doTickerUpper(target, target_height, target_num,move_length, interval,rest_interval) {
    var mover = target.getElementsByTagName("ul").item(0);

    // set
    mover.style.position = "absolute";
    mover.style.margin = "0 0 0 0";
    mover.style.top = "0em";
    mover.topPosition = 0;
 mover.status = "true";
 
 mover.moveheight = 0.0;
 var interval = (typeof interval != "undefined")? interval : 40;
 var rest_interval = (typeof rest_interval != "undefined")? rest_interval : 200;
 mover.onmouseover = function(){   
  this.status = "false";
 }
 mover.onmouseout = function(){  
  this.status = "true";
 }

    // duplicate text
    mover.style.height = target_height * target_num * 2 + "em";
    mover.innerHTML += mover.innerHTML;
 
    // set action
    mover.tickerAction = function()
        {
   var timer = interval;   
   if(mover.status != "false"){
             if (mover.topPosition * -1 > (target_height * (target_num))) {
                 mover.topPosition = -move_length;     
             } else {
                 mover.topPosition -= move_length;
             }
    
    mover.moveheight  += move_length;    
    if(mover.moveheight >= target_height){
     timer = rest_interval;
     mover.moveheight = 0.0;    
    }
    
   }
            mover.style.top = mover.topPosition + "em";
   window.setTimeout(mover.tickerAction, timer);
        } 
 mover.tickerAction();
   
}

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

javascript에서 with <<< 요놈  (0) 2011.10.26
개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교  (0) 2011.10.26
브라우저가 닫힐때, 새로고침을 할때, 다른사이트로 이동할때 이벤트...  (0) 2011.10.26
javascript 창크기 레이어크기 조절시 이벤트  (0) 2011.10.26
window.onload 에 펑션을 마음대로 추가하기...  (0) 2011.10.26
Posted by 삽지리
,

브라우저가 닫힐때, 새로고침을 할때, 다른사이트로 이동할때 이벤트...

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:31

<html>
<head>
<script language='javascript' type='text/javascript'>
    function unload()
    {
  alert("unload 됩니다.")       

  if (self.screenTop > 9000) {
  // 브라우저 닫힘
  alert("브라우저가 닫힘.")
  } else {
   if (document.readyState == "complete") {
   // 새로고침
   alert("새로고침")
   } else if (document.readyState == "loading") {
   // 다른사이트로 이동
   alert("다른사이트로 이동");
   }
  }

    }
</script>
</head>
<body onunload="unload()">
 <a href="http://www.naver.com"> 네이버 </a>
</body>
</html>

 

 

-------------

 

오페라,사파리에서는 페이지 이동시에만 unload 이벤트가 발생한다.

 

파폭,익스는 3가지 이벤트를 다 잡아내지만 document.readyState가 표준 속성이 아니라서 파폭은 onunload이벤트만 잡아낸다.

 

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

javascript에서 with <<< 요놈  (0) 2011.10.26
개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교  (0) 2011.10.26
세로로 돌리는 티커  (0) 2011.10.26
javascript 창크기 레이어크기 조절시 이벤트  (0) 2011.10.26
window.onload 에 펑션을 마음대로 추가하기...  (0) 2011.10.26
Posted by 삽지리
,

javascript 창크기 레이어크기 조절시 이벤트

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:22

왜 이걸 몰랐을까? 라는 생각이 든다.

창의 크기를 줄이고 늘렸을때 특정 엘리먼트의 크기가 변해야되는 일이 있었을때

내가 생각한건 setinterval 함수로 계속 체크를 해주는 방법이였다.

벗뜨 onresize라는 이벤트가 있었으니.

다음은 msdn에서 퍼온것이다.

여기서 놀란것은 난 window.onresize 만 생각했는데

div.onresize도 있넴.. 흠좀무

출처 : http://msdn2.microsoft.com/en-us/library/ms536959(VS.85).aspx

--------------------------------------------------------------

onresize Event

Fires when the size of the object is about to change.

Syntax

Inline HTML <ELEMENT onresize = "handler" ... > All platforms
Event property object.onresize = handler JScript only
object.onresize = GetRef("handler") Visual Basic Scripting Edition (VBScript) 5.0 or later only
Named script <SCRIPT FOR = object EVENT = onresize> Internet Explorer only

Event Information

Bubbles No
Cancels No
To invoke Change the height or width of the object.
Default action No default action.

Event Object Properties

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query the event object for the following event properties.

Available Properties

altKey Sets or retrieves a value that indicates the state of the ALT key.
altLeft Sets or retrieves a value that indicates the state of the left ALT key.
clientX Sets or retrieves the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
clientY Sets or retrieves the y-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars.
ctrlKey Sets or retrieves the state of the CTRL key.
ctrlLeft Sets or retrieves the state of the left CTRL key.
offsetX Sets or retrieves the x-coordinate of the mouse pointer's position relative to the object firing the event.
offsetY Sets or retrieves the y-coordinate of the mouse pointer's position relative to the object firing the event.
returnValue Sets or retrieves the return value from the event.
screenX Sets or retrieves the x-coordinate of the mouse pointer's position relative to the user's screen.
screenY Sets or retrieves the y-coordinate of the mouse pointer's position relative to the user's screen.
shiftKey Sets or retrieves the state of the SHIFT key.
shiftLeft Retrieves the state of the left SHIFT key.
srcElement Sets or retrieves the object that fired the event.
type Sets or retrieves the event name from the event object.
x Sets or retrieves the x-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element.
y Sets or retrieves the y-coordinate, in pixels, of the mouse pointer's position relative to a relatively positioned parent element.

Remarks

The onresize event fires for block and inline objects with layout, even if document or CSS (cascading style sheets) property values are changed. Objects have layout when measurements such as the height and width attributes are set, or when the position of the object is set. Intrinsic objects, such as button, and windowed objects, such as window and iframe, fire as expected. This event does not fire for files with embedded controls.

Resizing HTML applications also fires the onresize event.

Standards Information

There is no public standard that applies to this event.

Applies To

A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE, CODE, CUSTOM, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FORM, FRAME, hn, HR, I, IMG, INPUT type=button, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, OBJECT, OL, P, PRE, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, window, XMP

 

--------------------------------------------------------------

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

javascript에서 with <<< 요놈  (0) 2011.10.26
개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교  (0) 2011.10.26
세로로 돌리는 티커  (0) 2011.10.26
브라우저가 닫힐때, 새로고침을 할때, 다른사이트로 이동할때 이벤트...  (0) 2011.10.26
window.onload 에 펑션을 마음대로 추가하기...  (0) 2011.10.26
Posted by 삽지리
,

window.onload 에 펑션을 마음대로 추가하기...

개인적인 프로그램/자바스크립트 2011. 10. 26. 13:21

대충만들어봣다.

 

이것의 쓰임새는 아무래도 onload에 무언가 이벤트를 추가할 필요성이 있는데 이 onload가 하나의 function이 아닌 여러개의 function이 돌아갈때 쓰이는것이겟다.

예를들면 left메뉴에 배너가 달려서 window.onload시 배너 function이 setInteval로 돌아가야하는데 나중에 컨텐츠 작업을 하면서 마찬가지로 window.onload돌아가야하는 이벤트가 있을경우 쓸모가 있다 하겠다.

 

삽질했다..

 

window.attachEvent

를 쓰면 되네 -_-

기존에 있는건 삭제 -_-

<script>
var a = "aaa()";
var b = "bbb()";
var windowOnload = new Array();
function aaa(){
 alert("야");
}
function bbb(){
 alert("호");
}

function ccc(talk){
 alert(talk);
}

var d = "바";


window.attachEvent("onload", aaa);

window.attachEvent("onload", bbb);

window.attachEvent("onload", new Function("ccc('가')"));
window.attachEvent("onload", new Function("ccc('"+d+"')"));
window.attachEvent("onload", new Function("ccc('다')"));

 


</script>

<body>
</body>

 

------------위 스크립트는 FF에서 안된다 ------------

그래서 아래와 같이 해준다...

 

function addEvent(object, event ,listener)
{
    if (object.addEventListener){
        object.addEventListener(event, listener, false);
    } else if (object.attachEvent){

        object.attachEvent('on' + event, listener);
    }
}
addEvent(window,'load',new Function("ccc('가')"));

-------------------2008년 4월 24일 수정 -------------

잘못알고 있었다.

위의 이벤트는 onload시가 아니라. 그냥 실행된것이라고 보면 된다.. 자바스크립트가 돌면서.. 하놔..

addEvent(window,'load',new Function("ccc('가')"));

위와 같이 되어 있는 이벤트는

 

addEvent(window,'load',function(){ccc('가');});

와 같이 하는것이 옳다..

 

그동안 낚이신 분들 지못미..

 

'개인적인 프로그램 > 자바스크립트' 카테고리의 다른 글

javascript에서 with <<< 요놈  (0) 2011.10.26
개인적으로 이벤트 리스너에 등록하는 것과 이벤트의 펑션 입력시의 차이 비교  (0) 2011.10.26
세로로 돌리는 티커  (0) 2011.10.26
브라우저가 닫힐때, 새로고침을 할때, 다른사이트로 이동할때 이벤트...  (0) 2011.10.26
javascript 창크기 레이어크기 조절시 이벤트  (0) 2011.10.26
Posted by 삽지리
,

티스토리툴바