HonestyWorks TechNote » メニューやタブをjavascriptでactiveにするちょっとしたアイディア
概要 WebアプリケーションやWebサイトを構築するときにヘッダーやサイドバー領域などにメニューやタブを（アコーディオンや短冊型など)配置するデザインが一般的かと思います。 このようなデザインでは現在表示されているページのメニューには class=”active” などと指定してフォーカスを当てるようになっていることが多いですね。 全てのページをべたで静的HTMLとして作る場合はいいですがメニューやサイドバーを共通部品としてSSIやサーバーサイドのテンプレートエンジンでインクルードしている場合はどうやってメニューにフォーカスを当てようか思案のしどころです。 このような場面で使えそうなアイディアを紹介します。 アイディア jqueryを使ってonload時にメニューにフォーカスを当てる(classを追加する)ようにします。 まず、メニューのフォーカスを当てたい要素には menu_ではじまるi
入力内容の量に応じたtextareaの自動サイズ変更 - Qiita
内容の分量に応じて、textareaの自動サイズ変更（高さ）をするスクリプトを書きました。 本来ならばjQuery Autosizeという素敵ライブラリがあるのですが、なぜだかこれが上手く動かなくて泣く泣く自前で作る羽目に。 一応、自分用にはjQueryを使って書いたんですが、jQueryを使わないバージョンも書いてみました。 //jquery使うバージョン $("#ta").height(30);//init $("#ta").css("lineHeight","20px");//init $("#ta").on("input",function(evt){ if(evt.target.scrollHeight > evt.target.offsetHeight){ $(evt.target).height(evt.target.scrollHeight); }else{ var lin
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
<iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600"></iframe> <iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600" style="zoom:0.55"></iframe> 通常 zoom:0.55 悲しいことに、iframeの横幅・縦幅が0.55倍になるだけで、 iframe内のコンテンツが縮小されるわけではないのです。 Firefoxなどのブラウザでは、そもそもzoomすらされていない状態になります。 また、iOSではそもそもiframeの幅指定を無視します。 ではどうすればよいのでしょうか？ 答えとしては、CSS3が解釈できるブラウザ限定にはなりますが、 CSS3のtr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
