글

라벨이 jQuery인 게시물 표시

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();     } });

Quick Menu(flying menu) in jQuery / 제이쿼리로 퀵메뉴 바 만들기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .wrap {width:1000px; height:3000px; background-color:#cdcdcd; margin:0 auto;} #q_menu {width:80px; height:300px; border: 1px solid #000; position: absolute; margin-left: 1000px; margin-top: 150px;} #textDiv {position: absolute;} </style> <script type="text/javascript"> $(document).ready( function(){ $('#q_menu').animate({'top':$(document).scrollTop()+20+'px'},500);//처음시작하는위치 $(window).scroll(function(){ $('#q_menu').stop(); $('#q_menu...

Scroll Menu in jQuery / 제이쿼리로 스크롤 메뉴 만들기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>scroll_menu</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ var menu=$("#top_menu > ul > li"); var contents=$('#contents > div'); //메뉴 클릭시 해당 컨테이너로 이동 menu.click(function(event){ event.preventDefault(); var i=$(this).index(); var tt=contents.eq(i).offset().top; $("html, body").stop().animate({scrollTop:tt}); }); //스크롤시 해당메뉴가 선택됨 $(window).scroll(function(){ var sct=$(window).scrollTop(); console.log(sct); contents.each(function(){ var i=$(this).in...

Accordion Menu in jQuery(another way)/ 제이쿼리로 아코디언 메뉴 만들기2

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <title>JQuery accordion Menu</title> <style> body * {margin:0; padding:0; font-family:Malgun gothic; list-style:none;} .accordion {width:202px; overflow:hidden; border-bottom:1px solid #ccc; padding-left:5px; padding-top:5px } .accordion * {font-size:13px; text-decoration:none;} .accordion li {width:200px; vertical-align:top; border-left:1px solid #ccc; border-right:1px solid #ccc;} .accordion li a {padding:10px; border-top:1px solid #ccc; display:block; background:#fafafa; color:#555;} .accordion li a.more {background:#fafafa url(../images/icon_down.gif) no-repeat 180px center;} .accordion li a.less {background:#fafafa url(../images/icon_u...

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"});       ...

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>

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>