« Previous : 1 : 2 : 3 : 4 : 5 : 6 : ... 33 : Next »

[javascript] Ctrl key

Definition and Usage

The ctrlKey event attribute returns a Boolean value that indicates whether or not the "CTRL" key was pressed when an event was triggered.

Syntax

event.ctrlKey=true|false|1|0


<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.ctrlKey==1)
  {
  alert("The CTRL key was pressed!");
  }
else
  {
  alert("The CTRL key was NOT pressed!");
  }
}

</script>
</head>
<body onmousedown="isKeyPressed(event)">

<p>Click somewhere in the document. An alert box will tell you if you pressed the CTRL key or not.</p>

</body>
</html>

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/06/27 12:53 2011/06/27 12:53
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6258

[javascript] loopedSlider

loopedSlider


https://github.com/nathansearles/loopedSlider
http://slidesjs.com/

loopedSlider 0.5.7 – No longer in development

Check out the next version of loopedSlider, now called Slides https://github.com/nathansearles/Slides

loopedSlider is a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.


Info

Check out the next version of loopedSlider, now called Slides http://slidesjs.com

Developed by Nathan Searles, http://nathansearles.com

Complete instructions can be found at http://nathansearles.com/plugin/loopedslider/

For updates, follow Nathan Searles on Twitter

Examples

Markup

<div id="loopedSlider">
	<div class="container">
	        <div class="slides">
	                <div><img src="01.jpg" alt="" /></div>
	                <div><img src="02.jpg" alt="" /></div>
	                <div><img src="03.jpg" alt="" /></div>
	                <div><img src="04.jpg" alt="" /></div>
	        </div>
	</div>
	<a href="#" class="previous">previous</a>
	<a href="#" class="next">next</a>
</div>

CSS

.container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:500px; display:none; }

Initialize

<script type="text/javascript" charset="utf-8">
        $(function(){
                $('#loopedSlider').loopedSlider();
        });
</script>

Defaults

container: ".container", //Class/id of main container. You can use "#container" for an id.
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
containerClick: true, //Click slider to goto next slide? true/false
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
hoverPause: false, //Set to true to pause on hover, if autoStart is also true
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
addPagination: false //Add pagination links based on content? true/false

Defining Local Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$('#loopedSlider').loopedSlider({
				addPagination: true,
				slidespeed: 500
			});
        });
</script>

Defining Global Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$.fn.loopedSlider.defaults.addPagination = true;
			$.fn.loopedSlider.defaults.slidespeed = 500;
        });
</script>
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/06/24 09:44 2011/06/24 09:44
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6254

Ascii Flow Diagram - 아스키 코드로 다이어그램 그리는 사이트
http://www.asciiflow.com/

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/06/21 10:29 2011/06/21 10:29
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6244

JSONLint

The JSON Validator

http://jsonlint.com/ - JSON 데이터 인증하기.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/06/20 11:39 2011/06/20 11:39
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6240

External URL 의 내용 불러오기 - Ajax

<html>
<body>

<script type="text/javascript">
function Ajax(){
var xmlHttp;
	try{	
		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}

xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4){
		document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
		setTimeout('Ajax()',10000);
	}
}
xmlHttp.open("GET","http://www.example.com/the_page_that_contains_the_div_content",true);
xmlHttp.send(null);
}

window.onload=function(){
	setTimeout('Ajax()',10000);
}
</script>

<div id="ReloadThis">Default text</div>

</body>
</html>

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/26 20:06 2011/05/26 20:06
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6189

Creating a Mobile Touch Slide Panel with JQuery

http://www.zackgrossbart.com/hackito/touchslider/

DOWNLOAD : https://github.com/zgrossbart/jstouchslide

This bar is boring on a computer, but it comes alive on a mobile device. Grab your iPad or Android device and take a look.

Drag your finger and the items move with you. They follow your speed and keep your momentum. Play with it a little. I’ll wait.

Get the
source code

The sliding touch panel only shows up on mobile platforms. With a mouse it feels clunky, but sliding with your finger just feels right.

This article shows you how to implement a sliding touch panel in JavaScript. jQuery is the only dependency of the touch slider. The rest is pure JavaScript and HTML. It runs fast, feels natural, and works on every mobile device with touch support.


