JavaScript関連の記事一覧

20150530-IEの条件付きコメントをJavaScriptに置き換える-01

今回紹介するのはWeb制作の中でInternet Explorer（IE）の条件付きコメントが使用できない場合（禁止されている場合）にJavaScriptで対応する方法です。


●条件付きコメントとは？

条件付きコメントというのはIEで動作する、HTMLのコメント機能を利用した条件分岐ができる機能です。

簡単な例としてはIE６だけ読み込ませたい内容を書くには以下の様に書きます。IE6で独自に適用したいスタイルシートやJavaScriptの読み込みをすることが可能です。

<!--[if IE 6]>
　ここはIE 6だけが読み込みます
<![endif]-->

なお、この機能は、便利な機能ですがIE10で廃止されました。



●条件付きコメントをJavaScriptで置き換える

たとえば、IE8（Internet Explorer 8）以下で、HTML5の要素を有効にして、メディアクエリーを有効にしようとこんなコードを使いたいとします。

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


しかし、諸般の事情で条件付きコメントが使用できない場合は、JavaScriptで置き換えることで対応できます。

記事の続きを読む

20150406-JavaScriptでIEのバージョン判定-01

タイトルの通りですが、Internet Explorer（以下IE）のバージョンをJavaScriptで判定するコードです。（User Agentは使用しません）

それでは早速コードを紹介します。

//IEの判定 via https://w3g.jp/blog/tools/js_browser_sniffing
var _ua = (function(){
    return {
        lte_IE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
        lte_IE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
        lte_IE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
        lte_IE9:document.uniqueID && typeof window.matchMedia == "undefined",
        gte_IE10:document.uniqueID && window.matchMedia ,
        eq_IE8:document.uniqueID && document.documentMode === 8,
        eq_IE9:document.uniqueID && document.documentMode === 9,
        eq_IE10:document.uniqueID && document.documentMode === 10,
        eq_IE11:document.uniqueID && document.documentMode === 11,
//        eq_IE10:document.uniqueID && window.matchMedia && document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !document.selection,
//        eq_IE11:document.uniqueID && window.matchMedia && !window.ActiveXObject,
        Trident:document.uniqueID
    }
})();


記事の続きを読む

以前に「【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方」ということを書いて、理由を探したのですが、ちょっとまだモヤモヤしたままでした。

モヤモヤを抱えたままだったので自分なりに考えてみました。


今回はウェブの開発・制作でよく使われるFirefoxのFirebugを使用します。（インストールはこちらから）

Firebugの機能で、コンソールという機能があって、ここにスクリプトを書いて、色々実験ができます。

20140202-window-jQueryについて-08

画像出典：Firebug



この機能を使って「window.jQuery ||  document.write('<script src="●●"><\/script>') 」の動作を調べてみます。


記事の続きを読む

jQueryで簡単・シンプルにクロスフェード型のスライドショーが作れないかな？と思って探したら「A Simple jQuery Slideshow | Jon Raasch's Blog」というスクリプトが公開されていました。

※クロスフェードというのは今表示している画像が段々薄くなっていくと同時に、次の画像が段々濃くなってくるタイプのエフェクト。


今回はこちらのスクリプトを紹介します。

実は以前書いた「jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》」でも紹介しているのですが、このスクリプトのままだと、画像にリンクを張った場合に動作しなくなるので、それを修正したものを紹介いたします。

このブログのアクセスログを見ると、検索で「jQuery 簡単 スライドショー」とかで結構来ているみたいなので。


今回のスクリプトを動かしたデモは↓のようになります。（スマートフォン版ページだと動作しません）

Sea Otter preening itself in Morro Bay, CA sea-otter-morro-bay_13 Sun Sun Down Sun Rise over Sydney Sea

記事の続きを読む

20120406-jQueryのattrとprop-00

「jQueryをロードする際のナイス！と思った書き方」でコメントを頂いたので返信がてら記事を書いてみようと思います。


シマダさんからコメントを頂きました。ありがとうございます。
フォールバックの違う書き方をCSS-Tricksで見つけました。
http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquery/

Initializrが書き出すやつはHTML5用であり、HTML4やXHTML1.0ではHTMLの文法エラーを招くので、HTML4やXHTML1.0に書くのであればCSS-Tricksで紹介されているやつがいいでしょう。
jQueryをロードする際のナイス！と思った書き方

なるほど。まだ皆さんがHTML5になっているわけではないですから、重要な指摘ですね。


では文法エラーは何が出るのかから見てみましょう。
記事の続きを読む

Says it all by alikins


「jQueryをロードする際のナイス！と思った書き方 jQueryをロードする際のナイス！と思った書き方」が突然週明けからブレイクしてビビっております（汗）。


その記事に書いたjQueryのフォールバック用のJavaScriptですが、以下の様に書かれています。

window.jQuery ||  document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

疑問というか質問なのですが、これってJavaScriptで一般的に使用される条件式の書き方なのでしょうか？


記事の続きを読む

20120518-Initalizr-jQuery-load-00

先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。


このブログも実はPC版は形式上HTML5のページになっているんです。
見た目はほとんど変わっていませんが…。


さて、CSS Niteのセミナーの中でHTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」が紹介されていました。


このサイトでテンプレートを作ってみて、そのテンプレートを開いたらjQueryをロードする時の書き方でこれはナイスな書き方だと思ったものがあったので紹介します。

記事の続きを読む

20120406-jQueryのattrとprop-00

なんでもjQueryでできるのではないかと思って考えてみた。

考えのネタ元は以下のページ。


こちらのページはWordPressのタグで「親カテゴリのみにclass属性を付ける」ことをやっているわけですが、私はWordPressは全然わからないので、jQueryで何とかする方法を考えてみます。


CMSから書き出されていた元のタグはこんな感じなんでしょうかね。

<ul class="accMenu">
	<li><a href="/hoge1/">hoge1</a><ul>
		<li><a href="/hoge1/hoge1-1/">hoge1-1</a></li>
		<li><a href="/hoge1/hoge1-2/">hoge1-2</a></li>
	</ul></li>
	<li><a href="/hoge2/">hoge2</a></li>
</ul>


これをjQueryで何とかして以下の様にします。

<ul class="accMenu">
	<li class="open"><a href="/hoge1/">hoge1</a><ul>
		<li><a href="/hoge1/hoge1-1/">hoge1-1</a></li>
		<li><a href="/hoge1/hoge1-2/">hoge1-2</a></li>
	</ul></li>
	<li><a href="/hoge2/">hoge2</a></li>
</ul>

早速考えてみましょう。

記事の続きを読む

Rolled dollar
Rolled dollar by MoneyBlogNewz


前回の「jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》」という記事で

まずimgタグで「active」というclassが付いている要素を$activeという変数に代入します。（なんで$を頭に付けているのかは謎…）
jQueryで簡単な画像のスライドショー《slideswitchを勝手に解説》

と、変数名の頭に$を付けているのはなぜなのかと書きました。

謎のままにしていると気持ちが悪いので（笑）、調べてみました。


記事の続きを読む

20120409-jQueryで画像スライドショー-00


jQueryのスライドショーのプラグインって色々ありますね。

会社のサイトでは様々なサイトで紹介されているプラグインほど大がかりなものはなくても良いかな、と思って「jquery「slideswitch」で簡単にスライドショーを実装｜衆」に掲載されているスクリプトを使用しています。ありがとうございます。


今回はこのスクリプトを勝手に解説します。

記事の続きを読む

ブログ著者

名前：（Google+のプロフィール）

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索