'프로그래밍 > Web' 카테고리의 다른 글
[Mobile Web] 텍스트 입력창에서 자동고침/자동완성/자동대문자 기능 OFF (0) | 2012.04.16 |
---|---|
브라우저의 User-Agent를 바로 확인하고 싶다면~ (0) | 2012.03.26 |
Comet 이란 (0) | 2012.03.02 |
Manifest File 생성하기 (0) | 2012.03.02 |
REST , RESTful (0) | 2011.12.09 |
[Mobile Web] 텍스트 입력창에서 자동고침/자동완성/자동대문자 기능 OFF (0) | 2012.04.16 |
---|---|
브라우저의 User-Agent를 바로 확인하고 싶다면~ (0) | 2012.03.26 |
Comet 이란 (0) | 2012.03.02 |
Manifest File 생성하기 (0) | 2012.03.02 |
REST , RESTful (0) | 2011.12.09 |
자바스크립트에서 페이지 이동 시킬때 location.href를 많이 사용하지만 location.replace 메세드도 종종 이용된다.
두가지 모두 같은 동작을 하는거 같지만 실제로는 아래와 같은 차이점이 있다.
Including the following script will immediately redirect visitors to the URL entered.
<script type="text/javascript">
location.href='http://www.bloggingdeveloper.com';
</script>
Including the following script will immediately redirect visitors to the URL entered.
<script type="text/javascript">
location.replace('http://www.bloggingdeveloper.com/');
</script>
The difference between location.href and location.replace is that the former creates a new history entry on the visitor's browser meaning that if they hit the back button, they can get in a 'redirection loop' which is usually undesirable and may have unwanted side effects.
5 Awesome Responsive jQuery Sliders and Image Galleries (0) | 2011.12.09 |
---|---|
[jQuery] http://visualjquery.com/ - 기본적인 jQuery 내용 (0) | 2011.11.25 |
[jQuery] jQuery - 사용자 정의 PlugIn 만들기 (0) | 2011.07.04 |
[jQuery] jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) (0) | 2011.07.01 |
[javascript] 왜 jQuery 인가? (0) | 2011.06.30 |
json text를 json object로 바꿀때.
Json.parse() 를 사용한다. 단, json2.js 가 필요하다.
json.stirngify()는 오브젝트를 텍스트로 변환한다.
[HTML5] Web Worker - HTML5 Rocks (0) | 2011.08.21 |
---|---|
SSO (Single Sign-On) - 인증방식 (0) | 2011.07.15 |
[WEB] http://www.asciiflow.com/ - Ascii Flow Diagram (0) | 2011.06.21 |
[Web] http://jsonlint.com/ - JSON 데이터 인증하기. (0) | 2011.06.20 |
[AJAX] External URL 의 내용 불러오기- 외부URL (0) | 2011.05.26 |
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.
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
<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>
.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; }
<script type="text/javascript" charset="utf-8"> $(function(){ $('#loopedSlider').loopedSlider(); }); </script>
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
<script type="text/javascript" charset="utf-8"> $(function(){ $('#loopedSlider').loopedSlider({ addPagination: true, slidespeed: 500 }); }); </script>
<script type="text/javascript" charset="utf-8"> $(function(){ $.fn.loopedSlider.defaults.addPagination = true; $.fn.loopedSlider.defaults.slidespeed = 500; }); </script>
[javascript] 왜 jQuery 인가? (0) | 2011.06.30 |
---|---|
[javascript] Ctrl key (0) | 2011.06.27 |
[App] Episode - 아이패드용 매거진 Pleiades Corp. (0) | 2011.05.19 |
[javascript] Creating a Mobile Touch Slide Panel with JQuery (0) | 2011.05.19 |
[javascript] iScroll-js (0) | 2011.05.10 |
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.
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.
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:
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.
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.
false
to prevent the scroller
to bounce outside of boundaries (Android behavior). Default true
(iPhone behavior).
true
the scroller stops
bouncing if the content is smaller than the visible area. Default:
false
(as per native iphone scroll).
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
.
true
on iPhone, false
on Android. Set
to false
for better performance.
false
to remove the
deceleration effect on swipe. Default true
on devices that support
translate3d.
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.
true
to have the script behave on desktop webkit (Safari and
Chrome) as it were a touch enabled device.
true
to activate snap scroll.
'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 });
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.
setTimeout
. Eg: setTimeout(function () {
myScroll.refresh() }, 0)
.
el
must be a CSS3 selector. Eg:
scrollToElement("#elementID", '400ms')
.
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.
full
set to true
, the scroller is also removed
from the DOM. 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.
[App] Episode - 아이패드용 매거진 Pleiades Corp. (0) | 2011.05.19 |
---|---|
[javascript] Creating a Mobile Touch Slide Panel with JQuery (0) | 2011.05.19 |
[jQuery] jquery - carousel (0) | 2011.05.10 |
[javascript] carouslide - A highly adaptable jQuery plugin for creating carousels and slideshows (0) | 2011.05.10 |
[javascript] jQuery 를 이용한 Carousel & Slide (0) | 2011.05.03 |
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
All you need to get going is:
$(".CarouSlide").CarouSlide();
[javascript] iScroll-js (0) | 2011.05.10 |
---|---|
[jQuery] jquery - carousel (0) | 2011.05.10 |
[javascript] jQuery 를 이용한 Carousel & Slide (0) | 2011.05.03 |
[javascript] Carousel - Step carousel (0) | 2011.05.03 |
[javascript] JSONP를 사용한 도메인 간 통신, Part 1: JSONP와 jQuery의 결합으로 강력한 매시업 빠르게 만들기 (0) | 2011.04.28 |
Description: Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three "status" variables are here for that purpose. Some highlights of this script:
Contents for the Step Carousel Viewer can be defined either directly inline on the page or via Ajax and extracted from an external file instead.
Ability to specify whether panels should wrap after reaching the two ends, or stop at the first/last panel.
Panel persistence supported, so the last viewed panel can be remembered and recalled within the same browser session.
Ability for Carousel to auto rotate as dictated by the new
parameter: autostep: {enable:true, moveby:1, pause:3000}
During
this mode, Carousel pauses onMouseover, resumes onMouseout, and clicking
Carousel halts auto rotation altogether.
Option to specify two navigational images that's automatically positioned to the left and right of the Carousel Viewer to move the panels back and forth.
Ability to auto generate pagination images based on the total number of panels within a Carousel and positioned anywhere on the page. v1.8 feature
The contents of a Carousel can be updated on demand after the page has loaded with new contents from an external file. v1.8 feature
Demo #1: Auto rotation enabled (every 3 seconds, 1 panel each time), left/right nav buttons enabled, pagination buttons enabled.
Demo #2: Wrap around enabled ("slide"), left/right nav buttons enabled, pagination buttons enabled, status variables enabled.
|
Demo #3: Wrap around enabled ("pushpull"), variable content widths, moves 2 panels at a time, illustration of new content loaded on demand.
1
2
3
4
5
|
|
About
AmCharts is a set of flash and JavaScript (HTML5) charts for your websites
and Web-based products. AmCharts can extract data from simple CSV or XML files, or they can read dynamic data
generated with PHP, .NET, Java,
Ruby on Rails, Perl, ColdFusion, and many other programming
languages.
Blog About JavaScript amCharts – Win an
iPad
Stock
Data at irregular
intervals
OHLC chart
Multiple data sets
Events
Smoothed line chart
Structured products
Vertical legend
Intraday data
Stacked
Drawing trend
lines
Line & Area
Chart with scroller
Chart with data gaps
Two Y-axes chart
Logarithmic scale
chart
Auto-reloading chart
Chart with reversed Y
axis
Pie & Donut
2D pie chart
3D donut chart
Saving chart as image
Advanced navigation
menus
Scatter & Bubble
Time plot
Chart with value
indicator
Bulls eye chart
Error bars
Timeline
Radar & Polar
Stacked radar chart
100% stacked spider
chart
Polar
chart
[javascript] JSONP를 사용한 도메인 간 통신, Part 1: JSONP와 jQuery의 결합으로 강력한 매시업 빠르게 만들기 (0) | 2011.04.28 |
---|---|
[jquery] jQuery로 작업하기, Part 2: 매개체로서의 JQuery: UI 프로젝트 (0) | 2011.04.28 |
[javascript] HTML5 Sencha App vs. native iPhone App side by side (HD) (0) | 2011.04.21 |
[javascript] Sencha Touch 에서 이미지 버튼 구현하기. (0) | 2011.04.21 |
[javascript] Build mobile web applications with Sencha Touch (0) | 2011.04.18 |