Horizontal Slide View

This is a JavaScript implementation of a mobile style Horizontal Slide View.

Use your finger to drag it left and right to all of the items in the view.

Since this is JavaScript it works on every mobile device with touch support

and

it does a good job with pictures

Each cell of the slider is HTML so you can put anything you want in it

The slider works just like the native application sliders

It snaps each cell into place and supports momentum

Try dragging fast and watch the items fly by

Want to know how it works?

keep reading


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/19 19:46 2011/05/19 19:46
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6173

A highly adaptable jQuery plugin for creating carousels and slideshows

download : http://code.google.com/p/carouslide/downloads/list

CarouSlide is an easy-to-implement, flexible yet powerful jQuery plugin that allows you to create a wide range of different carousel and slideshow implentations, from a small and semantic list of HTML content.

Some of its optional features include:

Three types of animation: fade, slide vertically and slide horizontally

  • Back/Next controls
  • Infinite horizontal scrolling
  • Timed/Automatic animations (including play/pause button)
  • Hover activation on navigation
  • Optional use of Easing plugin for animations
  • Adjustable animation timings
  • 9Kb (minified) file size

All you need to get going is:

$(".CarouSlide").CarouSlide();




크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/10 13:32 2011/05/10 13:32
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6151

[jQuery] jquery - carousel

http://code.google.com/p/jquery-infinite-carousel/

download : http://code.google.com/p/jquery-infini ··· s%2Flist

Add an infinite carousel on your site, the easy way. See a Demo here

Features

  • Really easy way to insert a quality HTML carousel on your site
  • Loop infinitely over items when clicking next or previous button
  • Avoid animation flickering due to multi-clicks on next and previous buttons

Some HTML

<div id="viewport"> 
<ul> 
       
<li>1</li> 
       
<li>2</li> 
       
<li>3</li> 
       
<li>4</li> 
       
<li>5</li> 
</ul> 
</div> 
<a id="previous">Previous</a> 
<a id="next">Next</a> 
 
<!--  
ul/li structure can be replaced by any other html structure as div/div, div/span...  
-->

Some CSS

/* Comments on styles purpose in the source code */ 
#viewport{ 
        width
: 240px; 
        overflow
:hidden; 
} 
#viewport ul{ 
        position
: relative; 
        padding
: 0; 
} 
#viewport li{ 
        width
: 100px; 
        height
: 50px; 
       
float: left; 
        list
-style: none; 
}

Some JavaScript : the magic

$('#viewport').carousel('#previous', '#next');

Tips

If you need to activate auto-scrolling on your carousel, simply simulate a click :

//The auto-scrolling function 
function slide(){ 
  $
('#simpleNext').click(); 
} 
//Launch the scroll every 2 seconds 
var intervalId = window.setInterval(slide, 2000); 
 
//On user click deactivate auto-scrolling 
$
('#previous, #simpleNext').click( 
 
function(event){ 
 
if(event.originalEvent){ 
   window
.clearInterval(intervalId); 
 
} 
 
} 
);





크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/10 13:11 2011/05/10 13:11
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6150

[javascript] iScroll-js

http://code.google.com/p/iscroll-js/
http://cubiq.org/iscroll
The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now.

How to use

First of all we need to prevent the default behavior of standard touch events. This is easily done adding preventDefault() to the touchmove event. Then initialize the iScroll object on DOMContentLoaded or on window load. Here an example:

function loaded() {
	document.addEventListener('touchmove', function(e){ e.preventDefault(); });
	myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);

iScroll takes two parameters. The first is mandatory and is the ID of the element you want to scroll. The second is optional and can be used to pass additional parameters (see below).

On the HTML/CSS side the scrolling area needs to be wrapped by an element which determines the scroller actual size. The following is a common tags configuration for an iScroll.

<div id="wrapper">
    <div id="scroller">
        <ul>
            <li>...</li>
        </ul>
    </div>
</div>

The #wrapper also needs some classes:

#wrapper {
    position:relative;
    z-index:1;
    width:/* your desired width, auto and 100% are fine */;
    height:/* element height */;
    overflow:/* hidden|auto|scroll */;
}

