FAQのページを作成する場合などで、JavsScriptをどう活かすか考えてみましょう。たとえば、トップの質問一覧とアンカーリンク、飛び先のid名を自動で生成し、 クリックするとその質問のアンカー位置に飛ばせるようにすれば、 更新も簡単。質問と解答を一回、…

FAQのページを作成する場合などで、JavsScriptをどう活かすか考えてみましょう。たとえば、トップの質問一覧とアンカーリンク、飛び先のid名を自動で生成し、クリックするとその質問のアンカー位置に飛ばせるようにすれば、更新も簡単。質問と解答を一回、追…

<ul class="imgGallary"> <li><img src="image/01.jpg" width="200" height="260"> <span class="caption">海辺の風景</span></li> <li><img src="image/02.jpg" width="230" height="260"> <span class="caption">山の風景</span></li> <li><img src="image/03.jpg" width="266" height="260"> <span class="caption">川の風景</span></li></ul>

リファラー（参照元）を取得して、例えば検索エンジンで 「電卓」と検索して訪れた人はcalc.htmlに、 「デンタク」と検索して訪れた人はdentaku.htmlに、 「dentaq」と検索して訪れた人はabout.htmlに、それぞれ飛び先を変更したいという場合。 var keywords…

リファラー（参照元）を取得して、例えば検索エンジンで「電卓」と検索して訪れた人はcalc.htmlに、「デンタク」と検索して訪れた人はdentaku.htmlに、「dentaq」と検索して訪れた人はabout.htmlに、それぞれ飛び先を変更したいという場合。 var keywords= […

<ul class="imgGallary"> <li><img src="image/01.jpg" width="200" height="260"> <span class="caption">海辺の風景</span></li> <li><img src="image/02.jpg" width="230" height="260"> <span class="caption">山の風景</span></li> <li><img src="image/03.jpg" width="266" height="260"> <span class="caption">川の風景</span></li></ul>

今更ですが、ブラウザのアクションを中断させる方法。 IE6〜モダンブラウザまで対応します。 $("a").click(function(e) { e.preventDefault(); }); preventDefault()を使うことで、下記のようなaタグをクリックしてもページ遷移しないようになる。 <a href="http://d.hatena.ne.jp/dentaq/">とあるフ</a>…

今更ですが、ブラウザのアクションを中断させる方法。IE6〜モダンブラウザまで対応します。 $("a").click(function(e) { e.preventDefault(); });preventDefault()を使うことで、下記のようなaタグをクリックしてもページ遷移しないようになる。 <a href="http://d.hatena.ne.jp/dentaq/">とあるフロ</a>…

いっこ前のエントリと同じ実装をjQueryを使わずにJSだけで実現するには、下記のようにします。 html･･･class名に"popup"を記述 <a href="caution.html" class="popup">ご登録いただくにあたってのご注意</a> javascript if (window.addEventListener) { /* Firefox */ window.addEventListener("load",…

いっこ前のエントリと同じ実装をjQueryを使わずにJSだけで実現するには、下記のようにします。html･･･class名に"popup"を記述 <a href="caution.html" class="popup">ご登録いただくにあたってのご注意</a> javascript if (window.addEventListener) { /* Firefox */ window.addEventListener("load", …

例えば会員登録画面で、「ご登録いただくにあたってのご注意」の画面を幅800pxでポップアップ表示させたい場合。html･･･class名に"popup"を記述 <a href="caution.html" class="popup">ご登録いただくにあたってのご注意</a> javascript $(function(){ $('a.popup').click(function(){ window.open(thi…

例えば会員登録画面で、「ご登録いただくにあたってのご注意」の画面を幅800pxでポップアップ表示させたい場合。html･･･class名に"popup"を記述 <a href="caution.html" class="popup">ご登録いただくにあたってのご注意</a> javascript $(function(){ $('a.popup').click(function(){ window.open(thi…

<div class="boxl"> 左カラム </div> <div class="boxr"> 右カラム </div> こうしたHTMLで、Firefoxだけ、float:leftさせた2つのボックスが重なる（右カラムが左にくっつく）場合がある。これは、右カラムのボックスに margin:0 0 0 auto; を入れて回避する。 div.boxl{ float:left; width:100px; } div.boxr …

<div class="boxl"> 左カラム </div> <div class="boxr"> 右カラム </div> こうしたHTMLで、Firefoxだけ、float:leftさせた2つのボックスが重なる（右カラムが左にくっつく）場合がある。これは、右カラムのボックスに margin:0 0 0 auto;を入れて回避する。 div.boxl{ float:left; width:100px; } div.boxr {…

$(function(){ $("div#tabs1").css("display","block"); $("div#tabs2").css("display","none"); $("div#tabs3").css("display","none"); $("#tab_a").click(function(){ $(this).siblings().removeClass("current"); $(this).addClass("current"); $("div#t…

$(function(){ $("div#tabs1").css("display","block"); $("div#tabs2").css("display","none"); $("div#tabs3").css("display","none"); $("#tab_a").click(function(){ $(this).siblings().removeClass("current"); $(this).addClass("current"); $("div#t…