CSS

Drupalのctools利用で、ドロップダウンボタンの表示不具合を調整。

2012.03.17 / Notes

Viewsのインターフェイスを担っているctools(Chaos tool suite)で、日本語環境で利用の際に、ドロップダウンボタンの三角矢印の表示を調整する際のメモです。標準のままでは三角矢印が横に伸びていますが、正常な状態に戻します。
ctools
あくまで見た目だけの問題ですが、頻繁に目にする部分なので、どうしても気になってしまいます・・・。
調整するには、ctoolsモジュールに含まれるスタイルシートを直接変更します。
下記のCSSファイルの45行目あたりの「ctools-twisty」セレクタに「width」のパラメータを一行追加します。
/sites/all/modules/ctools/css/dropbutton.css

気になる方はぜひお試しください。

jQueryでモーダルウィンドウを作成。

2010.12.23 / Labs

(追記/2011.12.02)ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。

 

jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。
サンプルはこちら

jQueryを使ってリストのリンクをクリックで「href」のアドレスを参照し、「div#modal div.container」に対してコンテンツを読み込み、表示します。

 

CSSでは、モーダルウィンドウの背景を黒(#000000)の透明度75%としています。

 

リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。

 

jQueryを使ってDIVボックスをセンター配置。

2010.11.07 / Notes

jQueryをリサイズイベントを応用して、ページに配置されたDIVボックスをセンターに配置する方法です。
センター配置にはCSSのプロパティ「top」「left」を使っています。ページ読み込み時、ウィンドウがリサイズされた時に上記のプロパティを設定することでセンター配置しています。
サンプルはこちら

ページの読み込み時、ウィンドウがリサイズされた時に関数を実行しています。
センター配置には外側のボックスを内側のボックスの余白を計算して、内側ボックスの左上の座標を設定しています。

jQueryでクッキーを使ったフォントサイズ変更の方法。

2010.05.16 / Notes

jQueryでフォントサイズのスタイルシートを動的に切り替えて、現在表示しているスタイルシートをクッキーに保存する方法です。
スタイルシートは、あらかじめフォントのサイズごとに3種類用意しておきます。

次のコードでは、ページ内にレイアウト用など複数のスタイルシートを読み込むことを想定して、フォントサイズ用のスタイルシートのみを切り替えています。

<head>タグ内にjQueryの本体と、「jquery.cookie.js」を読み込みます。

フォント切り替えのためのボタンを、ページ内に<li>で記述します。
クラス名が、スタイルシートのファイル名に関連しています。

ウィンドウ内をスクロールするパネル。

2010.04.25 / Labs

jQueryによるウィンドウ内を、左右にスクロールするパネルのスクリプトです。
横幅1000pxのパネルを横に5枚並べて、リンクをクリックすることで目的のパネルに移動するスクリプトです。
アニメーションのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

 

index.html

style.css