サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
2024年ランキング
dentaq.hatenablog.jp
jQueryの.offset() を使うと正確なロケーションが取得できないケースがあるようです。 その場合はネイティブなJavaScriptの.offsetを使うと解消され、正しい挙動となります 改善前 $('.anc').click(function(e){ e.preventDefault(); var offset = $('#targetId01').offset(); var y = offset.top; scrollTo(0,y); }); }); 改善後 $('.anc').click(function(e){ e.preventDefault(); var y = document.getElementById('targetId01').offsetTop; scrollTo(0,y); }); });
ウィンドウの高さを取得し、その高さを#container要素に適用したい時などは以下のように書きます。 JS(jQuery) var wH = $(window).height(); //alert (wH); $(function(){ $('#container').css('height',wH+'px'); }); HTML <html> <head> </head> <body> <div id="container"> 本文本文本文 </div> </body> </html> さらにウィンドウがリサイズされたときに適用する場合 var wH = $(window).height(); $(window).resize(function(){ $('#one_column #container').css('height',wH+'px'); });
例えば <a class="btn">クリック！</a> というHTMLに対し、 .btn { @include css3-button(red); } というcssを書くと、 このような赤いボタン、 .btn { @include css3-button(blue); } と書くと、 このように青いボタンが出る、 というmixinです。 引数にはどのような色も指定でき、その色をベースにしたcss3ボタンを瞬時に作ってくれます。 scssの@mixin、便利！ @mixin css3-button($base-color) { /* IE8以下対策でベースカラーを背景色に指定 */ background: $base-color; /* 角丸を3px指定(compassのincludeでブラウザ間の差異を吸収) */ @include border-radius(3px); /* box-
MMORPGブラウザゲームにて地図を斜めから見た地図をHTML上にどう描くかについて、 JavaScriptによる描画ロジックと三つの実現方法(css3,canvas,SVG)のどれが一番いいのかについての一考察です。 HTMLでグラフィックスの描画を実現する技術として今現在、実用的なものとしてcss3, canvas, SVGがあります。 全ての方法でデモを作ってみましたので、先にデモから見てもらいましょう。 css3で実装する これが当然、一番簡単、軽量、お手軽で、ベストなソリューションです。 しかし、css3の実装状況がまちまちであり、使用可能なブラウザを選ぶので、その点だけ注意が必要です。 canvasで実装する マップの描画のみであれば、一番簡単でなじみやすい方法かもしれません。 しかし、地図の番地をクリックしてどこか別のページに移動するとかが必要な場合（ほとんどの場合必要）、
あくまで対象ブラウザがIE8以上、FireFox,Chromeの場合の手段ですが。 cssのzoomプロパティって、Chromeでも有効なんですね。 IEの独自実装かと思っていました。 背景画像を敷いたdiv要素に zoom: 0.75; と指定すると、Chromeでも対象要素が75%に縮小されて表示されました。 しかし残念ながらFirefoxでは無効のようで、100%の大きさでブラウザに表示されました。 となると頼りになるのはcss3ということになります。 私の場合以下のように指定してあげることでfirefoxでもzoom: 0.75;と同様の効果を得ることができました。 zoom: 0.75; -moz-transform: scale(0.75,0.75) translate(-23px,-23px); ２行目〜４行目は,firefoxで、transformプロパティのscale(拡
どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」。 ・prev/nextボタンを付ける ・画像と画像の間に12pxのpaddingを挿入する ・画像の幅、高さを設定する ・画像が切り替わる間隔(ミリ秒) ・1画面に表示させる画像の数や画像の総枚数を設定する などの細かいオプション設定は下記のように引数に記述します。 $(function() { $('ul#user_interaction').carouFredSel({ prev: '#prev', //id="prev"をもつDOM要素にprevを設定 next: '#next',//id="next"をもつDOM要素にprevを設定 padding: [0 12px 0 0],//画像と画像の間に12pxのpaddingを挿入 items: { visible: 1,//1画面に表示させ
slidesという画像をスライド表示させるライブラリを、スマートフォン向けにフリック（指で左右に動かす）操作を可能になるよう改造してみました。 「slides」本体は下記にて入手可能です。 SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 1)424行目あたりに、下記のように左右のフリック操作を感知させるイベントリスナーを追加します。 $(function() { var box = $("#slides_cont")[0]; box.addEventListener("touchstart", touchHandler, false); box.addEventListener("touchmove", touchHandler, false); b
$(function(){ $('#wrapper:not(body #wrapper)').css({display:'block',opacity:'0'}); $('#wrapper:not(body #wrapper)').animate({opacity:'1'},500); $('body #wrapper').css({display:'block',opacity:'0'}); $('body #wrapper').animate({opacity:'1'},500); $('a').click(function(){ var pass = $(this).attr("href"); $('#wrapper').animate({opacity:'0'},5,function(){ location.href = pass; }); return false; }); })
touch系のイベントを使って、「touchしたらボタンを光らせて、離したら消える」 といった実装を行いたい場合。 cssの:hover疑似クラスは一応使えますが手を離しても色が戻らなかったので、こんな感じでtouch系のイベントで実装してみました。 $(function(){ var start = "touchstart"; var end = "touchend"; $(".touchHover").bind(start,function(){ $(this).addClass("touchstart"); }); $(".touchHover").bind(end,function(){ $(this).removeClass("touchstart"); }); }); <a href="#" class="touchHover">ボタン</a> a{background:#cc
高性能なカウントダウンライブラリ「jQuery Countdown」。 (http://keith-wood.name/countdown.html) 「僕は秒まで表示させたい」 「いや私は日付けだけの表示でいい」 「cssで細かくスタイル付けしたいのでhtmlタグを挿入したい・・・」 「カウントダウン完了後にこういうメッセージ入れたいんだけど...」 ・・・などなど、これらのわがままな要求もオプションで簡単に設定可能である。 下記の例をみていただいた方が早いだろう。 この例では、カウントダウン終了時刻をDOM要素から取得(getElementById)し、 カウントダウン終了日時(liftoffTime)までのカウントとダウンを 「日 時間 分 秒」の形式で出力させている。 getElementByIdで要素を取得する場合全てString(文字列)型で取得されるのかと思っておりましたが、
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-precomposed.png というファイル名でアイコンを置けば、iOS機器では、上記link要素のタグの記述は不要です（自動でapple-touch-iconを認識してくれます） ただし、Androidでは、アイコンを正しく置くだけでは不十分で、上記link要素のタグの記述が必要
リファラー（参照元）を取得して、例えば検索エンジンで 「電卓」と検索して訪れた人はcalc.htmlに、 「デンタク」と検索して訪れた人はdentaku.htmlに、 「dentaq」と検索して訪れた人はabout.htmlに、それぞれ飛び先を変更したいという場合。 var keywords= [ { id:'01', keyword: '電卓', url :'calc.html' }, { id: '02', keyword: 'デンタク', url :'dentaku.html' }, { id: '03', keyword: 'dentaq', url :'about.html' } ]; function load(){ //リファラー(参照元)情報を取得 var ref = document.referrer; //0〜キーワード数(keywords.length)の間ループ処理
従来のロールオーバーは 1)cssのa⇔a:hoverで背景を切り替える 2)JavaScriptでonmouseout⇔onmouseoverで背景もしくはimg srcを切り替える の二つの方法で実装可能だが、これをそのままスマートフォン向けに実装すると、下記のような不具合が起きる。 ・ボタンの色が変わったまま戻らない ・ブラウザのバックボタンで戻った際に色がノーマル時に戻っていない （ホバー時のままになっている） これは現状、cssではどうにもならない。Javascriptでonclick系のイベントハンドラの代わりにontouch系を用い、下記のように対応するほかない。 最後のwindow.addEventListenerはブラウザのBackボタンで戻ったときにrolloverで変化した画像もしくは背景色が残っていた場合クリアするための記述。 function smartPhone
大学時代の旧友、音ごはんのもともとこさんとひょんなことから、再会しまして。 久々の再会の第一印象は、 頑張り過ぎて少し痩せてしまった？ と心配してしまうくらいに、 歌やバンド、難病チャリティー活動、地域活性化と、東奔西走し、頑張っている姿を知り、強く感銘を受けた次第です。 なぜここまで共感を持てたか？と考えると 子育て真っ最中 社会人経験者 家庭を愛するパパママ などなど、考えれば考えるほど、共通点が多く、これは協力しない理由が無い。 もとこさんの面白いのは、自然体で社会派なところと個人的には思ってまして。 むしろ社会と積極的に交わる触媒として音楽という手段を選択しているようなところもあり。 僕なんか、自然体だと社会から逃避した、堕落した場所で音楽をしようとするんです。 放っておくと、レイチェル・スウィートのIt’s so different here的な遠い国の隔離された世界などに、没入
iPhone/AndroidではJavaScriptのwindow.orientation;を取得できる。 jQueryスタイルでの記述方法を用いると、下記のような大変シンプルなコードでデバイスの縦持ち（portrait）と横持ち(landscape)でcssの切り替えが実装可能である。 function switchOrientation(){ var orientation = window.orientation; if(orientation == 0){ $("body").addClass("portrait"); $("body").removeClass("landscape"); }else{ $("body").addClass("landscape"); $("body").removeClass("portrait"); } } $(document).ready(
このページを最初にブックマークしてみませんか？
『ハリーかつき・旧技術ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
