반응형

<script type="text/javascript">
    $
(function () {
        $
("#datepicker").datepicker({
            constrainInput
: true,
            showOn
: 'button',
            buttonText
: 'Select...'
       
});
   
});
</script>
<input id="datepicker" disabled="disabled" />

 

위와같이 할 경우 datepicker input 옆에 버튼이 생성된다. 이 버튼의 class는 ui-datepicker-trigger 를 가지므로 스타일시트에서 자신의 기호에 맞게 이미지를 배경으로 깔든 편하게 쓰면 된다.

반응형
반응형

자바스크립트에서 숫자를 표기할때 3자리마다 콤마를 찍어줘야 할 때가 있다 자주 사용하는 기능인데 매번 만들기란 여간 귀찮은게 아니다.

콤마찍기

 

1
2
3
4
5
//콤마찍기
function comma(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}

콤마풀기

 

1
2
3
4
5
//콤마풀기
function uncomma(str) {
    str = String(str);
    return str.replace(/[^\d]+/g, '');
}

 

복사 붙여넣기로 사용하자!

input box에서 사용자 입력시 바로 콤마를 찍어주기 위한 함수도 추가 한다.

 

1
2
3
4
5
function inputNumberFormat(obj) {
    obj.value = comma(uncomma(obj.value));
}
 
//<input type="text" onkeyup="inputNumberFormat(this)" />

 

 

출처 : http://blog.munilive.com/javascript-comma-uncomma/

반응형
반응형

페이스북 developer 에서 app을 새로 생성하면 주는 key를 입력해주면 된다.

 

You wanted to have Facebook Like Button or Facebook Like Box and other Facebook social plugins on your website. You copy pasted to code Facebook generated for you on your web pages. If you do not have an App ID when you copied this, chances are the Facebook script will complain in your Web Browser’s console (e.g Firebug Console).

Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
 
all.js#xfbml=1 (line 56)

To fix this issue, just do a “Create New App” in the Apps section in Facebook. And then go back to the Facebook Social Plugins page, pick a plugin, and regenerate the code for it.

Your Facebook plugin code before having an App ID:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

After you have assigned an App to the plugin

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<your-16-digit-app-id>";  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Notice the difference in the highlighted code? Let me know if this solved your problem in the comment area.

반응형
반응형
<html>
<head>
<style>
div { position: relative; }
</style>


<script>
var initBody;

function beforePrint()
{
initBody=document.body.innerHTML;
document.body.innerHTML=idPrint.innerHTML;
}

function afterPrint()
{
document.body.innerHTML=initBody;
}



window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

</script>


</head>
<body>
<div id="idPrint">
<b>[첫 번째 영역]</b><br>첫 번째 영역입니다!<br><br>
</div>
<b>[두 번째 영역]</b><br>두 번째 영역입니다!<br><br>
<b>[세 번째 영역]</b><br>세 번째 영역입니다!<br>

<input type="button" onclick="window.print()" value="첫번째 영역만 인쇄">

[출처] http://blog.naver.com/masca727/60038165332
</body>
</html>

 

반응형
반응형

iBook 에서 이미지를 클릭 했을때 동적으로 div를 생성하고 그 안에 background-image 스타일 지정을 해주었으나 도통 빈 칸만 뜨고 이미지가 출력되지 않았다.

 

콘솔로그를 찍어볼 수 없는 거지같은 테스트환경이어서 html 마크업으로 일일히 확인해본 결과 이미지를 불러올때 ibooksimg:// 라는 프로토콜을 사용해야 하지만 ibooks:// 로 불러오면서 이미지가 출력되지 않은 것이었다.

 

var str = $("img").get(0).src;

str = str.replace("ibooks://", "ibooksimg://");

 

로 간단히 replace 치환처리 하니 정상 출력되었다.

반응형
반응형

이미지의 원본 크기를 구하기 위해서 $("img").get(0).naturalWidth 이나 naturalHeight 를 변수에 초기화했을때, 0 값이 떨어진다. 이러한 현상을 막기 위해서

 

$("img").load(function(){

var img = {
  width:$(this).get(0).naturalWidth,

  height:$(this).get(0).naturalHeight

});

 

등으로 사용할 수 있다. 그런데 여기서 load 된 값이 캐슁처리되면서 더이상 load가 실행되지 않는다.

이때 아래와 같은 방법으로 대응가능하다.

 

$("img").one("load",function(){

var img = {
  width:$(this).get(0).naturalWidth,

  height:$(this).get(0).naturalHeight

}).each(function(){

if(this.complete){

$(this).trigger("load");

}

});

 

예를 들어 문서가 로드된 상태에서 이미지 목록이 갱신 되었을 때 해당 목록에 있는 이미지들의 원본값을 배열에 초기화하고 싶을때 사용될 수 있겠다.

반응형

'웹프로그래밍 > Javascript' 카테고리의 다른 글

지정된 영역만 인쇄하기  (0) 2015.06.15
Javascript iBook EPUB 3.0 Images not working  (0) 2015.05.27
jQuery Animation Rotate  (0) 2015.05.06
Javascript 모바일 체크  (0) 2015.04.23
Javascript Favicon 적용  (0) 2015.04.23
반응형
$({deg: 0}).animate({deg: d},{
     duration: cf.duration,
     step: function(now) {
      ev.css({
       transform: 'rotate(' + now + 'deg)'
      });
     }
    });

 

반응형
반응형
var mobilecheck = function() {
 var check = false;
 (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
 return check;
}

 

반응형

+ Recent posts