‘javascript’ タグのついている投稿

jquery.jsとprototype.jsに依存しないLightBox

2009 年 5 月 26 日 火曜日

Lightbox関連で使用されるprototype.jsはjquery.jsと共存した場合、競合しどちらか一方しか動作しないケースが多い。
jquery.js & prototype.jsの干渉やコンフリクト等のトピックスであちこちで取り上げられている。

prototype.js と jQuery の競合(コンフリクト)解決! & 共存方法のような、回避方法もあるが、prototype.jsを使用しないLightboxを入れてしまう方法も1つの解決方法。ColorBoxの基本骨格はjquery.min.jsとcolorbox + jquery.colorbox.js + CSSなので、いたってシンプルに使用する事が可能

ColorBox
http://colorpowered.com/colorbox/

このエントリーを含むはてなブックマーク

JQueryを使ったフォントサイズ変更はInternet Explorer6(IE6)では正常に動作しない場合が多い

2009 年 5 月 11 日 月曜日

以前紹介した、ページが遷移してもフォントサイズが変更されないサイトを作る方法は、様々なサイトで紹介されているが、Internet Explorer 6(IE6)では正常に動作しない場合が多い。

原因は不明(調査中)

このエントリーを含むはてなブックマーク

jQueryを使ってアップル風のメニューを作る方法

2009 年 4 月 28 日 火曜日

元情報:Create an apple style menu and improve it via jQuery

日本語解説:jQueryを使ってApple風デザインのナビゲーション

日本語解説のCSS Lectureでも、今後増えていきそうな気がするとあるように、確かにWEBをユーザーの希望する形でカスタマイズが可能なサイトは大規模サイトでは増えていきそう。
デザイン力はもとい、CSSやAjaxのスキルも要求されそう。

このエントリーを含むはてなブックマーク

ページ内タブの作り方(JavaScriptで表示・非表示)

2009 年 4 月 27 日 月曜日

ニュースサイト等、テキスト量の多いページでは必ず導入されているページ内タブ。

参照
All About:ページ移動せずに内容を変更するタブを作る

いろいろなサイトで紹介されているが、All Aboutがスタンダード。
ただ、これだと中しか装飾(CSS)を施せないので個人的にはstyleswitcher.jsと合わせて用いればサイト全体にして、いろいろなCSSを施せると思うが、特にstyleswitcher.jsまで用いる必要性がない場合はカスタム又は直接JavaScriptを記載してもいいかもしれない。

他参考
JavaScript Library Archive
Alternative Style: Working With Alternate Style Sheets

このエントリーを含むはてなブックマーク

ページが遷移してもフォントサイズが変更されないサイトを作る方法

2009 年 4 月 27 日 月曜日

ニュースサイト等で右上にあるフォントを選択 小・中・大 などのフォントを変更する方法。
jQueryとjquery.cookie.jsでcookieを制御して構築する。

参考サイトは以下の通り。

フォントサイズを動的に変更 [with jQuery]
jQueryサンプル Ajaxフォントサイズを変更・切り替えcookieに保存

マークアップする人の好みの問題だが、4GALAXYさんの

jQueryサンプルCSS(スタイルシート)を変更・切り替えcookieに保存を参考ベースにCSSを直接制御する方が汎用的に構築し易い場合があるかもしれない。

<ul>
<li onclick=”jstyle(‘/page/css/style1.css’)”>Style1</li>
<li onclick=”jstyle(‘/page/css/style2.css’)”>Style2</li>
<li onclick=”jstyle(‘/page/css/style3.css’)”>Style3</li>
</ul>

<ul>
<li><a href=”#” onclick=”jstyle(‘font1.css’)”>小</a></li>
<li><a href=”#” onclick=”jstyle(‘font2.css’)”>中</a></li>
<li><a href=”#” onclick=”jstyle(‘font3.css’)”>大</a></li>
</ul>

このエントリーを含むはてなブックマーク

