반응형

jQuery.vibrate.js: Trigger mobile device vibrations

jQuery.vibrate.js lets you trigger vibrations on mobile devices in the pattern and duration you choose. It’s very simple to use, with a number of options for when to trigger vibrations and how long those vibrations should last (there’s even a handy chart so you can check out the durations for yourself).

jquery.vibrate.js

Homepage: http://illyism.github.io/jquery.vibrate.js/
GitHub: http://github.com/illyism/jquery.vibrate.js

Vibration API Wrappers 

http://illyism.github.io/jquery.vibrate.js/

However, this doesn't mean that your device can vibrate. Just that it's recent enough. There are a few requirements you need to meet.

  1. You need the hardware for it.
  2. The page needs to be visible.
  3. Browser-specific implementation prevents the vibration.

 

반응형
저작자표시

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

[jQuery] Circliful: Circular loaders with jQuery  (0) 2014.08.11
[jQuery] jQuery 에서 해당 요소(element)의 존재여부를 확인할 때  (0) 2014.08.01
[jQuery] Touche.js: Re-map click events to touch events  (0) 2014.07.16
[jQuery] jQuery Cheat Sheet: A quick API reference  (0) 2014.07.07
[javascript] Passwordless: Authentication middleware for Express & Node.js  (0) 2014.07.07
반응형

Touche.js: Re-map click events to touch events

Touche.js makes it simple to re-map click events to touch events for mobile UIs. It works with or without jQuery, and removes the 300ms delay applied by all touchscreen devices so they respond immediately.

touche.js

Homepage: http://benhowdle.im/touche/
GitHub: https://github.com/benhowdle89/touche

Effortlessly re-map click events to touch events on touchscreen UIs


반응형
저작자표시

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

[jQuery] jQuery 에서 해당 요소(element)의 존재여부를 확인할 때  (0) 2014.08.01
[jQuery] jQuery.vibrate.js: Trigger mobile device vibrations  (0) 2014.07.21
[jQuery] jQuery Cheat Sheet: A quick API reference  (0) 2014.07.07
[javascript] Passwordless: Authentication middleware for Express & Node.js  (0) 2014.07.07
Boba.js: JavaScript for Google Analytics  (0) 2014.07.07
반응형

jQuery Cheat Sheet: A quick API reference

http://oscarotero.com/jquery/

This colorful jQuery Cheat Sheet is your one-stop reference for the jQuery API. It covers selectors, attributes, CSS, events, effects, and much more.

jquery

 

Homepage: http://oscarotero.com/jquery/

 

 

 

 

 

반응형
저작자표시

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

[jQuery] jQuery.vibrate.js: Trigger mobile device vibrations  (0) 2014.07.21
[jQuery] Touche.js: Re-map click events to touch events  (0) 2014.07.16
[javascript] Passwordless: Authentication middleware for Express & Node.js  (0) 2014.07.07
Boba.js: JavaScript for Google Analytics  (0) 2014.07.07
Agile CSS3 Engine: Generate pure CSS3 with JavaScript  (0) 2014.07.07
반응형

Home » Tips » JavaScript » Simple floating div using jQuery




/Without any jQuery plugins you can float a  html element on your we page.

//Here we are taking example of a div element.

//You can place that div anywhere according to your requirements.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript">


            $(document).ready(function(){

 

         //on window scroll fire it will call a function.


                $(window).scroll(function () {

 

         //after window scroll fire it will add define pixel added to that element.


                    set = $(document).scrollTop()+"px";

 

        //this is the jQuery animate function to fixed the div position after scrolling.


                    $('#floatDiv').animate({top:set},{duration:1000,queue:false});


                });


            });


         </script>


    <style type="text/css">


    body .divMain{
        height:6000px !important;
        background-color:yellow;
        overflow:auto;
    }
   .divMain #floatDiv {
        position:absolute;
        left:50%;
        margin-top:200px;
        margin-left:-200px;
        width:200px;
        height:200px;
        background-color: red;
    }
           
    </style>
</head>
<body>
    <div class="divMain">
        <div id="floatDiv">
        </div>
    </div>
</body>
</html>

반응형
저작자표시

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

