blog書くまでもないけど・・・。jQueryは既に世に出て結構時間が経っている。
検索して引っかかるのが今のバージョンで動くとは限らない。んでjQuery1.12で動かなかったセレクタの例↓
$('a[href^=#]').click(function() {
こうが正しい↓
$('a[href^="#"]').on('click',function(){
タグ: jquery
ドロワーメニューfixedでヘッダーもfixedなとき
Slidebars使っときーというメモダウンロードすると、examplesフォルダがあるんで、その辺よー見ときーオレfixed-positions.htmlにほぼ答えがあるあとはanimation-styles.htmlも見ときー
IE9対応でwindow.matchMediaが使えない時
完全にこのBlogのこと忘れてた。講座でBlogはーとか言ってて全く書いてないのもアレなんで久々のIE9対応、window.matchMediaも使えない。やり方忘れとったんでメモメディアクエリで表示切り替えしてる部分があると思うので
まあ下記のようなイメージで
$(function() {
$(window).on('load resize', function(){
if ( $('#mdContent').is(':visible') ) {
console.log('md');
} else if ( $('#smContent').is(':visible') ){
console.log('sm');
} else if ( $('#xsContent').is(':visible') ){
console.log('xs');
}
});
});
しかし、タスクランナーとかな慣れきってたのか、直にcssとかゴリゴリ書くの意外と大変
lightbox系のヤツでレスポンシブでもなんとかしたい
lightbox系の画像拡大のコンテンツがあるのをレスポンシブ的な感じでやった時、
最初、Lightbox 2で試してみたけど、
かなり大きなサイズの画像だと、スマートフォンのブラウザいっぱいいっぱいになって、どうしようもなかった。
色々試した結果、軽さもあって、ColorBoxがいいかなと。NETEYE Touch-Galleryは、なんかバギーな印象で今回は見送った。ColorBoxもSettingsがデフォルトのままだと、Lightbox2のデフォルト同様いっぱいいっぱいになってあわわ状態ColorBoxのSettings見て、
$('#hoge').colorbox({maxWidth: '98%'});
とかでもスクロールはするんだけど、やはり大きい。うーむ。デベロッパーツールと格闘しながら、colorbox.cssの.cboxPhotoの
max-width:none;
を
max-width: 98%;
とかにしたら、だいたい希望通りになった。あとは微調整して。ターゲットブラウザでの動作とかちゃんと調べてご利用は計画的に。
制作実績のご紹介（生活道具のお店 アトリエ・トア 様）
お客さまに丁寧に道具を見立てるという呉服屋さんのようなスタイルのお店
アトリエ・トア｜生活道具の店
こちらのWebサイトの制作のお手伝いをさせて頂きました。
こちらのお仕事も、Gallery+Design studio SYUの前崎さんから依頼を受けました。
写真も前崎さん撮影です。上手ですね。
制作実績のご紹介（独華陶邑様）
すっかりこのBlogの存在を忘れてた訳でもありません。なんとか生きてます。
とっても久しぶりに投稿してみます。
独華陶邑（どっかとうゆう）｜京都・丹波の山奥にある独華陶邑。陶芸家の石井直人と作家石井すみ子が綴る、日々の暮らしと手仕事。
こちらのWebサイト制作のお手伝いをさせて頂きました。
こちらは、Gallery+Design studio SYUの前崎さんから依頼を受けました。
陶芸家のご主人石井直人さんと、生活道具などを職人さんと制作される妻の石井すみ子さんが、京都・丹波の山奥で農家を移築した茅葺き屋根の古民家にて生活、創作活動をされているとのこと。
私の理想とする生活そのものですね。
『この京都・丹波の地から創り出される作品と、生活の発信』を表現するために、石井直人さん直筆のイラストの上にウインドウが開いて展開する。
という手法にしました。
技術的な話になっちゃうんですが、
上記を表現＆メンテナンス性を考えて、iframeを多様しています。
検索エンジン経由で直接末端ページにアクセスして頂いた場合、トップページへのリンクを出力するようにしたりの配慮をしています。
京都で行ってみたい場所がまた増えました。
【幅とか決め打ち】jQueryを使った、サイドからスライドして開閉するメニュー
またも汎用性がないシリーズ
基本的にやってることは、toggleだけというシンプルというか、ありきたりでつまらんモノ。
HTML
<div id="mapNav">
<dl class="closed">
<dt id="btn">メニュー開く</dt>
<dd>
メニューの中身をHTMLで書いてね
</dd>
</dl>
</div>
JavaScript
$(function(){
$("#btn").toggle(
function(){
$("#mapNav").animate({
width:"175px"
},"fast");
$("#mapNav dl").removeClass("closed")
.addClass("opend")
$(this).html("メニュー閉じる");
},
function(){
$("#mapNav").animate({
width:"20px"
},"fast");
$("#mapNav dl").removeClass("opend")
.addClass("closed");
$(this).html("メニュー開く");
}
);
})
css
#mapNav {
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 400px;
background-color: #fff;
}
#mapNav dl {
overflow: hidden;
}
#btn {
top: 0;
left: 0;
display: block;
text-indent: -9999em;
}
.closed #btn {
width: 20px;
height: 53px;
background: url(./images/btn_menu_open.png) no-repeat right top;
}
.opend #btn {
width: 20px;
float: left;
height: 58px;
background: url(./images/btn_menu_close.png) no-repeat right top;
}
.closed dd {
display: none;
}
.opend {
}
.opend dl {
border: none;
}
.opend dd {
float: right;
width: 155px;
height: 400px;
overflow: auto;
}
.opend dd dl {
padding: 5px;
}
.opend dd dd {
height: auto;
margin-bottom: 5px;
}
jQuery1.3リリースと注意点とかのメモ
コリスさんで発見
[JS]jQuery 1.3 リリース、主な変更点など | コリス
Release:jQuery 1.3 – jQuery JavaScript Library
上のページのベンチマーク通りならかなりのパフォーマンスアップじゃないか！
しかし待てよ。
コリスさんとこの訳によると、
ready()は、スタイルシートがロードされるのを待つことを保証しません。
全てのスタイルシートは、スクリプトの前にページに配置してください。
まあ、ここはCSSを先に書いちゃえばいいんだな。そこまで問題ないでしょ。
Standards modeで、ページを作成してください。
Quirks Modeで動作しない周知の問題があります。
問題は、ここだな。
IE6って、xml宣言入れたらQuirks Modeだからそこ要注意じゃないっすか！
まあUTF-8とかが多いから、そのときは、IE6のときだけxml宣言外す方向性かな〜。
【汎用性なし】グローバルナビにCurrentというクラス名を付加するjQuery
自分用のメモ
グローバルナビにCurrentというクラス名を付加するjQuery
第2階層であることが前提の汎用性なしjQuery
$(function(){
$('#gNavi li a').each(function(){
var url = document.URL.split('/');
if(url[3]){
$('[href*='+url[3]+']').parent().addClass("Current");
}
});
})
jQueryを使った画像のロールオーバー
まさに車輪の（以下略）なんですが、
- jQuery使う事最近多い
- jquery_auto.js（リンク先なくなってる！）やyuga.jsを使うまでもない時もある
という事でなんとなしに書こうと思った。
こうだったらいいなと思ったこと
- シンプル
- 拡張子の文字数にかかわらずに動く
- input type="image"でも動く
コード
/**
* rollOver on jQuery
* rollOver tag:img,input
* rollOver class:Over
* rollOver FileName:*_o.*
* Last modify:20081210
* Licensed:MIT License
* @author AkiraNISHIJIMA(http://nishiaki.probo.jp/)
*/
function rollOver(){
var preLoad = new Object();
$('img.Over,input.Over').not("[@src*='_o.']").each(function(){
var imgSrc = this.src;
var fType = imgSrc.substring(imgSrc.lastIndexOf('.'));
var imgName = imgSrc.substr(0, imgSrc.lastIndexOf('.'));
var imgOver = imgName + '_o' + fType;
preLoad[this.src] = new Image();
preLoad[this.src].src = imgOver;
$(this).hover(
function (){
this.src = imgOver;
},
function (){
this.src = imgSrc;
}
);
});
}
$(document).ready(rollOver);
使い方
- 上記のスクリプトファイルを読み込ませる
例） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="path/hoge.js"></script>
- ロールオーバー画像名は、ロールオーバー前の画像に”_o”を付けたモノを用意する
例） 【fuga.png】→【fuga_o.png】
- ロールオーバーするimgタグもしくはinputタグにclass="Over"を付ける
例） <img src="fuga.png" alt="" /> ↓ <img src="fuga_o.png" class="Over" alt="" />
_oの画像にclass="Over"としててもチラチラになることはありません。
わかる人には、わかると思います。
ライセンス表記なくて、使用する時に迷ったりすることがよくあるので、
「自由に使ってくださいな」という気持ちで、コメント書いてます。
いつもは、こんなコメント書かないから、書き方正しいかどうかもわかりませんw
ここ間違っとるぞ！とかこここうやったらもっとスマートやぞ！とかあったらよろしく。
2010年1月10日追記：匿名さんのご指摘通り、jQueryの以前のバージョン用で書いてましたので、not部分の@は必要ありません。