AJAX Cross Origin plugin


로컬 프록시를 작성할 필요없이 Cross Origin AJAX 요청을 허용하는 jQuery 플러그인입니다.   

http://www.ajax-cross-origin.com/

 

Ajax Cross Origin - jQuery plugin

Source code In order maintain this site and keep it running, we ask for symbolic donation before you download the sources. You can donate as much as you want, even $1 is enough. The package contains the source code files include instructions and a test pag

www.ajax-cross-origin.com

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="js/jquery.ajax-cross-origin.min.js"></script>
</head>

<body>

<select id="service">
  <option value="http://ip.jsontest.com/">IP Address</option>
  <option value="http://headers.jsontest.com/">HTTP Headers</option>
  <option value="http://date.jsontest.com/">Date & Time</option>
  <option value="http://echo.jsontest.com/key/value/one/two">Echo JSON</option>
  <option value='http://validate.jsontest.com/?json={"key":"value"};'>Validate</option>
  <option value="http://code.jsontest.com/">Arbitrary JS Code</option>
  <option value="http://cookie.jsontest.com/">Cookie</option>
  <option value="http://md5.jsontest.com/?text=[text%20to%20MD5]">MD5</option>
</select><br/>
<input type="text" id="url" style="width: 400px">
<input type="button" id="btn" value="Get JSON">
<br/><br/>
<div id="test" />

<script type="text/javascript">
$(function() {
  $( '#service' ).on( 'change', function(){
    $( '#url' ).val( $( this ).val() );
  });
  
  $( '#url' ).val( $( '#service' ).val() );
  
  $( '#btn' ).click(function(){
    var url = $( '#url' ).val()
    
    $.ajax({
      crossOrigin: true,
      url: url,
      success: function(data) {
        $( '#test' ).html(data);
      }
    });
  });
}); 
</script>

</body>
</html>
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy.mm.dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    dayNames: ['일','월','화','수','목','금','토'],
    dayNamesShort: ['일','월','화','수','목','금','토'],
    dayNamesMin: ['일','월','화','수','목','금','토'],
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearSuffix: '년'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">

https://zetawiki.com/wiki/JQuery_UI_%EB%82%A0%EC%A7%9C%EC%84%A0%ED%83%9D%EA%B8%B0_datepicker

 

jQuery UI 날짜선택기 datepicker - 제타위키

다음 문자열 포함...

zetawiki.com

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

#jQuery #touch #event #document #bind() #touchmove #touchstart #touchend

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>mobile.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<script src="/js/comm/jquery-1.11.1.js"></script>
<script>

	$(document).ready(function() {

		$(document).bind('touchstart', function(e) {
			$("#msg").html("터치가 시작되었어요.");
			e.preventDefault();	//	이벤트취소
		});

		$(document).bind('touchmove', function(e) {
			//	jQuery 이벤트 객체를 자바스크립트 표준 이벤트 객체로 바꾸기
			//	이유는 jQuery 에서 자바 스크립트
			var event = e.originalEvent;
			$('#msg').html('touch 이벤트 중입니다.'); 
			//	div에 터치한 좌표값 넣기
			$('#msg').append('<div>' + event.touches[0].screenX + ',' +
					event.touches[0].screenY + '</div>');
			event.preventDefault();
		});

		$(document).bind('touchend', function(e) {
			$("#msg").append("<div>터치이벤트가 종료되었어요</div>"); 
		});
	});

</script>
</head>
<body>
<h2>모바일용 홈페이지 입니다.</h2>
<!-- 
		스마트폰의 브라우저 : 마우스 이벤트와는 별도로 터치 이벤트를 지원함 
		touchstart : 터치가 시작될때
		touchend : 터치가 종료될때 
		touchmove : 터치한 상태로 이동할때 
		touchenter : 터치한 요소의 경계외부에서 내부로 이동할때 
		touchleave : 터치한 요소의 경계내부에서 외부로 이동할때 
 -->
<div id="msg"></div>
</body>
</html>
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

jQuery 화면전환 효과 참고 사이트

https://tympanus.net/Development/PageLoadingEffects/index6.html

 

Page Loading Effects | Demo 6

To start the page loading animation, click the following link: Show Page Loader If you enjoyed this demo you might also like: Fullscreen Overlay Effects Shape Hover Effect

tympanus.net

https://tympanus.net/Development/PageTransitions/

 

A Collection of Page Transitions

A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions

tympanus.net

https://github.com/codrops/PageTransitions

 

codrops/PageTransitions

A showcase collection of various page transition effects using CSS animations. - codrops/PageTransitions

github.com

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

SVG, dashoffset, X,Y, animation

https://jsfiddle.net/user/dashboard/fiddles/

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

jQuery - Back button Detect, reload  http://www.vvaves.net/jquery-backDetect/

브라우저에서 뒤로가기 버튼 선택시 페이지를 리로드해주는 쿼리. 

단, 라이브러리를 업로드해야 한다. 

https://github.com/ianrogren/jquery-backDetect

 

ianrogren/jquery-backDetect

jQuery backDetect is a jQuery plugin that is used to determine when a user clicks the back button and fire a callback function. - ianrogren/jquery-backDetect

github.com

backDetect

Determining when a user clicks their browser's back button has never been easier with this jQuery plugin. With a quick easy install and minimal set up work you'll be firing callback functions on back button declarations in no time.

View the Project on GitHubianrogren/jquery-backDetect

Using jQuery-backDetect

Can append to any element or class:

$(window).load(function(){ $('body').backDetect(function(){ // Callback function alert("Look forward to the future, not the past!"); }); });</script>

Click the back button to test.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

jQuery - URL add Hash, get HashjQuery - URL add Hash, get Hash

var url = $(location).attr("href");

url.substring(url.indexOf('#'));

window.location="#222" 

Posted by 홍반장水 홍반장水
TAG ADD, Get, hash, jQuery, url

댓글을 달아 주세요

url 가져오기, get url - javascript, jQuery

 

javascript

window.location;

window.location.replace('/','');

jQuery

$(location).attr('pathname');

$(location).attr('pathname').replace('/','');

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

jquery mega cheat sheet

Posted by 홍반장水 홍반장水
TAG jQuery

댓글을 달아 주세요

[javascript] 요즘 웹페이지에서 영상 플레이시 스크롤이 플레이어를 지나가면 레이어팝업으로 따라가는 스크립트. 


페이스북에서도 영상 플레이하면 스크롤 되었을때 좌측 상단에 레이어로 따라오더라. 

JTBC 뉴스 페이지에서 그렇게 나오길래 보니 jwPlayer를 사용하고 있다. 




jQuery로 적용되어있다. document.ready 에서 window.on('scroll',fun~~~  로 스크롤시 고정 플레이어의 위치를 확인해서 플레이어의 top을 벗어나면 플레이어 사이즈를 변경하고 우측 하단에 bottom 100px, right 50px 주고 fixed 하는 것으로 되어있네. 멋짐. ㅎㅎ 


영상을 보면서 들으면 지문을 읽을 수 있어서 좋다. 








...

Posted by 홍반장水 홍반장水

댓글을 달아 주세요