nyagihime's public fiddles
-
チェックボックスでボタンを有効化
jQuery 1.8.3, HTML, CSS, JavaScript
-
ボタンを押すと横からコンテンツが伸びるやつ
(アイティアメモ) スマホ版Facebookなどでよく見る奴。 簡易版なので、実際に運用する場合はもう少し作りこむ必要あり。
-
外部リンクにマークを付ける
同じホストなら何も出ないけど、 別のホストにリンクするときはリンクの後ろに文字を追加する。 追加する部分は画像でもOK。 アイコンを用意して貼り付けるのがいいかも。
-
タップで開閉コンテンツ
タイトルをタップ(またはクリック)すると本文が伸びる。 もう一度タップすると閉じる
-
メニューストック
ちょっと構造が複雑 やってることは単純なのに… みたいな残念メニューの1
-
jQuery + JSONでYouTubeのチャンネルを取得
http://today-only.net/jquery-youtube/ のやつをIEでもみれるように修正したメモ
-
振り分けくん2号
ウィンドウ幅を取得して振り分けるスクリプト。横幅320pxで動作中。 レスポンシブデザインで要素の順番を入れ替えたり飛ばしたり、メニューのクラスを切り替えて動作方法を変えたり。CSSだけじゃ対応しきれない時のお供に…。 trigger_widthの値を変更することで振り分けるポイントとなる横幅を切り替え可能。 もっといっぱい分岐かけばタブレットとか小さい画面のPCと大画面PCを振り分けたりとかポートレイトとかランドスケープとかいろいろ振り分けられるはず。
-
振り分けくん1号
PCスマホを振り分けるスクリプト。 ユーザーエージェントから判別する版。 サンプルではスマホの時は要素の順番が逆さまになる。 レスポンシブとかでナビゲーションの位置を入れ替えるのにつかえるかも。
-
文字サイズ切り替えくん
bodyのスタイルに対してフォントサイズを直接上書きして基本フォントのサイズを変更する。 他の各種フォントサイズはすべて%指定することで拡大縮小を実現させる。 コントローラー部分のようにフォントサイズの変更にかかわらず文字サイズを変えたくない箇所はピクセルまたはemで指定する。
-
floating header
一定量スクロールするとのびてくるメニュー
-
Scroll To Link
scrollerというクラスを持つaリンクに反応する。 #のみならトップまで、 #hogehogeなら id hogehoge までスクロールする
-
フォーカスでいろいろ出てくるインプットエリア
インプットエリアにフォーカスすると、エリアが左にのびたりオプション選択領域(DIV)が出てきたりする。 閉じるボタンで初期状態に戻る。 要素外クリックで閉じる方法はまだ不明
-
Toggle List Nav
ネストした ul 要素を開閉式にする
-
dropdown nav 4 WP
よくあるロールオーバーで伸びるメニュー。 最初から$じゃなくてjQueryで書いてあるのでWordPressとかでもそのまま使えます