That’s it. Enjoy your scrolling. Have a look at the source code of the online example to get a better idea of how the iScroll works.

Syntax

The iScroll syntax is: iScroll(mixed element_id, object options).

element_id, can be both an object pointing to or a string with the ID name of the element to be scrolled. Example: iScroll(document.getElementsByTagName('div')[1]) or iScroll('scroller')

Accepted options are:

  • hScrollbar: set to false to never show the horizontal scrollbar. The default value true makes the iScroll smartly decide when the scrollbar is needed. Note that if device does not support translate3d hScrollbar is set to false by default.
  • vScrollbar: set to false to never show the vertical bar. The default value true makes the iScroll smartly decide when the scrollbar is needed. Note that if device does not support translate3d vScrollbar is set to false by default.
  • bounce: set to false to prevent the scroller to bounce outside of boundaries (Android behavior). Default true (iPhone behavior).
  • bounceLock:, if set to true the scroller stops bouncing if the content is smaller than the visible area. Default: false (as per native iphone scroll).
  • checkDOMChanges: set to false to prevent auto refresh on DOM changes. If you switch off this feature you have to call iScroll.refresh() function programmatically every time the DOM gets modified. If your code makes many subsequent DOM modifications it is suggested to set checkDOMChanges to false and to refresh the iScroll only once (ie: when all changes have been done). Default true.
  • fadeScrollbar: define wether the scrollbars should fade in/out. Default true on iPhone, false on Android. Set to false for better performance.
  • momentum: set to false to remove the deceleration effect on swipe. Default true on devices that support translate3d.
  • shrinkScrollbar: set to false to remove the shrinking scrollbars when content is dragged over the boundaries. Default true on iPhone, false on Android. It has no impact on performances.
  • desktopCompatibility: for debug purpose you can set this to true to have the script behave on desktop webkit (Safari and Chrome) as it were a touch enabled device.
  • snap: set to true to activate snap scroll.
  • scrollbarColor: changes the color of the scrollbar. It accepts any valid CSS color (default: 'rgba(0,0,0,0.5)'

Note: options must be sent as object not string. Eg:

myScroll = new iScroll(’scroller’, { checkDOMChanges: false, bounce: false, momentum: false });

Snap scroll

When calling iScroll with “snap” option the scrolling area is subdivided into pages and whenever you swipe the scroll position will always snap to the page. Have a look at the screencast to get an idea.

Probably the best way to use “snap” is by calling it without momentum and scrollbars:

new iScroll('scroller', { snap:true, momentum:false, hScrollbar:false, vScrollbar:false });

If you keep momentum, you get a free-scrolling that will always stop to prefixed positions.

To have a perfect snapping experience the scrolling area should be perfectly divisible by the container size. Eg: If the container width is 200px and you have 10 elements, the whole scroller should be 2000px wide. This is not mandatory as iScroll doesn’t break if the last page is smaller than the container.

Methods

  • refresh(): updates all iScroll variables. Useful when the content of the page doesn’t scroll and just “jumps back”. Call refresh() inside a zero setTimeout. Eg: setTimeout(function () { myScroll.refresh() }, 0).
  • scrollTo(x, y, timeout): scrolls to any x,y location inside the scrolling area.
  • scrollToElement(el, runtime): scrolls to any element inside the scrolling area. el must be a CSS3 selector. Eg: scrollToElement("#elementID", '400ms').
  • scrollToPage(pageX, pageY, runtime): if snap option is active, scrolls to any page. pageX and pageY can be an integer or prev/next. Two keywords that snap to previous or next page in the raw. The “carousel” example in the zip file is a good starting point on using the snap feature.
  • destroy(full): completely unloads the iScroll. If called with full set to true, the scroller is also removed from the DOM.

Best practices

DOM Changes – If scrolling doesn’t work after an ajax call and DOM change, try to initialize iScroll with checkDOMChanges: false and call refresh() function once the DOM modifications have been done. If this still doesn’t work try to put refresh() inside a 0ms setTimeout. Eg:

setTimeout(function () { myScroll.refresh(); }, 0);

Performance – CSS animations are heavy on the small device CPU. When too many elements are loaded into the scrolling area expect choppy animation. Try to reduce the number of tags inside the scrolling area to the minimum. Try to use just ULs for lists and Ps for paragraphs. Remember that you don’t actually need an anchor to create a button or send an action, so <li><a href="#" onclick="..." />text</a></li> is a waste of tags. You could remove the anchor and place the click event directly on the LI tag.

Try to avoid box-shadow and CSS gradients (especially on Android). I know they are cool and classy, but they don’t play well with CSS animations. Webkit on iPhone seems to handle shadows and gradients a bit better than its counterpart on Android, so you may selectively add/remove features based on the device.

Use a flat color for the #wrapper background, images in the scroller wrapper once again reduce performance.

Important: to preserve resources on devices that don’t support translate3d (namely: Android<2.0) iScroll disables momentum, scrollbars and bounce. You can however reactivate them using the respective options.

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/10 13:06 2011/05/10 13:06
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6149

[html] html5 storage - Local, Session

Having fun with HTML5 — Local Storage and Session Storage


API

The full API spec­i­fi­ca­tion for the local­Stor­age and ses­sion­Stor­age objects can be found here. At the time of writ­ing, this is how the com­mon Stor­age inter­face look:

image

Demo

I’ve put together a quick demo here to illus­trate how to detect and use the local and ses­sion stor­age to get, set, remove and clear stored items (well, basi­cally, cov­ers each of the avail­able meth­ods on the Stor­age inter­face above).

The page itself is sim­ple and crude, just a cou­ple of <div> and most impor­tantly two tables which I use to show all the key value pairs stored in the local and ses­sion storage:

image

Intro­duc­ing the new place­holder attribute

You might have noticed that the two text boxes had place­holder text sim­i­lar to that famil­iar search box in Firefox:

text boxes with place holder text Firefox search box

This is done using HTML5’s place­holder attribute for the <input> tag:

1
2
<input id="keyText" placeholder="Enter key"/>
<input id="valueText" placeholder="Enter value"/>

Nice and easy, eh? ;-)

