Twitter

jQueryでブラウザに応じてスクリプトを分岐

2012/09/03 | jquery | コメント (0)

jQueryを利用してブラウザとそのバージョンを判別、スクリプトを分岐させる。

if($.browser.msie) {
	// ブラウザがIEの場合の処理
}
if($.browser.msie && $.browser.version < 7) {
	// ブラウザがIE6以下の場合の処理
}

if文内は以下の記述で、他のブラウザも判別出来ます。

$.browser.opera // Opera
$.browser.safari // Safari
$.browser.mozilla // Firefox

jQueryでスクロール量を取得

2012/07/09 | jquery | コメント (0)

縦スクロールサイトを作る際には必ず必要になる、トップからの現在のスクロール量を取得します。
スクロールによるパララックス(視差)効果を実装する場合は、スクロール量と要素のオフセット値や条件分岐を利用して、背景をずらしたりオブジェクトを動かしたりします。

$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
	});
});

これだけ。値をとるだけならとっても簡単。
テスト用にブラウザ上で値を確認したい場合はhtmlに表示先を設定し、.textメソッドで値を出力しましょう。

<!-- html -->
<p id="scroll"></p>
$(function(){
	$(window).scroll(function(){ //スクロールイベント
		var y = jQuery(this).scrollTop();
		$("#scroll").text("スクロール量:" + y); //追加
	});
});

ページ読み込み後に指定の位置まで自動スクロール

2012/06/28 | jquery | コメント (1)

相変わらず縦スクロールサイトが流行していますが、ページにアクセスした際に自動で指定の位置までスクロールする方法。
※以下の記述はjQueryとjQuery Easing Pluginを利用しています。

$(function(){
	var $speed = 1500; //スクロールのスピードを設定(ミリ秒)
	var targetOffset = $('#●●●●●●').offset().top; //ターゲットとなるdivを設定

	//ページを読み込み0.8秒後にターゲットとなるdivまで自動スクロール
	setTimeout(function(){
		$("html,body").stop().animate({scrollTop:targetOffset},$speed, 'quart');
		return false;
	},800);
})

上の例では、ページが読み込まれてから0.8秒後にターゲットとなるdivまで1.5秒かけて自動でスクロールします。

iPhoneサイトのアドレスバーを隠す

iPhoneサイトの画面をより広く使いたい場合は、サイトアクセス時にアドレスバー(URLの表示領域)を隠す以下のコードを入れます。
これで見えなくなりますが、消えたわけではなく隠しているだけなので、画面を下にスクロールするとアドレスバーはちゃんと出てきます。

window.addEventListener("load",	function() {
	setTimeout(function() {
		scrollTo(0,1);
	}, 100);
}, false);

【jQueryを利用する場合】

$(function () {
	setTimeout("window.scrollTo(0,1)", 100);
});

このスクリプトにより、ページが読み込まれた0.1秒後に1px縦にスクロールされ、iPhoneではアドレスバーが自動で隠れるようになります。

jQueryを使った長い縦スクロールページの現在地による制御

2012/02/09 | jquery | コメント (1)

パララックス(視差)効果やページ内のスムーズスクロールなど、見せ方に動きをつけた縦長1ページで構成されるhtmlサイトが流行っていますが、ページ内の現在位置を取得してナビゲーションをアクティブに変更したり、要素をフェードインしたりする必要があったのでメモ。jQueryを利用して実装しています。

※この記事は、webOpixelさんのエントリ「jQueryで長いページの区切り(セクション)ごとに背景を変化させる」を大変参考にさせていただきました。ソースも必要な箇所を大きく抜粋させていただいた形です。webOpixelさんの記事はどれも分かりやすく、丁寧に説明されているので非常に助かりました。m(_ _)m

+more read

jQueryを利用したシンプルな画像ロールオーバー

2012/02/06 | jquery | コメント (0)

class属性に「imgover」を指定したimg要素に対し、ロールオーバーで画像を置換する方法。
拡張子の前に「_o」を付けたロールオーバー用の画像さえ同階層にあれば、jQueryだけで簡単に実装できます。

ex)ロールオーバー前の画像名:hoge.jpg → ロールオーバー後の画像名:hoge_o.jpg

$(function() {
	// ロールオーバー
	$("img.imgover").mouseover(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	}).mouseout(function(){
		$(this).attr("src",$(this).attr("src").replace(/^(.+)_o(\.[a-z]+)$/, "$1$2"));
	}).each(function(){
		$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_o$2"));
	});
});

javascriptによるアクセスの振り分け

javascriptを利用し、アクセスするデバイスに応じてそれぞれのサイトに誘導する方法です。

各デバイス向けに最適化したサイトがある場合、対象ユーザーをそのサイトへと誘導しなければなりません。
このとき、PC向けサイトと同じ方法でアクセスできるように、PC向けサイトのトップページのhead内でユーザーエージェントを判定し、対象デバイスからアクセスしたときに各デバイス用のサイトへ自動的に転送させます。

このjavascriptによる振り分けは容易ですが、javascriptを無効にしているユーザーには対応ができないので注意が必要です。
その際は.htaccessによる振り分けやPHPによる振り分けを検討しましょう。


jQueryのセレクターまとめ

