最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生! 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
ぷるるん新感覚!スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
jQuery Mobileに待ちに待ったベータ版が登場しました。ここでは自分でも後から使えるjQuery Mobileの設定・構築メモをエントリしていこうと思っています。 最初はAJAXの無効化について。あちこちのサイトでjQeury MobileではじめにやることにAJAXの無効化が挙げられています。デフォルトで有効になっているjQuery MobileのAJAX機能は、リンクやフォームサブミットのアクションで対象のページを現在のページ内に読み込みます。一見便利そうでスマートフォンらしく見えますが、読み込んだページのURLは#で繋がれ実際にはページ遷移しないため、画像パスの設計やPHPなどの動的サイト作成時は煩雑になりがちです。 <script language="JavaScript"> // ajax の無効化 $.mobile.ajaxEnabled = false; </scri
どもー全国数十万のCoda.appユーザーの皆さん、t32kでございます。 MacBook AirにCSをインスコするのはちょっと気が引けたので円高もあってCoda.appを最近買いました。なんかいろいろ綺麗でたちまち好きになりました。どうせならこれでjQuery Mobileゴリゴリ書きたいなと思うようになりやんした。 jQuery Mobileと言いますと、最近ではアルファ版(2011/6/1現在)でもあるにも関わらずDw CS 5.5で標準装備されるなど飛ぶ鳥落とす勢いでやんす。だからってCS5.5買いたくナイヨ! ってことで、Coda.appでコード補完色々いじくってみましたってのが今回のエントリの主旨。 Coda.appでコード補完を司っているのが、CodaCompletion.plistです。これをいじって作成しました。ファイルの在り処は以下です。Coda.appを右クリックし
JavaScriptを使ってスマートフォン向けのサイトを作ることができる言語です。jQueryと組み合わせて使います。スマートフォンサイトでよく見るインターフェースを簡単に実装することができます。
複数枚の画像をフェードイン、フェードアウトしながら繰り返し再生するjQueryプラグイン「jquery.SimpleSlideShow.js」をバージョンアップしました(Ver0.3 => Ver0.4)。 前バージョンからの変更点 (Ver0.5)キャプション表示が可能。 (Ver0.5)ナビゲーションの種類に画像を追加。 (Ver0.5)intervalが0のときはナビゲーションクリックでのみ切り替え可能に変更。 (Ver0.5)クリック時の切り替えをフェード表示に変更。 (Ver0.4)SimpleSlideShow関数の引数 width、height を廃止。 (Ver0.4)ナビゲーションを表示する引数 showNav を追加。 ダウンロード 使い方 下記のような感じでjQueryとjquery.SimpleSlideShow.jsとCSSを読み込みます。 <script typ
javascriptを複数設定すると、干渉しあってうまく作動しないことがある、と聞いてはいたのですが、実際ロールオーバーとライトボックスを設定した際、競合が起きてしまいました。 これは初心者的な言い方で言うと、jQueryのjsファイルとライトボックスのprototype.jsファイルの両方に「$」の指示があるので、うまく読み込めなくなってしまう・・・というようなことみたいですね。 なので、jQueryの方のjsファイル(ここではrollover.js)の指示出しの「$」を置き換えればOKらしいっす。 手順は 1.HTMLファイルでjQueryのjsファイルの「$」を別のもの(「jQuery」)にするという指示を書く 2.jQueryのjsファイルの「$」を「jQuery」に置換する ・・・と意外に簡単! で、具体的な書き方はこんな感じ。 【HTML】・・・赤字の部分を追加 <!-- jQ
How does it work? Like this: <script src="jquery.js"></script> <script src="lake.js"></script> <script> $(function() { $('#lake-img').lake({ 'speed': 1, 'scale': 0.5, 'waves': 10 }); }); </script> ... <img id="lake-img" src="lake.png" style="display: none;"/> Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element. Th
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ&ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 1.サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 2.プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 3.プラグインのダウンロード githubのjQue
jQuery ContentHover Pluginは、画像hover時にテキスト等を表示するjQueryプラグインです。 補足情報をシンプルに見せる形として、省スペースで効果的ではないでしょうか。 アニメーションも気が利いていて、透過度などを変更することができます。 jQuery ContentHover Plugin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く