[JS]スマフォで各セクションのヘッダをそれぞれスクロールに追従させるスクリプト
iPhone, iPad, ガラケーなどのスマフォで、各セクションのヘッダをそれぞれ半透明の状態でスクロールに追従させるスクリプトを紹介します。 A, B, C と追従中 対応ブラウザ iPhone 4GS (iOS5) iPhone 4G (iOS5) iPhone 3GS (iOS5) iPad 3 (iOS5) iPad 2 (iOS5) Galaxy S3 (Ice Cream Sandwich) Galaxy S2 (Gingerbread) NEXUS S (Jelly Bean) 実装 Step 1: 外部ファイル 外部ファイルは下記の2つのスクリプトと当スクリプト・スタイルシートをhead内に記述します。 zepto.js jQueryと互換性のあるモバイル用軽量ライブラリ iscroll.js モバイルでposition:fixedを実現するスクリプト <script s
十四章第一回 Storage — JavaScript初級者から中級者になろう — uhyohyo.net
十四章第一回 Storageこのページの最終更新日：2017年10月2日 今回紹介するStorageはとても便利なものです。Storageとは何かというと、簡単にいうとブラウザにデータを保存しておけるものです。そういうと昔からあるCookieを思い出す人も多いと思います。Cookieとの違いは、「データがサーバーへ送られるか送られないか」です。Cookieはブラウザに保存されており、サーバーへのリクエストの際はCookieが送られます。サーバー側はそれを参照して動作を変えることができます。 一方、Storageはサーバー側からは参照できません。Storageを見ることができるのはJavaScriptからのみです。つまり、Cookieとは異なり完全にクライアント側で動作するJavaScriptプログラム向けに記憶機能が提供されているということです。基本的にはこちらのほうが便利なので、サーバー
HTML5関連のデータベースAPIとWeb Storageの基本
Web Storageの各種操作 Web Storageでは、値の書き込み／読み出し以外に、1つの要素の削除／全ての要素の削除／キーの列挙を行うことができます。 localStorageから要素を削除するには、以下のいずれかの書き方をします（sessionStorageの場合は、下記の「localStorage」を「sessionStorage」に置き換えます）。 例えば、キーが「foo」の要素を削除するには、「delete localStorage.foo」等の書き方をします。 要素を全て削除するには、localStorage（sessionStorage）の「clear」というメソッドを実行します。例えば、「localStorage.clear();」とすると、Local Storageをクリアすることができます。 また、キーを列挙するには、lengthプロパティでWeb Storag
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
Twitterがページ表示時間を5分の1に高速化。どのようなテクニックを使ったのか？
Twitterがフロントエンドのアーキテクチャを見直し、Webページの読み込み速度を改善したことをブログで明らかにしています。 新しいアーキテクチャでは、これまでWebブラウザ上でJavaScriptの処理によって行ってきたWebページのレンダリングを見直し、サーバ側でレンダリング済みのHTMLページを送信し表示することにしています。これによってWebページの読み込みから最初のツイートの表示までの時間が大幅に短縮されることになりました。 When we shipped #NewTwitter in September 2010, we built it around a web application architecture that pushed all of the UI rendering and logic to JavaScript running on our users’
iPhone、iPadに position：fixed を対応させるJS「iScroll」｜BLACKFLAG
iPhoneやiPadでは、残念な事にCSSの「position:fixed」はサポートされていません。 最近良くPCサイトで見かけるヘッダーやフッターを固定しているページを iPhone & iPadで見ると残念な感じになっていたり。。。（このブログもその中の一つ…） そんなiPhone & iPadに「position:fixed」を対応させることが出来るJS（not jQuery） 「iScroll」が今後役立ちそうなのでご紹介。 ≫iScroll | Matteo Spinelli's Cubiq.org デモページはPCで見ると正常に動作しないことがあるようですが iPhoneやiPadで見るとヘッダーとフッターが固定されて真ん中のエリアがスクロール可能となっています。 ≫デモページはこちら あくまでiPhone & iPad用に組まれたSCRIPTなので 通常のPCサイトでは使
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
Web Storageによるテキストデータの保存(2/6):JavaScriptによるHTML5プログラミング入門 - libro
では、script.jsにスクリプトを作成しましょう。以下に、セッションストレージを使った場合と、ローカルストレージを使った場合の２通りのリストを掲載しておきます。いずれも、テキストを書いて「保存」ボタンを押すとストレージに値が保管され、「読み込み」ボタンを押すと保存した値をロードして表示します。 実際に両者を使って、動作の違いを確かめてみましょう。セッションストレージを使った場合、ブラウザを閉じると、もう値は消えてしまいます。次にブラウザを起動し、「読み込み」ボタンを押しても値は表示されません。 ローカルストレージを使った場合、ブラウザを終了してからまた起動してもちゃんと値がロードされます。ただし、値はブラウザごとに保管されますから、ローカルボリュームに保管したといっても、別のブラウザから読み込むことはできません。使えるのは、あくまで保存したブラウザだけです。 では、データの読み書きをし
SVGは普及する。WebデザイナーはCSSとともにSVGが必須科目に
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
第1回 SVGの基礎知識 | gihyo.jp
SVGは比較的古くからある仕様の1つですが、2010年3月にマイクロソフトがInternet Explorer 9でのサポートを表明してから一気に注目が高まりました。そんな古くて新しいSVGを今から使える情報と、将来の展望を全4回の集中連載で解説します。 SVGとは SVG（Scalable Vector Graphics）は、XMLベースのベクターグラフィック言語もしくは画像フォーマットです。W3Cによってその仕様が定義されており、画像フォーマットとして用いる場合は拡張子.svgが使用され、MIME形式はimage/svg+xmlが用いられます。 SVGの現状 Firefox、Safari、Google Chrome、Operaなどのブラウザが既にサポートしており、Internet Explorerもそのバージョン9、具体的にはInternet Explorer 9: Platform
【第22回 HTML5とか勉強会レポート】 Processing.js、SVG、WebGL。HTML5周辺のグラフィック関連技術
HTML5による最新Webアプリ 2011年10月26日、品川グランドセントラルタワーのマイクロソフト品川本社にて、「第22回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「グラフィック関連API」。当日の様子をお伝えしよう。 Processing.jsってなんだ？ まず、ゼロベースの田中氏（@dotimpact）からプレゼンがスタートした。田中氏は美術大学で非常勤講師をしたり、Processingの入門書執筆なども手掛けている。 Processingとは 田中氏のプレゼンは、Processingの紹介から始まった。 田中氏の＠ITでのProcessingの記事「Processingの対話式スケッチプログラミングで遊ぼう」も参照いただきたい。 Processingは2001年、MITメディア
Convivial-Web – WEBを共に愉しむ。
iPhoneアプリ「My Maps Pocket」を昨年の8月にひっそりとリリースしていました。 リリースしてから特に告知もしていなく、いまさらではありますがコチラで紹介させていただきます。 機能はシンプルで、Google MapsのマイマップをiPhoneで見ることができるというものです。 地図表示、リスト表示、詳細情報の表示、標準地図へのリンクなどの機能があります。 現在は、ポイント（アイコン）にのみ対応していますが、ライン、ポリゴンの表示にもいつか対応したいと思います。 他にも、ポイントの追加・編集、自分以外が作成したマイマップの表示、Google以外のMyMap系サービスにも対応したいです。いつになるかはわかりませんが、、、 書籍でも紹介して頂いたようです。 iPhoneでGoogle活用第一弾 – Reader’s Forumより引用: 写真部つながり、新刊つながりというわけでは
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
ke-tai.org > Blog Archive > iPhoneやAndroid用のネイティブアプリがJavaScriptで作れる「Titanium Mobile」がすごいらしいです
iPhoneやAndroid用のネイティブアプリがJavaScriptで作れる「Titanium Mobile」がすごいらしいです Tweet 2010/10/29 金曜日 matsui Posted in 記事紹介・リンク | 3 Comments » iPhoneやAndroid用のネイティブアプリがJavaScriptで作れる「Titanium Mobile」がすごいらしいです。 私が知ったのはこのエントリーがきっかけです。 → kurainの壺 Titaniumが楽しすぎてやばい [d.hatena.ne.jp] さらに元ネタをたどるとnaoyaさんのブログでした。 → naoyaのはてなダイアリー Titanium – JavaScript で iPhone/Android アプリを作る [d.hatena.ne.jp] → naoyaのはてなダイアリー Titanium Mob
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法（1） 基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック ＜ リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは？ 今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ＆ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど） 今回は、jQuery UIのドラッグ＆ドロップ機能
node.jsとは何か(3) - I am bad at math
今日はnode.jsで採用しているCommonJSの話である。 CommonJSの説明だけだとあっという間に終わってしまうのでJavaScriptの歴史を混ぜ込んだら期せずして長くなってしまった。 さて、1995年に発表されたJavaScriptは開発当初「Mocha」と呼ばれ、次に「LiveScript」となり（実際Netscape Navigatorの2.0のアルファ版ではではこの名前だった）、最後にようやくJavaScriptになる(Navigatorの2.0B3から)という変遷をたどった。このJavaScriptという名前っていうのはJavaというコンパイル言語を補完するスクリプト言語にしたいという考えがあったからという話もあるんだけど、そのころ開発元のNetscapeはSunとの業務提携を発表しており、ちょうどそのころJavaが世に出てNetscapeブラウザ上でクールなJava
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.instapaper.com/m?u=http://feedproxy.google.com/~r/jp/coliss/~3/B8Pkgd0mqbQ/easing-functions-cheat-sheet.html
Yahoo! UI 折れ線グラフを表示する | Ajaxの覚え書き＠じゅえ
Loading...
IDEA * IDEA
