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 ){ //スクロールイベント内処理 }); 以下の実装で判別できないか考えてみました。 スクロール方向の判別
Twitter OAuth認証をポップアップで行うjQueryプラグイン:phpspot開発日誌
jQuery plugin for Twitter OAuth via popup window (Facebook style) Twitter OAuth認証をポップアップで行うjQueryプラグイン。 サーバ言語はなんでもよさそうですが、PHPでのサンプルも公開されています。 認証等もPHP側なのでプラグインの機能としてはFacebook風にポップアップにするというものです デモページはこちら サービスのTwitter連携っていうのは最近は必須であるように感じますね。 関連エントリ TwitterやFacebookへのログイン機能をこれ１個で実装できるPHPライブラリ「HybridAuth」 スマホ等のモバイル判定が簡単に行えるライブラリ「MobileESP」
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
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