[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
[JS]IEでフォームのselect要素の中身が省略されてしまうのを解消するスクリプト -ieSelectWidth
IEでフォームのselect要素にwidthを指定した際、はみ出した箇所が省略されてしまうのを解消するスクリプトを紹介します。 Internet Explorer Select Width Bug Workaround デモページ 対応ブラウザは2010年6月17日の時点でIE6, 7, 8で、スクリプトを使用すると他のブラウザ（Firefox, Chrome, Safari, Opera）と同様に省略されずに表示されるようになります。 ※IE6には別途bgiframe Pluginが必要です。 スクリプトでは他の機能として、スクリプト側でのwidth指定、margin/padding/borderの設定も可能です。 設置は簡単で、既存のフォームにも簡単に適用できます。 jquery.jsとjq.ie-select-width.jsを外部ファイルで記述し、下記のスクリプトを記述します。 J
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
jQueryで作るGoogleカレンダークローン·wdCalendar MOONGIFT
wdCalendarはWebベース/jQuery製のオープンソース・ソフトウェア。Googleの中でも人気の高いプロダクトの一つがGoogleカレンダーだ。Ajaxを駆使し、まるでデスクトップアプリのような操作が可能だ。スケジュールはビジネス/プライベートを問わず利用できる。 スケジュール登録画面 そんな便利なツールだけに、自前のスケジュールアプリにもあのような機能を持たせたいというニーズは強くある。逆に言えばスケジュールアプリを作る上であのインタフェースと操作性は欠かせない存在になっている。それを実現するのがwdCalendarだ。 wdCalendarはjQuery製のオープンソース・ソフトウェアで、そのインタフェースはまさにGoogleカレンダーだ。マウスでドラッグして予定を作成したり、その詳細を記述（編集する際には自分でwdCalendarを立てる必要がある）することができる。 月
ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと.net
IE6でも7でも動いてくれるのと なかなか使い勝手も良さそう なのでメモ。jQueryを使った コンテンツボックス内の自動 読み込みを実装します。 去年くらいの記事ですけど見逃してたのでメモ。 Facebookをやられてる方はピンと来るかも。下までスクロールすると自動で次のコンテンツが読み込まれますが、それをボックス内で実装したものです。基本的にどのブラウザでも動くみたいです。 Scrolling Dynamic Content box このボックス内でスクロールすると自動で次のコンテンツが読み込まれ、アイテムの数も表示されます。というか、見たほうが早いですね。 デモ コード コードです。 $('document').ready(function(){ updatestatus(); scrollalert(); }); function updatestatus(){ //ロードしたアイ
ストリートファイター系ゲームまで！ゲーム用jQueryプラグイン·gameQuery MOONGIFT
gameQueryはJavaScript製/jQueryプラグインのオープンソース・ソフトウェア。iPhoneでストリートファイター4が発売になったと話題になっている。最適化処理が行われているのだろうが、意外とiPhoneでも遊べるレベルで動作する。アクションゲームまでこなせるようになるとiPhoneの可能性は飛躍的にあがりそうだ。 なんとストリートファイター系！ しかしもっと手軽に遊びたいならばWebブラウザベースで動作する方が良さそうだ。Webブラウザで動くゲームと言えば、これまではFlash製のものが多かった。だがこれからは違う、JavaScriptでゲームが作れるようになる。それを実現するのがgameQueryだ。 gameQueryでまず目を引かれるのがストリートファイター風ゲーム「JavaScript Fighter」だろう。デモなので自分で動かすことはできないが、二人のキャラ
Run This!
Run This: seeing is believing! Add a button to let your readers run snippets of code directly from your blog and see the results interactively. Run This is built upon Ideone web services. Right now, supported languages are: Ada, Assembler, AWK, Bash, bc, Brainf**k, C, C#, C++, CLIPS, Clojure, COBOL, Common Lisp, D, Erlang, Forth, Fortran, Go, Haskell, Icon, Intercal, Java, JavaScript, Lua, Nemerl
サーバーサイド jQuery をやってみる！ - IT戦記
最近、社内で PHP Spidermonkey が流行って（？）いるようです＞＜！ Cybozu Inside Out: SpiderMonkeyを使ってPHPでサーバーサイドJavaScript id:ama-ch さすがです＞＜ というわけで 僕も、 PHP の Spidermonkey でどのくらいのことが出来るのか試してみました＞＜ まず、 Hello, world! <?php // new して $js = new JSContext(); // print 関数作って $js->registerFunction(function($v) { print $v; }, 'print'); // こんにちはこんにちは！ $js->evaluateScript('print("Hello, world!!")'); Hello, world!おおお、簡単！ 次は、 id:m-hiy
jQuery MultiSelect Plugin/Widget with ThemeRoller Support | Eric Hynds - Website Developer
I’ve been working on a multiple select plugin on and off for the past couple months and finally have it stable enough for a first release. When I started this project my intentions were only to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an
jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields | Css Globe
Every hour that you put into enhancing user experience while developing a site is a hour well spent. There are numerous small improvements that you can perform to make things easier and obvious for the end user. In this article I will present a jQuery plugin built for that purpose. The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. Wh
Manuel Boy - Director of Engineering - Phrase GmbH
Internet, Medienproduktion, Programmierung, E-Learning
Paito Warna HK : Prediksi Lengkap untuk menang angka togel hongkong
Mengapa Warna Penting dalam Paito HK? Penggunaan warna dalam paito HK memudahkan pemain untuk mengidentifikasi pola dengan cepat. Warna-warna yang berbeda digunakan untuk menandai angka-angka tertentu, membuatnya lebih mudah untuk melihat tren yang muncul. Menyederhanakan Analisis Warna membantu menyederhanakan analisis data. Alih-alih harus membaca angka satu per satu, pemain dapat melihat pola w
各種Webサービスに対応した埋め込みを行う·jQuery Oembed MOONGIFT
jQuery OembedはJavaScript製のオープンソース・ソフトウェア。おそらくYoutubeからはじまったであろう、自分のサイトへのコンテンツ埋め込みの機能。今や写真やプレゼンテーション、動画など様々な外部コンテンツがサイトに埋め込めるようになった。しかしここで問題なのが埋め込むコンテンツの内容が分かりづらいことだ。 各種サービスの埋め込みHTMLを生成する 大抵Flashのタグで囲まれており一般的には難解だ。Embedなどと書かれているがよく分かりづらい。そこで使ってみたいのがjQuery Oembedだ。jQuery Oembedはリンクタグにclass="oembed"を指定すると実行されるjQueryプラグインだ。 例えばFlickrの写真のリンクをURLにしてoembedの指定をすると、写真がサイト内に表示されるようになる。イメージタグを書く必要はない。同様にvime
jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
今すぐに使えるリアルタイム入力チェックライブラリ·Vanadium MOONGIFT
Webフォームから飛んできた値について、入力チェックを行わないということはまずないだろう。数字のところに文字列が入ったり、必須のものが入っていなかったりすることはよくある。だからこそサーバサイドのプログラムでチェックはするのだが、ユーザビリティを考えるとクライアントサイドでも入力チェックを行いたい。 リアルタイムで行われる入力チェック 入力チェックのJavaScriptを作る、なんていうと面倒な感じがするがVanadiumを使えば開発者の方でなくともチェック機能が実装できてしまう。 今回紹介するオープンソース・ソフトウェアはVanadium、jQueryを使ったクライアントサイド入力チェックライブラリだ。 Vanadiumは入力項目のクラスでチェック内容を指定するようになっている。そのためVanadiumさえ読み込めば、HTMLを変更するだけで入力チェックが実装できるようになる。入力必須や
JavaScriptコーディングに関するテクニックやパフォーマンス等のリファレンス集:phpspot開発日誌
最近発見した、JavaScriptコーディングに関するテクニックやパフォーマンス等の参考になりそうなエントリをリファレンスをまとめてみました。 Avoiding Problems With JavaScript’s getElementById Method in Internet Explorer 7 | Impressive Webs IE7のgetElementByIdで起こる問題を避けるためのTIPS集。 How to add a CSS Link programmatically using JavaScript <link>タグをJavaScriptによって動的に作成してCSSを動的に設定するコード例 JavaScript CSS Selector Benchmarks CSSセレクタでDOMにアクセスする際の各フレームワークでの速度ベンチマーク比較 6 Ways To Wor
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
jQuery.sheet - Visual Interop Development
IDEA * IDEA
