フロントサイト
ckeditorで複数のインスタンスを処理する場合
はじめはjQueryでやろうとしましたが、 調べてみたら、とてもシンプルに書くことができました。 for(var i in CKEDITOR.instances) { var data = CKEDITOR.instan […]
jQueryのあの書き方をJavaScriptで書き直す時の覚書
とある案件で、IE6時代に作られたサイトを改修しています。 得意のjQueryが導入できないという面倒な環境で、 JavaScriptで何かする時には、そのまま書くしかない状況です。 Ajaxの勉強も、昔はDOMを操作す […]
prototypeとjQueryの共存について
個人的には共存は極力避けた方がいいと思います。 お客様の現場で事例があったので、どういった 使われ方があるのか、確認してみました。 ① まず以下の順番で読み込みます。 prototype jQuery ② クロージャ内は […]
JavaScript マウスの位置情報について
横方向のX座標と、縦方向のY座標がありますが、 いくつか取得方法があり、性質がそれぞれ異なる上、 ブラウザによっては使えないものもあります。 以下はその見取り図です。 IE Firefox Safari O […]
JavaScriptでオブジェクトを削除するには
オブジェクトは delete で削除できる、と説明されているところが 多いのですが、実際、消えませんでした。 var positionXY = new Array(); delete positionXY; 上記だと、残 […]
jQueryプラグインを作るときのテンプレート
今後、よく使いそうなのでストックしておきます。 まずはヘッダー。 /* * hoge.js 0.0.0 – 簡単な説明 * * Copyright (c) 2013 Web Atlier Midori * License […]
要素をランダムで取得する方法と、undefined の対応
jQueryを使っています。 altに番号が振ってある複数の画像の中から ランダムで１つだけ抜き出す、というよくあるパターン。 画像の数は var length = $(“.picture img”).length; こ […]
表の行をドラッグできるようにする
シンプルにいきます。 CDNを使って、jQuery本体とjQueryUIを読み込みます。 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2 […]
リンク(aタグ）の擬似クラス
リンク(aタグ）の設定は複数あります。 未訪問(:link), 訪問済(:visited), マウスオーバー時(:hover), 押している間(:active)の設定です。 使いこなせば、メニューも作れるようになります。 […]
chromeのﾌｫﾝﾄ自動調整機能をOFFにする
/* フォントサイズを指定したあと、以下を記述する chromeはフォントが小さい(8px以下)と自動的に見やすい大きさにしてしまう */ -webkit-text-size-adjust: none;
CSSスプライトの使い方
CSSスプライトとは 簡単に言うと、サイトで使用するボタンや背景画像などの部品を、 ひとつの画像にまとめてしまう技法です。 ひとつの画像にして、使用する要素ごとに、 どの位置のどの範囲を表示するかをスタイルシートで指定し […]
よく使うCSS3・角丸/ドロップシャドゥ
角丸 -moz-border-radius: 10px; border-radius: 10px; テキストのドロップシャドゥ text-shadow: 横方向のずれ(px) 下方向のずれ(px) ぼかし具合(px) # […]
スタイルシート 文字列を指定した幅を超えたら折り返させる
pre { width: 120px; white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line […]
スタイルシート 要素を半透明にするプロパティ
要素を半透明にするプロパティです。 IE6～ FireFox、Chrome、Safariで使えます。 img { filter: alpha(opacity=50); /* 0-100 */ zoom:1; -moz-o […]
スタイルシート よく使う書体のまとめ
よく使う書体 よく使うfont-familyをまとめました。 とっさにコピペで使えるように…。 PCにインストールされていないフォントを指定しても無効になるので、 ここでは標準で入っているフォントを指定しています。 シス […]
スタイルシート 要素の重なりについて
絶対配置・相対配置を使いこなすと 独自のダイアログやツールチップを作ることができます。 要素を重ね合わせるには 考え方は以下のとおり。 (1) 規準となるボックスまたはbodyを「position: relative;」 […]
IE6の対策まとめ
もうIE6は過去の遺物…と思っていたのですが、 役所などはまだ使っているようで驚きました。 サポート切れてるのに…。 出先で簡単に確認できるよう、まとめておきます。 IE6だけに適用 * html{ } / […]
CDNの活用
通常、サーバ上に設置したjQueryファイルを使用する代わりに、 GoogleやMicrosoftがCDN(Content Delivery Network)にて 提供しているファイルを読み込んで使用することができます。 […]
jQueryダイアログボックスについてまとめてみました
ほとんど確認用で「alert」しか使ったことが なかったのですが、調べたらダイアログは 3種類もあって、今まで損をしていたなと 後悔しています…。 alert confirm prompt アラート文を表示するだけの「a […]
FileAPIで画像を選択したらプレビューを表示する
HTML5の実装はまだ発展途上ではありますが、 インターネット・エクスプローラもバージョン10になって ようやくFileAPIでは、Firefox、Chromeと 肩を並べられるようになったようです。 ファイルの書き込み […]
オリジナルのコンテキストメニューの作り方
簡単なウェブアプリケーションが展開できる jQueryプラグインを作っていたところ、 どうしても独自のコンテキストメニュー （右クリックで出てくるメニュー）が欲しくなりました。 既存のものを探したのですが、どうもしっくり […]
画像の大きさを指定エリアの大きさにフィットさせる方法
指定した表示域におさまるように画像を表示し、 画像の大きさが表示域に収まらない場合に 自動縮小するロジックです。 HTML5のCanvasを使うようになってから よく使うようになったので流れをひかえておきます。 先にコー […]
ファイルアップロード用のタグ type=”file” をデザインする方法
ファイルアップロード用のタグ (input type=”file”) は、 スタイルシートでは装飾することができません。 でも、近頃のウェブサイトではかっこよくデザインしているものも たくさん見かけます。 どうするのかな […]
jQueryでReferenceError: $ is not defined
jQueryやjQueryのプラグインを使う時は、 jQuery本体をまずロードして、 その後で必要なjsファイルを読み込んでいく、 という使い方でないと表題のエラーが出ます。 普段そうしているのですが、 はじめてこのエ […]
jQuery1.9では.liveが使えない
ちょっと驚きました。便利な.live()が使えないので もしやと思って検索をかけてみると、jQuery1.9からは .liveイベントがなくなり、.onになっているとのこと。 調べてみると、この.onは、jQuery1. […]
GitHubが使いたくなりました。jQuery公式プラグイン・レジストリが公開
今日もjQueryのおかげで、 ご飯が食べられていると思っています。 PHPやRails、XHTML、CSS、これらをシンプルに結びつけて、 便利だったり、面白かったり、楽しいものを 作りだしてお客様に喜ばれるのは、jQ […]
スマホ・タブレットの向きでVIDEOタグの大きさをコントロール
jQueryだと簡潔に書けます。 640pixel以下のときに、幅をきりのいい320pixelではなく 300pixelにしているのは、iPhone用です。 きっちり320pixelだと、はみだすので。 $(docume […]
Notepad++で次世代Zen-codingのEmmetが使えます！
※2013年4月更新 Notepad++の最新バージョンでは、 標準プラグイン「Plugin Manager」より Emmetが簡単にインストールできるようになりました。 旧バージョンを使い続けたい方は、以下の記事を ご […]
JavaScriptの正規表現についての簡単な覚書
正規表現は奥が深いので、とりあえず急ぎで対応するときの覚書を残しておきます。 (1)「/」と「/」の間に書く (2) []→ 文字クラス この記号の間に書かれたいずれかの文字を含む、という意味 例） [ABC]ならA,B […]
テキストボックスをdisabledにすると送信されない
上記のようにしていると、内容が送信されません。 盲点…。 書き込みできないので、規定値を表示して確認だけ…という 使い方は出来ないようです。 参考URL： ・テキストボックスを無効にすると値が取得できない http:// […]
