「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデー
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
jQuery Mobile 1.1.0 日本語リファレンス
Bbfstoto adalah situs slot online peluang maxwin tertinggi yang bisa didapatkan dari slot gacor terbaru bergaransi. Kemenangan luar bisa dan mudah menjadi daya tarik bermain pada situs slot terbaru. Didukung dengan mekanisme peluang lebih besar hingga 70% berbanding 30% semua bisa merasakan withdraw besar. Awal mula munculnya judi slot hanya untuk kalangan menengah keatas, namun era sudah berubah
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
Safariのポップアップウインドウを開かない件です。 | yabuchany.com blog
以前、聞かれて「すいません。わかりません。」って言ってしまった事なんですが。 Safariのポップアップウインドウを開かないにチェックを入れていてもFlashからポップアップを開くようにする方法 がわかりましたので自分の為にメモします。 ＊「GRAM | グラム」さんの記事に「Opening External Links in new window from AS3」というのが紹介されていました。 それを参考にして、AS2で「Safari」とそれ以外のブラウザで分岐させ「Safari」の場合はgetURLを、それ以外のブラウザはExternalInterface.calを使うのを作ってみました。 ＊_rootにbtn_mcと言う名前のMovieClipを置きタイムラインの1フレーム目にScriptを書いてる場合の例。 import flash.external.ExternalInterf
jQueryでスクロールしても上に固定されるメニュー｜Webpark
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
JavaScriptでcookieを使う話
JavaScriptでcookieを使う話の改訂版である。 2年も昔に、JavaScriptのこともよくわからずに、様々な資料を引っ掻き回しながらプログラムを書いた。それはきちんと動作はしたし、そのときはそれで満足だった。 しかし、時間がたち、多少なりとも経験を積むと、昔書いたプログラムの変なところや無駄なところが目に付いてしょうがなくなってしまう。特に、このプログラムについては自分でもかなり納得のできないものになっているし、説明にも変なところがある。そこで、新たにコードと解説を書きなおしたというわけだ。 以前のものと比較していただけば、ずいぶんとすっきりしたプログラムになっていることがわかると思う。2年の間に、私がどう変わったか、なんてことを見てもつまらないかもしれないけれど。より新しくなったコードは有用ではないかと信じる次第である。 掲示板などのCGIでcookieを使う場合、たいてい
Xlune::Blog
テキストオートコンプリートjQueryプラグイン(jquery.gcomplete.js) by Google API いやー、Googleの検索って便利ですよね。特にローマ字で打ってんのに日本語候補出してくれるのがシビれます。 なので、あの恩恵を普通のテキストフィールドでも受けれるようにしたいなーって思って勢いで書きました。 もちろん、GoogleSuggest系のjQueryプラグインが山ほどあるのは知ってるんですが、山ほどありすぎて逆にわけわからんのでもっと混沌とさせようかと。。。 Demo Demo Page 利用方法はデモのソースを確認してください。 Download github zip file 利用には、jQuery本体(必須)とjquery.mousewheelプラグイン(オプション)が必要です。別途読み込んでください。 更新情報 v0.1.2 (20100223) バッ
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
PHP の similar_text を JavaScript に移植: Geez in the universe
PHPのソースコードを参照してそのまま移植したコード。 サーバサイドでやらなくてもいいようなケースに遭遇したら、 この負荷をクライアント側にやらせられるのはわりと意味があると思う。 function similar_text(text1, text2) { function similar_char(text1, len1, text2, len2) { function similar_str(text1, len1, text2, len2) { var pos1 = 0, pos2 = 0, max = 0, i, j, l; for (i = 0; i < len1; ++i) { for (j = 0; j < len2; ++j) { for (l = 0; (i + l < len1)&&(j + l < len2)&& (text1.charAt(i+l) == text2
IEでも使える画像の回転用jQueryプラグイン「jQueryRotate」:phpspot開発日誌
jQueryRotate - Rotate Image by angle in all Browsers (Wilq32) IEでも使える画像の回転用jQueryプラグイン「jQueryRotate」 $('#image').rotate(-25);のようにして簡単に画像を回転できるだけでなく、回転するアニメーション効果を持たせることも可能です。 タイトルロゴとかに回転効果をつけてみても面白いかもしれません。 使い方次第ではダイナミックなWEBデザインが作れそうですね。 関連エントリ 画像ギャラリーを作る際に便利に使えそうなjQueryの画像ギャラリー実装プラグイン37種 フルスクリーンでスッキリ綺麗な写真ギャラリーを作れるjQueryを使ったサンプルプログラム 高いカスタマイズ性を持つ画像ギャラリー実装用jQueryプラグイン「AD Gallery」 画像をスムーズに拡大できるjQuer
ページ内リンクをスマートにするsmoothScroll.js[to-R]
ページ内リンクをスマートにするsmoothScroll.js ページ内リンクをスムーズに行うjsライブラリ、smoothScroll.jsを作成したので公開します。 どういったものかはサンプルで確認してください。 <a href="#header">ページの先頭に戻る</a> などのページ内リンクをスムーズな移動に変更します。 これにより、エンドユーザーがページが遷移したという錯覚におちいることはありません。 設置方法は簡単です。 smoothScroll.jsをダウンロードして、設置したいページで取りこみます。 <script type="text/javascript" src="./smoothScroll.js"></script> 特定のリンクはスムーズさせない smoothScroll.jsは#（ハッシュ）付きのリンクを全てスムーズスクリプトに変換します。他のライブラリなどで#
![ページ内リンクをスマートにするsmoothScroll.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
AKIBE - 最近のクロスブラウザコーディング
Webページをコーディングする際に、昔から一番コストがかかる作業が各ブラウザへの対応です。 昔からWeb制作をしてきた人は、クロスブラウザ 、主にIEへの対応で苦労しないデザインとかタグの組み方のノウハウが蓄積していると思います。 IE6を基準に、無理なデザインはしない 透過PNGは使わない 各OS標準・共通の書体以外は全部画像にする ブラウザごとにCSSを細かく分ける 最新のCSSハックを研究・勉強する IEで使えないCSSセレクタは無いものとする つい最近まで、こんなセオリーがまかりとおっていました。 しかし今は、Javascriptのライブラリを使う方法が主流になりつつあります。シェア的にももう問題ないですし、何より簡単です。 IE9.js http://code.google.com/p/ie7-js/ IE5.x〜のIEをHTML5、CSS3に対応させ、さらにいくつかのバグも除
CSS3が非対応なブラウザでも利用できるようにするツールのまとめ
Modernizr [ad#ad-2] ツールの概要 JavaScript ドキュメント 利用できるプロパティ @font-face border-image border-radius box-shadow text-shadow opacity Multiple backgrounds CSS Animations CSS Gradients など CSS3 PIE ツールの概要 ビヘイビア スクリプト(htc) デモページ 利用できるプロパティ border-radius box-shadow border-image multiple background images linear-gradient as background image
IE6-8でもCSS3が使えるようになる「CSS3 PIE」:phpspot開発日誌
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな
jQueryでAjaxを利用する基本チュートリアル (1/4)
前回の「フォーム」に続き、jQueryの特別な機能を解説します。今回取り上げるのは、「Ajax」を利用するための機能です。 今さら聞けない「Ajax」とは？ 「Ajax」（エイジャックス）は 「Asynchronous JavaScript + XML」の略で、あえて日本語にすれば「JavaScriptとXMLによる非同期通信処理」といった意味です。難しく聞こえますが、JavaScriptでWebページを切り替えずにサーバーとデータをやりとりすることです。JavaScriptでサーバーのデータを取りに行けば、ページを切り替えずに画面の一部を書き換える、といった処理ができるようになります。 WebブラウザーはWebページを表示するために、サーバーからHTML/XHTML（以下、特に断りのない場合はHTMLと書きます）ファイルを取得し、取得したHTMLを解釈して描画（レンダリング）します。通常
リストにフィルタを掛けてソート出来る、わずか2KBの軽量jQueryプラグイン・MobilySelect - かちびと.net
以前にも同じようなものがありましたが、 こちらのほうが良かったのでメモ。リスト （デモでは画像を使っています）にフィルタ リングしてソート出来るjQueryプラグイン。 わずか2KBと軽量で、クロスブラウザ対応 です。便利そうなのでどこかで使いたい ですね。 以前ご紹介したFilter Image Viewも良かったのですが、IE6で表示が微妙でしたが、MobilySelectは問題なく、しかも軽量です。 機能はFilter Image Viewと同様で、ボタンを押すと、そのボタン以外のリストを非表示にする、というフィルタリング。 上記は「名刺」のみの表示にした状態。 完璧に同じ挙動、とは行きませんが、IE6でもちゃんとフィルタリングしてくれます。上記はIETesterでのキャプチャ。 マークアップ <div class="selecter selecter1"> <div class="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IEでpngを使った際に起きる不具合を防ぐプラグイン