Set­ting an item

To add a new key value pair or update the value asso­ci­ated with an exist­ing key, you just have to call the setItem method on the intended stor­age object:

1
2
3
4
5
6
7
8
9
10
11
12
13
// adds a new key to both local and session storage
function setKey() {
    var key = $("#keyText").val();
    var value = $("#valueText").val();
 
    if (Modernizr.localstorage) {
        localStorage.setItem(key, value);
    }
    if (Modernizr.sessionstorage) {
        sessionStorage.setItem(key, value);
    }
    showKeys();
}
Remov­ing an item

Ear­lier in the showStorageKeys(type, table) func­tion, I added a row to the rel­e­vant table for each key value pair in the stor­age includ­ing a but­ton with a han­dler for the onclick event. The han­dlers are cre­ated with the cor­rect stor­age type (“local” or “ses­sion”) and key for the cur­rent row baked in already so that they will call the removeItem(type, key) func­tion with the cor­rect parameters:

1
2
3
4
5
6
7
// removes an item with the specified key from the specified type of storage
function removeItem(type, key) {
    // get the specified type of storage, i.e. local or session
    var storage = window[type + 'Storage'];
    storage.removeItem(key);
    showKeys();
}
Clear­ing all items

Finally, the ’”Clear” but­tons under­neath the tables call the clear­LocalKeys() and clearS­es­sion­Keys() func­tion to remove all the key value pairs in the cor­re­spond­ing storage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function clearLocalKeys() {
    clearKeys("local");
}
 
function clearSessionKeys() {
    clearKeys("session");
}
 
// clear all the held keys in the specified type of storage
function clearKeys(type) {
    // get the specified type of storage, i.e. local or session
    var storage = window[type + 'Storage'];
 
    // clear the keys
    storage.clear();
 
    showKeys();
}

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/05/03 22:13 2011/05/03 22:13
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6139

« Previous : 1 : 2 : 3 : 4 : 5 : 6 : ... 33 : Next »

블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/03   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
Statistics Graph

Site Stats

Total hits:
175842
Today:
8
Yesterday:
264