ドットインストール代表のライフハックブログ
twitter facebook hatena google pocket 画像などの要素を回して印象的に見せたい。 そんな時にはJavaScriptのjQuery Roundaboutを使用すると良いかもしれません。 手軽に導入できます。 sponsors 使用方法 jQuery Roundaboutからjquery.roundabout-1.0.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.roundabout-1.0.js"></script> <script type="text/javascript"> $(document).ready(functio
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説カスタマイズ性抜群の上級者向けタブブラウザ「Lunascape」 動作の重いFirefoxや、セキュリティホールの多いIEから乗り換えるなら・・・ 高機能かつ拡張性に富んだ『Lunascape』(ルナスケープ)がオススメです。 このブラウザは、驚くほど “ 動作が軽い ” のが魅力! Firefoxみたいにメモリを食いません(笑) IEのツールバープラグイン、Firefox、Netscapeの一部のプラグインに対応しているので、今まで使っていたプラグインごと乗り換えられます。 IEのお気に入りもブラウザのサイドバーに簡単に組み込めます。 また、RSSリーダー付ブラウザなので、RSSリーダーを使わずにブラウザ上でRSSの購読や管理ができます。 F
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫:Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例1 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例2 ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例3 ブラウザ幅に合わせる、がオ
WKRTEはJavaScript/jQuery製のオープンソース・ソフトウェア。Webブラウザのテキストエディット機能があまりに貧弱であるために、開発者はJavaScriptやJavaアプレット、Flashなどの技術を使ってリッチなエディタを作ってきた。 jQuery製のシンプルなエディタ JavaScriptが最も簡単に利用できることもあって、CKEditorのような有名なものも存在する。だがもっと手軽に導入したいならばWKRTEを使ってみるのも良さそうだ。WKRTEはjQueryプラグインなので、同フレームワークを使っているならお勧めだ。 WKRTEの利点として、テキストエリアにフォーカスが当たっていないとツールバーが出てこないと言うのが挙げられる。常時表示されていると邪魔臭く見えてしまうツールバーも、編集時以外は表示されなければ気にならない。 ソース表示も可能 機能は太字、イタリック
htmlやJavaScriptをサイトで書いているときに見やすくしたいという欲求があると思います。 jQueryプラグインのbeautyOfCodeはコードを見やすくする、いわゆるシンタックスハイライトです。 sponsors 使用方法 beautyOfCodeからファイルをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.beautyOfCode.js"></script> <script type="text/javascript"> $.beautyOfCode.init({ theme: 'Django', //対応テーマ一覧http://alexgorbatchev.com/pub/sh/2.1.3
Kwicksは、Mootoolsにあるように領域をアニメーションでスムーズに収縮するスクリプトのjQuery版のスクリプトです。 Kwicks for jQuery デモ デモにある4つの矩形の領域はリスト要素となっています。 オプションとして、領域間のスペースの有無やアニメーションのタイミングを変更することが可能で、収縮させるのを矩形以外にして利用することも可能です。
twitter facebook hatena google pocket 要素、特に画像、をスライドさせて表示させることで領域が小さいながらも多くの情報を伝えることが可能になります。 今回はjQueryプラグインの「jQuery carrousel」を利用します。 sponsors 使用方法 jQuery carrouselから関連jsをダウンロードします。 もちろんjQueryからjquery.jsを忘れずに。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.carrousel.js"></script> <script type="text/javascript" src="jquery.carrousel.control
twitter facebook hatena google pocket 表示領域が少なくても、いろんな要素を見せたい時があります。 そんなとき要素を上下左右にガラガラと切り替えられるjQuery flipsを利用すると便利です。 sponsors 使用方法 jQuery flipsからjquery.flips.jsを、jQueryからjquery.jsをダウンロードします。 <div class="to-flips" id="id名"> <!-- ここから要素1 --> <div class="content"> <div class="block"> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> <!-- ここまで要素1 --> <div class="content"> <div class="block"> <p>テキ
twitter facebook hatena google pocket 失速が不安視されるtwitterですが、日本での利用は幅広くなっています。 そんな中、twitterのタイムラインを表示することが、求められています。 今回は手軽にタイムラインを表示できるJavaScriptを紹介します。 sponsors jQuery jqtwitter 特定ユーザーのタイムラインを指定数表示 twitterタイムラインをJavaScriptで表示「jQuery jqtwitter」 Juitter ユーザー、キーワード、@付きなどでタイムラインを表示 twitterをJavaScriptで表示する「Juitter」 monitter 指定キーワードで表示可能(除外も) ただし重い。 twitterタイムラインをJavaScriptで簡単に表示する「monitter」 No Name 特定ユーザ
twitter facebook hatena google pocket 画像のシンプルな見せ方としてクロスフェードを使用するケースは多いのではないでしょうか? それを簡単に行えるのが、jQueryプラグインのImage Fader jQuery plugin - wingtechです。 sponsors 使用方法 Image Fader jQuery plugin - wingtechからjquery.metadata.jsとjquery.imagefadingslider.jsをダウンロードします。 もちろんjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.metad
音声配信業界のニュースまとめ👇👇👇 無料ニュースレターを購読する Yoshihiko Yoshida フリーIT講師。「マツコの知らない世界」「王様のブランチ」「ZIP」などTV出演多数。教育システム情報学会会員。元立教大学/第等文化大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。 >>もっと読む @creator_enewsをフォロー <<お問い合わせはこちら>> ・プライバシーについて 当ブログではGoogleアナリティクスとcookieを用い、個人を特定しない範囲でアクセス状況を記録しています。Google側ではその情報をGoogleアカウントと紐付けパーソナライズ広告に利用しています。その情報は取り扱いに注意しつつ、内容充実や企画立案など、皆様のお役に立てるよう活用しています。 パーソナライズド設定をオフにするには、Google公式ページを御覧く
I remember googling for something of this nature a while ago but all I found were countless attempts using the cols and/or rows attribute of the textarea, thus making it pretty useless if you weren’t using a fixed-width font. Inspired by Jason Frame’s method, I’ve created an animating ‘autoResize’ jQuery plugin. Although it was inspired by his plugin it has a few slight differences, most notably t
なかなか凄いぞ! jQueryとPHPのモジュールで簡単に動いてしまった。 画像をアップロードして、カットしたいところをドラッグ。 その部分が指定したサイズになってクリップされるという代物。 因みに今回アップロードで使用した画像は美人時計さんのもので、1分おきに美人が現れる時計式ウェブサイトです。これも同時にお勧め。 仕様 必要なものは、PHP4もしくはPHP5。 そしてPHP GD ライブラリがサーバーにインストールされている必要がある。 逆に言えばこれだけクリアしていればものすごく手軽に設置できるという魅力あるスクリプトです。 仕様としては、アップローダーが付いており、そこに画像をアップすると、編集モードになる。 そこで、写真の好きなところをドラックして囲い込みをすればそこが画像としてリサイズできるのです。 ダウンロードは以下 ページ下部にある以下のリンクから。 ダウンロードした後は
maxImage demo 上記のデモでは、右側の画像がブラウザのサイズに合わせて、はみでないようにリサイズされて表示されます。 デモは他にも多数あり、下記は背景画像をブラウザのサイズに合わせて最適化します。
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider Posted by Scott on 08/11/2008 Topics: accessibilitycssjQueryprogressive enhancementui design Earlier this year, we wrote about progressively enhancing select elements into slider components. Our article focused mainly on the high-level approach, but our demo code made use of the now abandoned "Interface" libr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く