こなだいスライドショーをjQueryを利用して作ったんですが、IEだと画像の読み込みがどうも遅い。たぶん事前にキャッシュさせなきゃいけないんだろうなぁと思いつつも方法がわからず、先に読み込んでCSSで消すって方法を採用しました。 でもこれだとどうもスマートじゃない。何か方法があるでしょ、と思っていたらやっぱりありました。 こういうコードをDOM readyイベントの外に書いておくといいみたいです。 var images = ["hoge1.jpg", "hoge2.jpg", "hoge3.jpg"]; $.each(images, function(){ $("<img>").attr("src", this); }); こんな簡単だなんて・・・。jQueryはやっぱり凄いです。
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 2011年05月19日- Documentation: Overlay - Vegas Background jQuery Plugin 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」。 背景画像を大きくサイトに使う場合に、単に写真を使ってもカッコイイのですが、ドットパターンを合成してよりカッコよくすることが出来ます。 その昔、Photoshopで画像にテレビに写ったような走査線を入れるようなプラグインが流行ったりしましたが、そういう処理は今やjQueryでやる時代のようです。 大きい写真を背景に使ったデザイン。 画像が小さくてもブラウザサイズに応じて引き伸ばしてくれる機能もついてます。 拡大してみると、まぁ
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。jQuery
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば! jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
@kbysbtmup jQueryにて:いくつかのHTML要素を1つの変数にまとめてappend()したら、IE6だけ何も表示されなかった。でも変数の値をalertで見たらちゃんと入ってた。で、変数にまとめずに直接append()の中でまとめるようにしたらちゃんと表示された。何なんだろう。 2011-04-15 17:31:17
うまく説明出来ないんですがページ内の 右端にパンくずっぽいページ内リンクを 作成するjQueryプラグイン・Sausage。 視覚的に分かりやすくなり、コンテンツ内に 目次のようなものを置く必要も無くなります。 縦に長いページにせざるを得ないコンテンツ に良さそうです。 パンくずっていうとちょっと語弊あるかもですが他にいい表現が思いつかないのでこいつ頭悪いなと思ったらデモ見てください。URLに#も付かないのでSEO的に妨げることも無いかと思います。また、ツールチップも出るので今どこにいるかを把握しやすくなりそうです。 たぶん、ソーセージのようにパンくずっぽいものが繋がってるからだと思います・・デモを見れば納得出来る(といいんですけどね) 右端にこのようなパンくずのようなものを設置するプラグインです。クリックでその段落の頭に飛ぶことができます。 使い方<script type="text/j
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
Step 1 - AJAX file uploadAJAX file upload tutorial First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which im
下記ページを参考にさせていただきました。 “jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan David Golding Design Blog - 上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。 jQuery 使用準備 jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。 アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。 <?php echo $javascript->link(array('jquery.js','jquery.f
JavaScriptjQuery の extend メソッドは便利なんだが複雑で忘れてしまいがちなのでメモしておく。jQuery.extend の呼び出しパターンは次の4通り。$.extend([deep,] target, obj1, [obj2, [obj3, ...)$.extend([deep,] obj)$.fn.extend([deep,] obj)$(...).extend([deep,] obj)全てのパターンで第一引数に [deep,] がある。これはオプションの引数で true を指定するとディープコピーしてくれる。以下では分かりやすくするために deep オプションは省略した一覧を掲載する。$.extend(target, obj1, [obj2, ...)$.extend(obj)$.fn.extend(obj)$(...).extend(obj)だいぶシンプルにな
CakePHPの1.3rc版がリリースされたので、ぼちぼち試しています。 1.2→1.3のマイグレーションガイドなどを見ながらやってみたら、いろいろと変更しなきゃならない点はありましたが、とりあえずエラーが出なくなるところまでは移行できてきました。 今回は、新しく追加になったJs Helperをちょっと使ってみました。 今までのCakePHPでは、AjaxヘルパーなどでPrototype.jsを使っていましたが、今回のアップデートで新しくなったJs Helperは、使うJavascriptライブラリを選ぶことができます。現時点で標準で対応しているのは jQuery、Prototype/Scriptaculous、Mootoolsで、コントローラからエンジンを選ぶことでどのライブラリを使うかを選択できます。 var $helpes = array('Js'=>array('Prototype
Cakephp+jquery - Presentation Transcript CakePHP jQuery • twitter @nano_eight • github nano-eight • AmazonEC2 • CakePHP • Twitter • Cake 100 LT CakePHP (; ∀ ) jQuery jQuery CakePHP • jQuery CakePHP • jQuery UI • jQuery plugin • jQuery CakePHP JsHelper • effect() ‣ ‣ slideIn fadeOut • submit() ‣ Ajax POST • echo $js->writeBuffer(); • options array('buffer' => false) writeBuffer() JsHelper jQuery UI
hogehoge.html#abc というURLが指定されたリンクをクリックすると、#abcに対応したタブが選択された状態でページを開きたい、ということですね。 こんな感じでどうでしょう。 [html部分] <body> <div id="main"> <ul> <li><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <div id="a">aa</div> <div id="b">bb</div> <div id="c">cc</div> </div> </body> [Javascript部分] $(function(){ // タブの要素 var container = $('#main'); // メニューからidのリストを取得する var list = []
週末にソーシャル・ネットワークを観てきました。全編にわたって早口で物語が展開し、前提知識なしで観たので、途中まで起きていることがつかめませんでした。あらすじは調べてから行かれることをオススメします。個人的にところどころに挟んでくる技術トーク(Emacs使いなところや、講義シーンで出るコンピュータの歴史など)が本筋とは関係ない見所です。 今日もjQuery内部の話をちょっとします。最近、jQuery1.2.xを使っているWebページでjQueryのバージョンを最新にしたら動かなくなることがありました。 調査してみたところ、セレクタの記述が間違っていたが、動作していたこと、(憶測になりますが)1.3でセレクタエンジンSizzleが導入され、挙動が変化したこと、jQueryのエラー処理に変更があったことで不具合が起きてしまったようです。 1.4.1からのエラー処理 jQuery1.4.1から j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く