[javascript] Apy: A library for rest API ajax calls  (0) 2014.05.21
[javascript] 메세지 없이 브라우저를 닫고 싶을때. self.close() 외 2 방법  (0) 2014.05.19
최근 인기를 얻고 있는 JavaScript 라이브러리 정리  (0) 2014.05.08
[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
반응형

 

 

jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분

 


        jQuery("#sdt,#edt").datepicker({
            showMonthAfterYear:true,
            showOn:"button",
            buttonImage:"/common/tbl_st_ca.jpg",
            buttonImageOnly:true,
            dateFormat:'yy-mm-dd',
            nextText:'다음 달',
            prevText:'이전 달',
            dayNamesMin:['일','월','화','수','목','금','토'],
            monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        });

 

 

 

 

 

사용법 : 아래는 사용법의 일례입니다. 생각보다 많은 옵션을 제공 하고 있습니다. document site 에서 꼭 확인하세요.

<!-- jquery-ui resource embed start -->

<link  href="resources/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script src="resources/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>

<!-- jquery-ui resource embed end -->
 

$(function() {
        $("#startDate").datepicker(   // inputbox 의 id 가 startDate 이겠죠.
                {dateFormat:'yy/mm/dd' // 만약 2011년 4월 29일 선택하면  inputbox 에 '2011/04/29' 로표시
                 , showOn: 'button' // 우측에 달력 icon 을 보인다.
                 , buttonImage: '/images/Icon_calendar.gif'  // 우측 달력 icon 의 이미지 패스 
                 , buttonImageOnly: true //  inputbox 뒤에 달력icon만 표시한다. ('...' 표시생략)
                 , changeMonth: true // 월선택 select box 표시 (기본은 false)
                 ,changeYear: true  // 년선택 selectbox 표시 (기본은 false)
                 ,showButtonPanel: true // 하단 today, done  버튼기능 추가 표시 (기본은 false)
               });

        $("#endDate").datepicker({dateFormat:'yy/mm/dd',showOn: 'button'
                , buttonImage: '/images/Icon_calendar.gif', buttonImageOnly: true
                , changeMonth: true,changeYear: true,showButtonPanel: true});

    });
    
    $('img.ui-datepicker-trigger').attr('align', 'absmiddle'); // css 문제가 있는경우 일부 위치 조절 :)

 

 

 

 

 

반응형
저작자표시

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

최근 인기를 얻고 있는 JavaScript 라이브러리 정리  (0) 2014.05.08
[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
[jQuery] Twproject Gantt: JavaScript component for creating Gantts  (0) 2014.04.21
[jQuery] jQuery UI Touch Punch  (0) 2014.04.17
[javascript] Trianglify: Generate colorful triangle meshes  (0) 2014.04.17
반응형

Twproject Gantt: JavaScript component for creating Gantts

 

Twproject Gantt is a JavaScript component for Gantts and other charts, like task trees, built on jQuery. It offers in-place editing, zooming, data shortcuts, CSS skinning, and much more.

 

jQuery로 간트 차트 만들기

 

gantt

Homepage: http://gantt.twproject.com/
GitHub: https://github.com/robicch/jQueryGantt

jQueryGantt

jQuery Gantt editor has been written by Roberto Bicchierai and Silvia Chelazzi

Twproject jQuery Gantt

These are some key features:

  • jquery based
  • MIT licensed: you can reuse everywhere
  • json import-export
  • internationalizable
  • manage task status –> project workflow
  • manage dependecies
  • manage assignements (resources, roles efforts)
  • server synchronization ready
  • full undo-redo support
  • cross browser (at least for recent versions)
  • keyboard editing support
  • SVG visual editor
  • print friendly

Try the online working demo here: http://gantt.twproject.com

Read here about latest release: http://roberto.open-lab.com/2014/04/10/jquery-gantt-editor-svg-and-critical-path/

Read the genesis of this component here: http://roberto.open-lab.com/2012/06/14/the-javascript-gantt-odyssey/

Documentation is here: http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/

jQuery Gantt editor is part of Twproject 5 project

 

 

반응형
저작자표시

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

[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
[jQuery] jQuery UI Touch Punch  (0) 2014.04.17
[javascript] Trianglify: Generate colorful triangle meshes  (0) 2014.04.17
[jQuery] scrollToBySpeed: Scroll windows by speed instead of duration  (0) 2014.04.14
반응형

jQuery UI Touch Punch

Touch Event Support for jQuery UI

 

Tested on iPad, iPhone, Android and other touch-enabled mobile devices.

 

 

http://touchpunch.furf.com/

 

https://github.com/furf/jquery-ui-touch-punch

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.

Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.

That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

As I said, Touch Punch is a hack. It duck punches some of jQuery UI's core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI's interactions and widgets. However, you may find more complex cases where Touch Punch fails. If so, scroll down to learn how you can file and/or fix issues.

This code is dual licensed under the MIT or GPL Version 2 licenses and is therefore free to use, modify and/or distribute, but if you include Touch Punch in other software packages or plugins, please include an attribution to the original software and a link to this Touch Punch website.

Download the Code

The jQuery UI Touch Punch plugin is available in two versions:

* minified & gzip'd

 

 

Using Touch Punch is as easy as 1, 2…

Just follow these simple steps to enable touch events in your jQuery UI app:

  1. Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

  2. Include Touch Punch after jQuery UI and before its first use.

    Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

    <script src="jquery.ui.touch-punch.min.js"></script>

  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    <script>$('#widget').draggable();</script>

 

반응형
저작자표시

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

jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
[jQuery] Twproject Gantt: JavaScript component for creating Gantts  (0) 2014.04.21
[javascript] Trianglify: Generate colorful triangle meshes  (0) 2014.04.17
[jQuery] scrollToBySpeed: Scroll windows by speed instead of duration  (0) 2014.04.14
[jQuery] Sticky Alerts: A tiny sticky alert bar plugin  (0) 2014.04.10
반응형

 

scrollToBySpeed: Scroll windows by speed instead of duration

 

scrollToBySpeed is a jQuery plugin that lets your users scroll by speed rather than duration, giving a more consistent user experience. Regardless of how far down the page something is, when a user clicks a navigation button that triggers a scroll, the speed will be consistent.

scroll

Homepage: http://ryanburnette.github.io/scrollToBySpeed/
GitHub: https://github.com/ryanburnette/scrollToBySpeed
반응형
저작자표시

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

[jQuery] jQuery UI Touch Punch  (0) 2014.04.17
[javascript] Trianglify: Generate colorful triangle meshes  (0) 2014.04.17
[jQuery] Sticky Alerts: A tiny sticky alert bar plugin  (0) 2014.04.10
[javascript] FastClick: Eliminate lag in mobile browsers  (0) 2014.04.09
[jQuery] jQuery fontIconPicker: Add an icon picker to your admin forms  (0) 2014.04.01

+ Recent posts

티스토리툴바