jQuery 1.4.2 Visual Cheat Sheet woorkup.com
Blog » WordPress » How and where to learn WordPress plugin development (FYI, we build plugins) How and where to learn WordPress plugin development (FYI, we build plugins) It can be overwhelming when you first try to get into WordPress plugin development. Honestly, one of the best ways to learn is just to dive right in and start coding. However, this is something that doesn’t just happen overnight.
JavaScriptでびゅんびゅんスライド！ページ切換法 (1/5)
HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptとHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。 今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。 今回のお手本サイト： 『Baltijos prodiuserių grupė』 リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器
あのFlashサイトのUIをjQueryで作る (1/5)
「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手
jQueryとprototype.jsp を共存させる方法 | AMsoft space
忘れないうちにメモ。 prototype.js の次に jQuery をロードする。 そして jQuery.noConflict() を呼び出す。 jQuery.noConflict() の戻り値を利用しないのであれば、」$() を jQuery() に置換してもよいが、コーディングが面倒なので、 var $j = jQuery.noConflict(); として戻り値を受け取り、jQueryとして動作させたい箇所 $() を $j() に置換する。 <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="../js/prototype.js" type="text/javascript"></script> <script src="../js/aculous
MovableType屋が次に備えて勉強しておくべきこと
MovableType屋が次に備えて勉強しておくべきこと Permalink URL http://www.magicvox.net/archive/2009/04232129/ Posted by ぴろり Posted at 2009/04/23 21:29 Trackbacks 関連記事 (0) Post Comment コメントできます Category MovableType 4.25 が公開されて、ひと段落した感じの MovableType 界隈です。MT4.25 から受ける印象としては、安定度も相当高くなっていますし、リリースされるセキュリティパッチの内容を見ていても、かなり細部にまで洗練されてきた感じがします。個人的な感想では、MT4 シリーズの落としどころとしてはキリの良い所ではないでしょうか。 そうなると次は自然と次期バージョンに期待が集まってくるわけですが… さてさて、
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider
Coda-Sliderは、jQueryのプラグインで、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Introducing Coda-Slider Coda-Sliderは、slideViewer(スムーズに移動させて画像を切り替えるスクリプト)を元に作成したもの(上記ブログより)で、動き方はほとんど同じで、快適に動作します。 Coda-Slider Demo
jQueryでiCalライクなカレンダーを作るチュートリアル – creamu
jQueryでクールなカレンダーを作りたい。 そんなときにおすすめなのが、『Create astonishing iCal-like calendars with jQuery』。jQueryでiCalライクなカレンダーを作るチュートリアルだ。 このエントリーでは、↑のようなカレンダーの作り方が紹介されている。マウスオーバーするとふわっとポップアップするツールチップテキストつきだ。 ソースファイルもダウンロードできるので見てみてほしい。 デモは以下から。 View the online Demo! jQueryでiCalライクなカレンダーを作るチュートリアル、チェックして参考にしてみてはいかがだろうか。 Create astonishing iCal-like calendars with jQuery 天気がよくて気持ちいいですねー。 先日買った雑誌を読んでいます。「Casa」はまた紙面
pngfix & rollover library sisso.jsを作成しました。 : tech.kayac.com - KAYAC engineers' blog
通販で自転車のスポーク買いました。agoです。 社内から「yuga.jsみたいに呼べば使えて、環境に依存しないpngfixとrolloverライブラリがほしい」とリクエストを受けたので作成してみました。 使い方はファイルをダウンロードし、以下のようにマークアップすれば完了です。 <img src="opacity.png" class="btn" /> <!-- mouseover時にopacity_o.pngを表示 --> <div class="bgpng" style="background-image:url(opacity.png); width:200px; height:200px"></div> <!-- 背景のpngfix（img,input[type="button"]は自動的にpngfixする） --> <div class="bgpng btn" style="ba
Bridge Word
This shop will be powered by Are you the store owner? Log in here
jQuery.opensocial_simple Pluginを作成しました。 - KAYAC Engineers' Blog
昨日OpenSocial Hackathonに参加させていただきました。agoです。 Hackathonは終わってしまいましたが、jQueryからOpenSocialを簡単に扱うためのPluginを作成したので、jQuery.opensocial_simpleとして公開したいと思います。 opensocial、gadgetsのすべての機能を実装したわけではないですが、owner、viewerの情報取得、外部サイトへの接続はかなり簡単に実装できるようになったと思います。 使い方はjQuery読み込み後、jquery.opensocial_simple.jsを読み込み、$.opensocial_simpleからmethodを呼び出すだけ。 MySpaceアプリの場合以下の形で使用できます。 <script type=" text/javascript"http://api.msappspace
jquery.jsとprototype.jsの念願の共存 | チバのブログ
Copyright © chibatch.jp All Rights Reserved. | お問い合わせ先
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
RedLine Magazine : スペースは嫌、class付けるのも嫌な時用(追記有)
スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記 コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分
jQuery.autouploader Pluginを作成しました。 : tech.kayac.com - KAYAC engineers' blog
AutoHotKeyの設定ファイルが意味不明で困ってます。agoです。 このたび弊社ではにおい部 - においフェチに捧げるコミュニティとして、におい部をOPENしました。 今回はこのサイトで使用している、ファイル選択時の自動プレビューjavascriptをjQuery.autouploaderとしてjQuery Plugin化したので公開したいと思います。 使い方はjQueryと一緒にpluginを読み込むだけ。 <script type="text/javascript"jquery.autouploader.js"></script> これで<form enctype="multipart/form-data">の中にある、<input type="file">に対して自動的にプレビュー機能が追加されます。 サーバサイドはアップロードされたファイルを保存し、そのURIを返すAPIを作成
jQuery.brbr Pluginを作成しました。 - KAYAC Engineers' Blog
高知から帰ったら席がのっとられていたagoです。 このたび弊社ではYUREX™ - ビンボーゆすりを科学したコラボ・プロダクトを開発として、YUREX製品サイトをOPENしました。 今回はこのサイトで使用している、文字や画像のリンク部分を揺らすjavascriptをjQuery.brbrとして（無駄に）jQuery Plugin化したので公開したいと思います。 使い方はjQueryと一緒に読み込み、揺らしたいelementsに対して.brbr()を指定するだけ。 $(function () { $(/* or selector */).brbr(); }); これで該当要素以下のリンクをカーソルで指定した場合にゆれるようになります。 指定できるパラメータと初期値は以下の通りです。 $(/* or selector */).brbr({ /* ゆれる方向を指定。 top,left,''を指定
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
jQueryのみでLightboxっぽいものを実現する方法 - F.Ko-Jiの「一秒後は未来」
梅酒.inのトップページにある「梅酒がウリな飲食店」というコーナーにある画像をクリックすると、Lightboxっぽく情報を表示するようにしています。 ↑ こんな感じ。 Lightbox効果を実現するライブラリは検索すれば色々と見つかると思いますが、ここではライブラリはjQueryのみとして、どのようにLightboxを実現したかを説明します。 処理のおおまかな流れは以下の通りです。 select要素を隠す (IE対策) ページ全体に半透明の黒いレイヤーを表示する 表示領域の中央に目的のコンテンツを表示する 1. select要素を隠す IE6ではselect要素にz-indexが定義されていないため、レイヤーのz-indexをどれだけ大きくしても、IE6ではselect要素がレイヤーの下に隠れることはありません。そのため、ページ上にあるselect要素を隠す必要があります。 jQueryで
jQueryとphpでAjaxな郵便番号入力補助を作ろうと思う - blog::konk303
リクエストがあったので。ちょっとどうするか整理してみる。 http://zip.ricollab.jp/を使おうと思う。 httpsでは投げさせてくれないみたいなので、proxyする踏み台も必要。複数サービスで必要なので、共有で使える場所に置かないと。 一応「こんなのやります」はシステム側（インフラ側）に伝えてあるけど、もう一回確認取ってからスタートする。 要件は 郵便番号を入力して「住所を入力」を押すと、住所が補完される 郵便番号入力時に、補完候補を自動表示 「一覧から探す」で、住所一覧から選択できる。絞り込み検索可能に。 ぐらいかな。まずは1をさくっとリリースして、後は追加機能で後追いにしちゃおっと。 システム側 jsライブラリはjQueryで（なぜなら好きだから）。 共有で使えそうなサーバで、https受け付けてるサーバはphpで動いてるので、踏み台はphpで。 指定サービス以外のド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集
IDEA * IDEA