2011/12/28 | jquery | コメント (0)

jQueryを使ってHTMLの要素を指定する際に使用できるセレクター一覧表

名称 書式 指定対象
CSSでよく利用されるセレクター
要素セレクター $("要素名") 特定の要素
IDセレクター $("#ID名") 特定のid属性を持つ要素
クラスセレクター $(".クラス名") 特定のclass属性を持つ要素
子孫セレクター $("要素1 要素2") 特定の要素の内側にある要素
ユニバーサルセレクター $("*") すべての要素
グループセレクター $("セレクター1, セレクター2, …") 複数のセレクター
CSS2のセレクター
子セレクター $("親要素名 > 子要素名") 特定の要素の直下の子要素
隣接セレクター $("要素1 + 要素2") 特定の要素の次の要素
first-child擬似クラス $("要素:first-child") 同一要素内の最初の要素
CSS3のセレクター
間接セレクター $("要素1~要素2") 特定の要素の後に出現する要素
否定擬似クラス $("要素1:not(要素2)") 特定の要素のうち要素2の条件を除く要素
empty擬似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-child擬似クラス $("要素:nth-child(番号)") 特定の要素内の指定した番号の要素
last-child擬似クラス $("要素:last-child") 同一要素内の最後の要素
only-child擬似クラス $("要素:only-child") 特定の要素が1つだけ含まれる要素
CSSの属性セレクター
[attribute] $("[属性名]") 特定の属性を持つ要素
[attribute = 'value'] $("[属性名 = '値']") 特定の属性が指定した値を持つ要素
[attribute != 'value'] $("要素名[属性名 != '値']") 特定の属性が指定した値を持たない要素
[attribute ^= 'value'] $("[属性名 ^= '値']") 特定の属性が指定した値で始まっている要素
[attribute $= 'value'] $("[属性名 $= '値']") 特定の属性が指定した値で終わっている要素
[attribute *= 'value'] $("[属性名 *= '値']") 特定の属性が指定した値を含んでいる要素
[attributeFilter1][...2] $("[属性セレクター1][...2]") 複数の属性セレクターに該当する要素
jQueryの独自フィルター
firstフィルター $("要素:first") 指定した要素の最初の要素
lastフィルター $("要素:last") 指定した要素の最後の要素
evenフィルター $("要素:even") 指定した要素の偶数番目の要素
oddフィルター $("要素:odd") 指定した要素の奇数番目の要素
eqフィルター $("要素:eq(番号)") 指定した番号の要素
gtフィルター $("要素:gt(番号)") 指定した番号より後の要素
ltフィルター $("要素:lt(番号)") 指定した番号より前の要素
headerフィルター $("要素:header") h1~h6までのheading要素
containsフィルター $("要素:contains(‘文字列’)") 特定の文字列が含まれている要素
hasフィルター $("要素1:has(要素2)") 特定の要素が含まれている要素
parentフィルター $("要素:parent") 子要素やテキストを含む要素
animatedフィルター $("要素:animated") アニメーションしている要素
フォームフィルター
:inputフィルター $("要素:input") input要素/textarea要素/select要素/button要素
:textフィルター $("要素:text") 1行テキストフォーム(input type="text")
:passwordフィルター $("要素:password") パスワードフォーム(input type="password")
:radioフィルター $("要素:radio") ラジオボタン(input type="radio")
:checkboxフィルター $("要素:checkbox") チェックボックス(input type="checkbox")
:submitフィルター $("要素:submit") 送信ボタン(input type="submit/image")
:imageフィルター $("要素:image") イメージボタン(input type="image")
:resetフィルター $("要素:reset") リセットボタン(input type="reset")
:buttonフィルター $("要素:button") ボタン(button要素)
:fileフィルター $("要素:file") ファイル選択フォーム(input type="file")
:checkedフィルター $("要素:checked") チェックされているチェックボックス/ラジオボタン
:selectedフィルター $("要素:selected") セレクトボックスで選択されている要素

jQueryの基本構文

2011/11/10 | jquery | コメント (0)

jQueryでスクリプトを書くときにはほとんどの場合、まずhtmlが読み込まれたときに実行する命令であるready関数を記述し、その内側に命令を書いていきます。

命令には、その対象である「セレクター」と、何らかのきっかけとなる「イベント」があり、セレクターがイベントの発生を感知したタイミングで実行されます。

ほぼ全てこの形式になるのでjQueryの決まりごととして覚えましょう。

$(function() { //ready関数
	$(セレクター).イベント(function() {
		$(セレクター).命令;
	});
});

簡単に解説していきます。

+more read

a要素のhref属性(リンク)を無効にする

よく使うJavaScript小技メモ。

a要素のクリック時にJavaScriptのイベントハンドラ(onclick=”hogehoge();”)を呼びたい。
でもa要素にはリンクとなるhref属性がないと、ブラウザによってはhoverが効かない問題が発生します。

そんなときはhrefを無効にして、クリック時の動作をJavaScriptイベントハンドラに割り当てます。

<a href="javascript:void(0)" onclick="hogehoge(); return false;">クリック時にhogehoge()を呼ぶ</a>

とっても簡単。href属性にはjavascript:void(0)を設定しましょう。

+more read

Page 2 of 3123
CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top