반응형

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.

반응형
저작자표시 비영리

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

SVG animation example  (0) 2019.06.03
유트브영상 DIV 밑에 위치하기, wmode=opaque  (0) 2019.06.03
jQuery - URL add Hash, get Hash  (0) 2019.05.13
Link rel="canonical" - 별도 url, 검색봇에 최적화하기위한.  (0) 2019.05.10
Fiddler - 웹 디버깅 프록시 web debugging proxy  (0) 2019.04.17
반응형

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

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

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

window.location="#222"
반응형
저작자표시 비영리

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

유트브영상 DIV 밑에 위치하기, wmode=opaque  (0) 2019.06.03
jQuery - Back button Detect, reload  (0) 2019.05.14
Link rel="canonical" - 별도 url, 검색봇에 최적화하기위한.  (0) 2019.05.10
Fiddler - 웹 디버깅 프록시 web debugging proxy  (0) 2019.04.17
[javascript] www.javascripting.com JavaScript 라이브러리, 프레임 워크 및 플러그인.  (0) 2019.04.16
반응형

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

 

javascript

window.location;

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

jQuery

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

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

반응형
저작자표시 비영리

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

Lightbox for Bootstrap http://ashleydw.github.io/lightbox/  (0) 2019.05.27
[javascript] Vue.js 프로그레시브JavaScript 프레임워크  (0) 2019.05.08
Your first Node.js app with Kotlin  (0) 2019.03.09
[React] 리액트를 공부하기 전에 미리 알아두면 좋은 자바스크립트 기초 지식을 정리  (0) 2019.02.27
A utility-first CSS framework for rapid UI development. -https://tailwindcss.com/  (0) 2019.01.07
반응형
jquery mega cheat sheet

반응형
저작자표시

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

보안 테스트용 목록 - SecLists  (0) 2017.12.28
[React.js] React와 Vue의 특징을 정리한 블로그 글입니다.  (0) 2017.12.11
[JS] 14일 만에 GitHub 스타 천 개 받은 차트 오픈소스 개발기  (0) 2017.10.20
[Node.js] chromium binding 기술을 node.js에 적용해보자  (0) 2017.10.20
RabbitMQ, PHP, Node.js를 활용해 GCM push 처리하기  (0) 2017.10.09
반응형

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


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

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




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


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








...

반응형
저작자표시 비영리

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

[Node.js] chromium binding 기술을 node.js에 적용해보자  (0) 2017.10.20
RabbitMQ, PHP, Node.js를 활용해 GCM push 처리하기  (0) 2017.10.09
[javascript] Nuxt.js란 무엇인가?  (0) 2017.08.30
[javascript] Vue.js - 트렌지션 상태  (0) 2017.08.30
[javascript] Vue.js - 전환효과  (0) 2017.08.29
반응형

10 Tips for Writing JavaScript without jQuery

http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/


jQuery없이 JavaScript 작성을위한 10 가지 팁


jQuery는 훌륭한 라이브러리입니다. IE6이 최고의 브라우저였던시기가 다가 왔습니다. 당시에는 해결해야 할 지루한 단점과 차이점이 있었으며 jQuery는 크로스 브라우저 코드를 작성하기위한 완벽한 도구였습니다.

그러나 오늘날 웹 브라우저는 그 당시부터 많은 발전을 이루었습니다. 우리는 ES5 에서 제공하는 모든 기능을 편안하게 사용할 수 있으며, DOM과 함께 작업하는 데 도움이되는 멋진 HTML5 API 를 처리 할 수 있습니다. 개발자는 이제 일부 프로젝트에서 jQuery를 생략하고 생산성을 유지할 수있는 위치에 있습니다.

나쁘게 생각하지 마라. jQuery는 여전히 훌륭한 라이브러리이며, 자주 사용하지 않는 것이 더 좋다. 그러나 제한된 JS 상호 작용, 브라우저 확장 및 모바일 사이트가있는 단순한 페이지와 같은 작은 항목의 경우 vanilla JS를 사용할 수 있습니다. 당신의 노력에 도움이 될 10 가지 요령이 있습니다.




반응형
저작자표시

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

NativeScript - https://www.nativescript.org/  (0) 2017.05.30
[javascript] 15 Interesting JavaScript and CSS Libraries for February 2017  (0) 2017.03.22
[NodeJS] Realtime Chat with Node.js  (0) 2017.03.22
if(window.console!=undefined) console.log.bind()  (0) 2017.03.14
[Node.js] Node.js, Express, MongoDB를 이용하여 REST API 만들기  (0) 2017.03.08
반응형

[jQuery] jQuery로 모바일에서 가로보기인지 세로보기인지 알아내기

jQuery orientationchange Event

 

 

 

 

 

$(window).on("orientationchange", function(event){
    if(window.matchMedia("(orientation: portrait)").matches){
        // 세로 모드 (평소 사용하는 각도)
    }else if(window.matchMedia("(orientation: landscape)").matches){
        // 가로 모드 (동영상 볼때 사용하는 각도)
    }
});

.

 

반응형
저작자표시

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

if(window.console!=undefined) console.log.bind()  (0) 2017.03.14
[Node.js] Node.js, Express, MongoDB를 이용하여 REST API 만들기  (0) 2017.03.08
[javascript] 현재 경로를 찾아서 어느 위치인지 인식한다.  (0) 2016.12.13
[javascript] URL get path info , Query String  (0) 2016.12.07
[javascript] OFFLINE & STORAGE  (0) 2016.09.23
반응형

Turntable.js: Responsive jQuery slider

 

 

Turntable.js is a responsive jQuery slider. It lets you flip through a series of images as your mouse/finger moves across a container.

turntable.js

Homepage: http://polarnotion.github.io/turntable/
GitHub: https://www.producthunt.com/tech/turntable-js

 

 

 

 

 

반응형
저작자표시

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

[javascript] Glio.js: Easily trigger callbacks  (0) 2016.05.09
[javascript] SamsaraJS: Layout animation library  (0) 2016.05.09
[javascript] Rebound: Spring animations for Android  (0) 2016.04.18
[javascript] Origami.js: Create things with HTML5 canvas  (0) 2016.04.18
[JAVASCRIPT] Popper.js: Create poppers in web applications  (0) 2016.04.15

+ Recent posts

티스토리툴바