2011-01-01から1年間の記事一覧
今更ですが、ブラウザのアクションを中断させる方法。 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…
Apple Touch Iconsのhtmlおよび画像の設定は下記のように設定するのが良いでしょう。 例）アイコンの画像を/sp/common/img/ディレクトリに置いた場合の記述例●html <link href="/sp/common/img/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed"> ●iconを置く場所 ルートディレクトリにapple-touch-icon.pngまたは apple-touch-icon-preco</link>…
Apple Touch Iconsのhtmlおよび画像の設定は下記のように設定するのが良いでしょう。例）アイコンの画像を/sp/common/img/ディレクトリに置いた場合の記述例●html <link href="/sp/common/img/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed"> ●iconを置く場所ルートディレクトリにapple-touch-icon.pngまたはapple-touch-icon-precompo</link>…
スマートフォンサイトとPCサイトを振り分け、さらにスマートフォンのユーザがPCサイトを見たい場合、再度スマートフォンサイトへのリダイレクトを防ぐという設定をしてみました。 /にPCサイトのindex.html、 /sp/にスマートフォンサイトのindex.htmlがある場…
スマートフォンサイトとPCサイトを振り分け、さらにスマートフォンのユーザがPCサイトを見たい場合、再度スマートフォンサイトへのリダイレクトを防ぐという設定をしてみました。/にPCサイトのindex.html、/sp/にスマートフォンサイトのindex.htmlがある場合…
Android2.1の端末ではShift-JISで書かれたXMLは$.ajaxでパースされません。そこで、XMLの文字コード→UTF-8 HTMLの文字コード→Shift-JISに設定すればOK！XMLの文字コードをHTMLと揃えてShift-JISにしなければ・・・と考えるとはまります。
Android2.1の端末ではShift-JISで書かれたXMLは$.ajaxでパースされません。そこで、XMLの文字コード→UTF-8HTMLの文字コード→Shift-JISに設定すればOK！XMLの文字コードをHTMLと揃えてShift-JISにしなければ・・・と考えるとはまります。
スマートフォンの場合⇔PC/タブレットの場合での分岐の例です。 iPadやAndroidタブレットではPC向けサイトを表示させたい用途です。 $(function(){ var ua =navigator.userAgent; if (ua.indexOf('iPhone') > -1 || ua.indexOf('iPod') > -1 || (ua.indexOf('…
スマートフォンの場合⇔PC/タブレットの場合での分岐の例です。iPadやAndroidタブレットではPC向けサイトを表示させたい用途です。 $(function(){ var ua =navigator.userAgent; if (ua.indexOf('iPhone') > -1 || ua.indexOf('iPod') > -1 || (ua.indexOf('A…
「class名"netKakaku"を子要素に持たない場合、spanクラス名priceにnoNetKakakuというクラスを付加する」 (クラス名noNetKakakuをcssで一行分マージンを指定) という、わけあってちょっと複雑な方法で実現しました。 本当に自分参照用のメモなので、詳しく知…
「class名"netKakaku"を子要素に持たない場合、spanクラス名priceにnoNetKakakuというクラスを付加する」(クラス名noNetKakakuをcssで一行分マージンを指定)という、わけあってちょっと複雑な方法で実現しました。本当に自分参照用のメモなので、詳しく知り…
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src=jquery.lazyload.mini.js></script> <script type="text/javascript">//</head></html>
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src=jquery.lazyload.mini.js></script> <script type="text/javascript">//</head></html>
例えば、このようなhtmlがあります。 <p> <a href="http://www.google.co.jp/"> <img src="banner_a.jpg" /> </a> </p> 上記htmlでは、「banner_a.jpg」という画像をクリックすると、Google日本のサイト(http://www.google.co.jp)に飛びます。 こういう記述がサイト内に複数個所あり、すでにハードコーディング済みです。 しかし、後に…
$(function(){ $("img.rollover").mouseover(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2")); }…
$(function(){ $('ul.footer li a').each(function(){ var Href = $(this).attr('href'); $(this).parent().click(function() { window.open(Href,'_self'); return false; }); }); });
例えば、このようなhtmlがあります。 <p> <a href="http://www.google.co.jp/"> <img src="banner_a.jpg" /> </a> </p> 上記htmlでは、「banner_a.jpg」という画像をクリックすると、Google日本のサイト(http://www.google.co.jp)に飛びます。こういう記述がサイト内に複数個所あり、すでにハードコーディング済みです。しかし、後にな…
$(function(){ $("img.rollover").mouseover(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")); }).mouseout(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2")); }…
音楽クリエイターからWebクリエイターに転身あるいは同時進行中の人、私も含め多く散見される。こういう人たちはexpress（表現）+ communication（伝達）が重要なのであって、その二つを実現する手段＝触媒として、たまたま音で行うことを選んだというだけの…
Linuxでしか作業できない、高価なAdobeのツールが買えない場合、etc...表題のような疑問を抱くケースは結構あると思う。私も仕事場でこそAdobe CSを使えているが、自宅では使用できない。 しかし今はオープンソースの時代、フリーで使用可能な代替ツールはた…
Web アプリケーションをインストールしたり、マイクロソフトの Web プラットフォームをアップデートする際に、正しく動作するための設定を自動で行ってくれる。例えばVisual Studio 2010 Expressを動かす場合.Net framework等がインストールされている必要が…
