jQuery (X)HTML操作のメモ1

Posted by poundhound on September 15, 2009

いつも忘れるので自分用にメモ

prepend(): 指定した要素内部の先頭にHTMLを挿入; $('p').prepend('追加テキスト');
append(): 指定した要素内部の最後にHTMLを挿入; $('p').append('追加テキスト');
before(): 指定した要素の前にHTMLを挿入; $('p').before('<h1>追加テキスト</h1>');
after(): 指定した要素の後にHTMLを挿入; $('h1').prepend('追加テキスト');
prependTo(): 指定した要素を他の要素の内部の先頭に移動; $('div#article').prependTo('div.section');
appendTo(): 指定した要素を他の要素の内部の最後に移動; $('div#article').prependTo('div.section');
insertBefore(): 指定した要素を他の要素の前に移動; $('h1').insertBefore('p');
insertAfter(): 指定した要素を他の要素の後に移動; $('p#intro').insertAfter('h1');
wrap(): 指定した要素に対して別に指定した要素で包む; $('span').wrap('');
wrapAll(): 指定した複数の要素に対して別に指定した要素で包む; $('p').wrapAll('div.section');
wrapInner(): 指定した要素の子要素やテキストを別に指定した要素で包む; $('p').wrapInner('');

jQueryを使ってセレクトボックスで選択したoption要素のテキストを全て表示する

Posted by poundhound on May 27, 2009

先日、Webデザイナーの集会で嘘くさい？jQueryの基礎みたいなお話をしたのですが、その時にこのような質問が出ました。

複数のセレクトボックスを配置した時、選ばれた要素のテキストをまとめて表示する事って出来ないんですか？

そんな訳でちょっと書いてみたのですが、こんな動作で宜しいのでしょうか？

View Demo

jQueryを使ったブラウザ分岐

Posted by poundhound on April 18, 2009

Windows IE6/7はフォントをpx(ピクセル)指定すると文字のサイズが拡大出来ません。そのため今まではIEでフォントサイズを拡大出来るようにするため次のようにハックを使っていました。

body { font-size: 100%; }
* html body { font-size: 82%; } /* for win ie6 */
*:first-child+html { font-size: 82%; } /* for win ie 7 */
html>/**/body { font-size: 13px; } /* for modern browser */

ところがWIndows IE8がリリースされ、このブラウザも当然のごとくピクセル指定のフォントで文字サイズが変更出来ません。IE7からはページズーム機能が備わっているし、Firefoxも3からはデフォルトではレイアウトごとズームするのでもうフォントの固定をしても良いのでは？と思ったりもします。

JavaScriptが無効の環境ではフォントが固定されてしまいますが、jQueryを使ってブラウザ分岐をすると言うのも一つの手かもしれません。

DD_belatedPNGを利用してIE6で透過pngを使う

Posted by poundhound on April 11, 2009

これまでにいくつか透過pngに関するエントリーを書いてきましたが、これは！と思ったのがDD_belatedPNG。background-positionやbackground-repeatにも対応で読み込むJSファイルが1つなのでとっても使いやすい。

IE PNG FixのAlpha版もbackground-repeatに対応しているけれど、リピート用のJSの他にblank.gifや.htcファイルを読み込んだりする必要があるので少々面倒。

DD_belatedPNGの使い方は非常にシンプルで、headタグでJSファイルを読み込んで透過pngを使用したCSSセレクタを指定するだけでオーケーです。

<!--[if lte IE 6]>
<script type="text/javascript" src="<$mt:BlogURL$>theme/js/DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.iepngfix, div#pngFix');
</script>
<![endif]-->

セレクタはカンマ区切りで複数指定出来ます。

今回のブログデザインを変更するにあたりこのJSファイルを使わせていただきました。このブログではjQueryを使ってるので、次のようなコードを書いて透過pngを使った画像にIE6以下のブラウザの場合.iepngfixが自動的に適用されるようにしています。

$(function()
{
	if ($.browser.msie && $.browser.version < 7.0)
	{
		$("img[@src$=png]").addClass("iepngfix");
	}
}

jQueryを使ったPDFアイコン付加プラグイン

Posted by poundhound on March 31, 2009

リンク先がPDFの場合など、アイコンを表示させてリンク先がPDFファイルであることを知らせる事があります。疑似クラスafterやcontentプロパティを利用したい所ですが、IE6/IE7がこれらに対応していないためにa要素の背景にアイコンを表示させています。例えばこんなCSSを書きます。

CSS Code

a.pdf {
	padding: 0.1em 18px 0.1em 0;
	background: url(img/icon_pdf.gif) no-repeat right center;
}

しかしこのCSSの場合、改行されるような長い文章の場合、Windows IE6/IE7で致命的なバグがあります。

左のキャプチャ画像は各ブラウザのレンダリング状態をキャプチャしたものです。

Win Firefox3およびMac Firefox3ではきちんと文末にアイコンが表示されているのに対し、Win IE6/IE7の場合アイコンがきちんと表示されていない事が分かると思います。

zoom:1プロパティを与えると一応は表示されますが、文末にアイコンが表示されずに改行されている文章の右中央に表示されてしまいます。

Win IE6/7ではインライン要素に指定した背景画像で改行が入る場合、意図したレイアウトが反映されないバグがあるのです。

先日この事でTwitterにポストしたところ、a要素の次に空spanを入れてspanに背景を指定すれば回避されると回答が来ました。例えば次のようなXHTMLとCSSを書けば良いとの事です。

HTML and CSS Code

<style type="text/css">
span.pdf {
	padding: 0.1em 18px 0.1em 0;
	background: url(img/icon_pdf.gif) no-repeat right center;
}
</style>
<p><a href="hoge.pdf" target="_blank">PDF</a><span> </span></p>

A Day in the Life

Category JavaScript Archive