jQueryでドラック&ドロップ

2009 年 4 月 27 日 月曜日

EC CUBEのデザイン管理や、Googleの各種サービス、BBCなどで採用されている
ドラック&ドロップでページデザインを変更する基本サンプル。
http://interface.eyecon.ro/demos/drop.html
http://interface.eyecon.ro/demos/drag.html

他にも下記サイトで紹介されている。
Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編

このエントリーを含むはてなブックマーク

javascriptを動的にインポートする方法

2009 年 4 月 24 日 金曜日

今までJavaScriptのインポートというとdocument.writeで呼び出す方法が紹介されていたが、下記サイトで紹介されている方法も便利。元サイト自体はなくなっているようだが…。

youmos : JavaScriptでJSやCSSを動的インポートする (import.js)http://youmos.com/news/import_js

このエントリーを含むはてなブックマーク

JQueryを使ったプルダウンメニュー

2009 年 4 月 24 日 金曜日

CSS+JavaScritpのもう1つとしてJQueryを使ったプルダウンメニューがある。
JQueryを使用する機会も多くなっているので、JQueryを使用する場合は、使用を検討する価値がある。

CSS LectureさんのjQueryを使って簡単プルダウンメニューは、コードも綺麗で使いやすい。
http://www.css-lecture.com/log/javascript/005.html

このエントリーを含むはてなブックマーク

CSSとJavaScriptによるドロップダウンメニューの作成方法

2009 年 4 月 24 日 金曜日

CSSのみで作るドロップダウンメニューやJavaScriptのみの方法、それらが混在した方法などがあるが、アクセシビリティなど云々を取っ払って、一番使いやすいのは

JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューだと思う。
http://jsajax.com/DropDownMenuArticle286.aspx

CSSオンリーはコードが複雑になりがちだし、JavaScriptオンリーの場合はさすがにSEO関連の問題もある。Flashもしかり。この辺はサイトの性質やブランディングによって判断すれば良いが、このサンプルは汎用性的に使えるし、わかりやすい。

ただ、サンプルそのものの状態ではクロスブラウンジングされていないので、CSSを少しいじれば(submenuにwidthを指定するなど)問題ない。

このエントリーを含むはてなブックマーク

JavaScriptとCSSで任意にフォントサイズを切り替える方法

2009 年 4 月 20 日 月曜日

大手のニュースサイトなどには、任意でフォントサイズを切り替える方法がある。
最も簡単な方法(検索して一番紹介されている方法)はstyleswitch.jsを用いた方法。

<html>
<head>

<title>フォントサイズを任意で切り替える</title>

<script src=”styleswitch.js” type=”text/javascript”></script>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font1″ href=”font1.css” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font2″ href=”font2.css” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font3″ href=”font3.css” />
<link rel=”alternate stylesheet” type=”text/css” media=”screen” title=”font4″ href=”font4.css” />

</head>
<body>

<span id=”changefont”>
<ul>
<li>フォントサイズ:</li>
<li><a href=”javascript:chooseStyle(‘font1′, 30)”>小</a></li>
<li><a href=”javascript:chooseStyle(‘font2′, 30)”>中</a></li>
<li><a href=”javascript:chooseStyle(‘font3′, 30)”>大</a></li>
<li><a href=”javascript:chooseStyle(‘font4′, 30)”>最大</a></li>
</ul>
</span><!–changefont–>

</body>
</html>

style.css
———————————–
#changefont li{
display: inline;
}

font1.css
———————————–
body{
font-size: 0.9em;
}

font2.css
———————————–
body{
font-size: 1.0em;
}

font3.css
———————————–
body{
font-size: 1.3em;
}

font4.css
———————————–
body{
font-size: 1.6em;
}

上記以外にはjquery.jsを用いる方法等が利用されているよう。

他にも様々な方法を紹介しているサイトはこちら
CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie

このエントリーを含むはてなブックマーク