글

라벨이 제이쿼리인 게시물 표시

Trigger a button click when Enter key is pressed in a text box in javascript / 자바스크립트 input 박스에서 enter 키를 치면 click 효과 나게 하기

$("#id_of_textbox").keyup(function(event){     if(event.keyCode == 13){         $("#id_of_button").click();     } }); ------------------------------------------------ document.getElementById("id_of_textbox")     .addEventListener("keyup", function(event) {     event.preventDefault();     if (event.keyCode == 13) {         document.getElementById("id_of_button").click();     } });

Calendar in jQuery(Datepicker) 2 / 제이쿼리로 달력 만들기 2

<html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script>  $(function() {   $('#datepicker').datepicker({ changeYear: true,//Year 선택 가능 changeMonth: true,//Month 선택 가능 dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], dayNamesMin: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'], monthNamesShort: ['1','...

Calendar in jQuery(Datepicker) / 제이쿼리로 달력 만들기

<html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $("#datepicker").datepicker(); }); </script> </head> <body> <p> Date: <input type="text" id="datepicker" /> </p> </body> </html> -------------------------------------------------------------------- <!--소스코드 수정하기--> <script type="text/javascript"> $(function() { $(".datepicker").datepicker({ dateForm...

Hover Effect: slide right effect in jQuery or in pure CSS3 / 제이쿼리 또는 CSS3를 이용하여 마우스오버했을때 오른쪽방향으로 배경색 채우기

<ul class="lnb"> <li class="on active"><a href="#">mouseover to slide right 01</a></li> <li><a href="#">mouseover to slide right 02</a></li> <li><a href="#">mouseover to slide right 03</a></li> <li><a href="#">mouseover to slide right 04</a></li> </ul> <style> a{color:inherit; width:100%;} ul.lnb {display:block; position:relative; border:1px solid #e6e6e6; margin:0; padding:0; width:300px; overflow:hidden;} ul.lnb > li {display:block; position:relative; color:#4d4d4d; text-indent:10px; font-size:13px; line-height:36px; border:1px solid #e6e6e6;} ul.lnb > li > a {display:block; position:relative; height:36px;} ul.lnb > li.on > a {background-color:#4d4d4d; color:#fff;} </style> <script> $( document ).ready(function() {     var lnb=$('.lnb > li...

Tab & Image Slider in jQuery / 제이쿼리로 탭메뉴 및 이미지 슬라이더 만들기

<ul class="tab">    <li class="on">tab01</li>    <li>tab02</li>    <li>tab03</li> </ul> <div class="slider_wrap">    <div class="slider">       <ul class="inner_slider">            <li class="slide"></li>            <li class="slide"></li>            <li class="slide"></li>       </ul>    </div> </div> <style> .tab li {color:#ddd;} .tab li.on {color:red;} .slider_wrap {position:relative; width:960px; height:620px;} .slider {position: relative; overflow:hidden; width:960px; height:620px;} ul.inner_slider {position:absolute; top:0; left:0; width:2880px; height:620px; } li.slide{position:relative; overflow:hidden; float:left; width:960px; height:620px;} </style> ...

Making Function with Conditional State in jQuery / 제이쿼리 조건문 만들기

//제이쿼리 조건문 만들기 var width = parseInt($(window).width());//윈도우의 현재 width값을 구하여 정수로 바꾸기 if (width<570 || width>1360 ){      $(".선택요소1").hide();      $(".선택요소2").show(); }else{      $(window).scroll(function(){                        if($(window).scrollTop() >= 100){                 $(".선택요소1").show();                 $(".선택요소2").hide();           }      }); }

Typing Effect in jQuery / 제이쿼리로 타이핑 효과 주기

//한글자 한글자 타이핑 효과 주기 (function () { var app; $(document).ready(function () { return app.init(); }); app = { text: 'If you can imagine it, you can create it. If you can dream it, you can become it.', index: 0, chars: 0, speed: 100, container: '.selector', init: function () { this.chars = this.text.length; return this.write(); }, write: function () { $(this.container).append(this.text[this.index]); if (this.index

Scroll function in jQuery (Parallax Scrolling) / 패럴렉스 스크롤(Parallax Scrolling)을 위한 제이쿼리 소스

//스크롤 550일때 양옆에서 나타나기 $(window).scroll(function(){      if($(window).scrollTop() >= 550){        $(".선택요소").animate({left:"0px",opacity:1 },1200);       $(".선택요소").animate({left:"0px",opacity:1},1200);       } }); //스크롤 960일때 양옆에서 나타나기 $(window).scroll(function(){      if($(window).scrollTop() >= 960){        $(".선택요소").animate({left:"0px",opacity:1},1200);       $(".선택요소").animate({left:"600px",opacity:1},1200);       } }); //스크롤 1000일때 서서히 나타나기 $(window).scroll(function(){      if($(window).scrollTop() >= 1000){        $(".선택요소").animate({opacity:1},5000);       } });      

Search bar appears when scope icon or button is clicked in jQuery / 제이쿼리로 검색아이콘 눌렀을 때 검색바 나타나게 하기

<div class="searchingbox">         <input type="text">         <a class="closebtn">X</a> </div> <button>search</button> <style> .searchingbox{width: 0px; position: relative; float: left; display: none;} .closebtn {position:absolute; top:0; right:10px;} button {float:left;} </style> <script> $(document).ready(function(){      $("button").click(function(){          $(".searchingbox").css({display:"block"});         $(".searchingbox").animate({width: "180px"},500);           });     $(".closebtn").click(function(){         if($(".searchingbox").css('width')=="180px")         $(".searchingbox").animate({width: "0px"},500,function(){             $(".searchingbox").css({display:"none"});       ...

Change Src in jQuery / src 경로를 변경해주는 제이쿼리 함수

<body> <!--이미지를 저장할때 On, Off를 파일명에 포함하여 저장한다.--> <img src="./img/typeA/arrowOff.jpg" class="arrowOff"> <img src="./img/typeA/arrowOn.jpg" class="arrowOn"> </body> <script> $(document).ready(function(){ /*미리 함수 만들어 놓기*/ function onSrc(a){ a.attr('src').replace('Off','On'); } function offSrc(b){ var srcOff = b.attr('src').replace('On','Off'); b.attr('src', srcOff); } /*클릭시 이미지 경로가 변경됨*/ $('.arrowOff').click(function(){         onSrc($(this)); //함수호출 }); $('.arrowOn').click(function(){         offSrc($(this)); //함수호출 }); }); </script> ------------------------------------------------------------------------------------------ Toggle Src  <body> <!--이미지를 저장할때 On, Off를 파일명에 포함하여 저장한다.--> <img src="./img/typeA/arrowOff.jpg" class="toggleImg"> <img src="./img/ty...

jQuery Responsive Web: Making Width same as Height / 반응형웹 가로 세로 높이 같게 만드는 제이쿼리

jQuery Responsive Web: Making Width same as Height <script> /*반응형 가로 세로 높이 같게 만들기*/ $(window).resize(function(){ var divWidth = $('ul li').width(); $('ul li').height(divWidth); }); </script>