Facebookみたいにtextareaの一部を強調する - Qiita
Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り
スクロールイベントの開始 / 終了 / 方向を判定する jQuery プラグインを書いてみた - Cyokodog :: Diary
バージョンアップしました。詳細は以下記事をご覧ください。[Ex Scroll] スクロールイベントの開始／終了、方向を判別できる jQuery プラグイン - Cyokodog 需要なさそうですが、備忘録ということで。 只今、以前作成した exFixed.js という jQuery プラグインの機能拡張を行っており、その中で、 スクロールイベントの開始、終了時にのみ処理を行う その際、スクロールイベントのスクロール方向に応じて処理を変える という実装が必要になりました。 jQuery におけるスクロールイベントの割当は下記のような記述になりますが、このままではイベントの開始,終了,スクロール方向は判別できません。 $( element ).scroll( function( evt ){ //スクロールイベント内処理 }); 以下の実装で判別できないか考えてみました。 スクロール方向の判別
jQueryでマウスホイールで横にスクロールする横型コンテンツ
Posted: 2011.07.21 / Category: javascript / Tag: jQuery, アニメーション 通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。 機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。 html+css htmlはナビゲーションであるリストとコンテンツを入れるためのdivが５つあります。 html <div id="contents"> <ul id="nav"> <li><a href="#s01">01</a></li> <li><a href="#s02">02</a></li> <li><a href="#s03">03</a></li> <li>
CSS3 AnimationsとJSの連携でキャラクターを制御 (1/3)
HTML5 CanvasやWebSocketなどの最新技術を駆使して作ったiPhone 4用ブラウザーゲーム「Handy Stadium」の裏側を解説する本連載も、今回で最終回（連載バックナンバー）。今回は、CSSアニメーションを中心としたフロントエンドの実装について解説します。 オリジナルのJavaScriptライブラリー「mm.js」 Handy Stadiumのフロントエンドの実装における大きなポイントは、jQueryではなく独自のライブラリーを使っていること、Canvas以外のアニメーションはJavaScriptではなくCSSで実現していることです。 フロントエンドの処理は、最近ではjQueryを使うことが多いですが、Handy Stadiumの場合はDOMを操作する処理がそれほど多くなく、対象端末をiPhone、ブラウザーをMobile Safari/Google Chrome（
超カッコいいApple風スライドショーギャラリー作成チュートリアル:phpspot開発日誌
超カッコいいApple風スライドショーギャラリー作成チュートリアルが公開されています。 次のようなカッコいいスライドショーが作れます。 デモページ コーポレートサイトのページのヘッダーなんかに入れ込むといい感じになるかもしれませんね。 以下のエントリを参照してください。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery ? Tutorialzine 関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryでAjaxを使った滑らかアニメーション画像スライドショー スライドショーが可能なイメージギャラリー作成ライブラリまとめ 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
keyframesandcode.com
