textresizer.jsを使ったフォントサイズ切り替え

-
カテゴリー:
javascript 

フォントサイズ切り替えが必要な案件でよく使用させていただいているプラグインjQuery Text Resizer Pluginのご紹介です。

まずjqueryとjquery.cookie.jsが必要になります。
次にjQuery Text Resizer Pluginをダウンロードします。

ダウンロードが完了したら、htmlのhead内で読み込みます。

 

次にhtml内に以下のように記述※idなどは任意のものを設定

 

次にCSSの記述※サンプル用なので、かなりアバウト

 

上記CSSの.textresizer-activeは、フォントサイズがアクティブになっている時のCSSです。

最後にtextresizer.jsを実行するためのコードを記述します。※外部ファイル、もしくは、html内に記述

 

targetはフォントサイズを切り替えるターゲットの設定
typeはフォントサイズの指定方法
sizesは実際のフォントサイズ
selectedIndexは初期のフォントサイズ指定

#wrapperや#font_size aなどはサンプル用の記述なので、適応変更する必要があります。

サンプルはこちら

 

 

プルダウンメニューの作り方【簡易版】

-
カテゴリー:
javascript 

最近良く使っているプルダウンメニューのコードです。

このまま使うことは無いのですが、以下のコードをたたき台にして作り込みをしてます。

まず、CSSなんですが、

 

サンプルの状態なので装飾部分やサイズは適応変更。

横並びのナビゲーションを想定したものなのですが、縦並びの場合は、floatなどを削除し、#navi ul li ulのtopとleftを変更して対応。
以下、HTMLです。

 

以下、javascriptです。※jquery使用

 

あってもなくても問題ないのですが、ナビゲーション上部のマウスオンを保つために、a要素にactiveクラスを追加・削除するコードを記述してます。

 
サンプルはこちらです
 

jqueryを使ったフローティングメニューの作り方【簡易版】

-
カテゴリー:
javascript 

先日時間がない中で、「ワァーーーッ」ってなりながら使ったフローティングメニューのコードなんですが、忘れないようにメモ残しときます。

 

HTMLやCSSはサンプルで、実際のお仕事で使ったコードではないのですが、
以下、CSS

以下、HTML

で、jqueryが読み込まれていることが前提なのですが、以下javascriptのコードです。

 

上記の記述で、#sideがスクロールに合わせて移動します。

var limit_posはフッターなどの崩れ防止用です。

こちらがサンプルページ