タグ: jquery

ドロワーメニューfixedでヘッダーもfixedなとき

Posted on 2016-03-09

Slidebars使っときーというメモダウンロードすると、examplesフォルダがあるんで、その辺よー見ときーオレfixed-positions.htmlにほぼ答えがあるあとはanimation-styles.htmlも見ときー

IE9対応でwindow.matchMediaが使えない時

Posted on 2016-03-07

完全にこの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');
    }
  });
});

$(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系のヤツでレスポンシブでもなんとかしたい

Posted on 2012-10-03

lightbox系の画像拡大のコンテンツがあるのをレスポンシブ的な感じでやった時、

最初、Lightbox 2で試してみたけど、

かなり大きなサイズの画像だと、スマートフォンのブラウザいっぱいいっぱいになって、どうしようもなかった。
色々試した結果、軽さもあって、ColorBoxがいいかなと。NETEYE Touch-Galleryは、なんかバギーな印象で今回は見送った。ColorBoxもSettingsがデフォルトのままだと、Lightbox2のデフォルト同様いっぱいいっぱいになってあわわ状態ColorBoxのSettings見て、


        $('#hoge').colorbox({maxWidth: '98%'});

$('#hoge').colorbox({maxWidth: '98%'});

とかでもスクロールはするんだけど、やはり大きい。うーむ。デベロッパーツールと格闘しながら、colorbox.cssの.cboxPhotoの


        max-width:none;

max-width:none;

を


        max-width: 98%;

max-width: 98%;

とかにしたら、だいたい希望通りになった。あとは微調整して。ターゲットブラウザでの動作とかちゃんと調べてご利用は計画的に。

制作実績のご紹介（生活道具のお店アトリエ・トア様）

Posted on 2009-11-03

お客さまに丁寧に道具を見立てるという呉服屋さんのようなスタイルのお店
アトリエ・トア｜生活道具の店
こちらのWebサイトの制作のお手伝いをさせて頂きました。

こちらのお仕事も、Gallery+Design studio SYUの前崎さんから依頼を受けました。
写真も前崎さん撮影です。上手ですね。

制作実績のご紹介（独華陶邑様）

Posted on 2009-09-27

すっかりこのBlogの存在を忘れてた訳でもありません。なんとか生きてます。
とっても久しぶりに投稿してみます。

独華陶邑（どっかとうゆう）｜京都・丹波の山奥にある独華陶邑。陶芸家の石井直人と作家石井すみ子が綴る、日々の暮らしと手仕事。
こちらのWebサイト制作のお手伝いをさせて頂きました。

こちらは、Gallery+Design studio SYUの前崎さんから依頼を受けました。

陶芸家のご主人石井直人さんと、生活道具などを職人さんと制作される妻の石井すみ子さんが、京都・丹波の山奥で農家を移築した茅葺き屋根の古民家にて生活、創作活動をされているとのこと。
私の理想とする生活そのものですね。

『この京都・丹波の地から創り出される作品と、生活の発信』を表現するために、石井直人さん直筆のイラストの上にウインドウが開いて展開する。
という手法にしました。

技術的な話になっちゃうんですが、
上記を表現＆メンテナンス性を考えて、iframeを多様しています。
検索エンジン経由で直接末端ページにアクセスして頂いた場合、トップページへのリンクを出力するようにしたりの配慮をしています。

京都で行ってみたい場所がまた増えました。

【幅とか決め打ち】jQueryを使った、サイドからスライドして開閉するメニュー

Posted on 2009-02-11

またも汎用性がないシリーズ
基本的にやってることは、toggleだけというシンプルというか、ありきたりでつまらんモノ。

HTML


<div id="mapNav">
    <dl class="closed">
        <dt id="btn">メニュー開く</dt>
        <dd>
            メニューの中身をHTMLで書いてね
        </dd>
    </dl>
</div>

<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("メニュー開く");
        }
    );
})

$(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;
}

#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;

}

サンプル
jQueryを使った、サイドからスライドして開閉するメニュー Sample

jQuery1.3リリースと注意点とかのメモ

Posted on 2009-01-15

コリスさんで発見
[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

Posted on 2009-01-13

自分用のメモ
グローバルナビにCurrentというクラス名を付加するjQuery
第2階層であることが前提の汎用性なしjQuery


$(function(){
    $('#gNavi li a').each(function(){
        var url = document.URL.split('/');
        if(url[3]){
            $('[href*='+url[3]+']').parent().addClass("Current");
        }
    });
})

$(function(){

$('#gNavi li a').each(function(){

var url = document.URL.split('/');

if(url[3]){

$('[href*='+url[3]+']').parent().addClass("Current");

}

});

})

jQueryを使った画像のロールオーバー

Posted on 2008-12-09

まさに車輪の（以下略）なんですが、

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);

/**

* 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】

1
2
3
4

例）
【fuga.png】→【fuga_o.png】
ロールオーバーするimgタグもしくはinputタグにclass="Over"を付ける

例） <img src="fuga.png" alt="" /> ↓ <img src="fuga_o.png" class="Over" alt="" />

1
2
3
4
5
6

例）
<img src="fuga.png" alt="" />
↓
<img src="fuga_o.png" class="Over" alt="" />

_oの画像にclass="Over"としててもチラチラになることはありません。
わかる人には、わかると思います。
ライセンス表記なくて、使用する時に迷ったりすることがよくあるので、
「自由に使ってくださいな」という気持ちで、コメント書いてます。
いつもは、こんなコメント書かないから、書き方正しいかどうかもわかりませんw
ここ間違っとるぞ！とかこここうやったらもっとスマートやぞ！とかあったらよろしく。
2010年1月10日追記：匿名さんのご指摘通り、jQueryの以前のバージョン用で書いてましたので、not部分の@は必要ありません。

jQueryを使った画像のロールオーバー Sample