jQuery window の幅と高さを正確に出す方法
jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。 何とかなったので、解決方法をφ(..) jQueryで、ウィンドウ幅と高さを取得するには、 var w = $(window).width(); var h = $(window).height(); こんなかんじですが、一部のブラウザではスクロールバーの有り無しを間違えて、その分を加味した結果を返してくるようです。もしかしたら、もっととんでもないロジックなのかもしれませんが… そこで、元々のjavascriptが持っているコマンド、innerWidthとinnerHeightを使って値を取得することにすします。 var w = window.innerWidth ? window.
iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法 - Qiita
window.addEventListener("resize", function() { alert("ウインドウがリサイズしました。"); }) Mobile Safari (iPhone 6s、iOS 9.1.2)で最初のスクロールをしてみると、縦持ち・横持ちを切り替えていないのにリサイズした旨のアラートが表示されます。 何故こんなことが起こるのか？ iOS 8からスクロール時にアドレスバーが自動で小さくなる仕様となりました。これにより、アドレスバーが小さくなった分だけウインドウサイズが大きくなったと見なされ、リサイズイベントが発生するようになったのです。ウインドウサイズのことを考えれば当然の挙動なのですが、「スクロールしただけでリサイズイベントが発生する」というのはデスクトップでのブラウザに慣れている人であれば違和感を感じるのではないでしょうか。 意図したとおりにリサイズイベント
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。 コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。 詳細は以下から。 背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ ※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。 ※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。 Pure CSS Cinema Effe
Pretty Diff - The difference tool
☰Application Menu ⛶Toggle Fullscreen Pretty Diff - Austin Cheney Access the old Pretty Diff tool. Written 12 August 2023 I lived in Afghanistan for nearly 2 years for two separate US Army deployments. I write this just over 14 years after first stepping foot in Afghanistan. Travel Living and Waiting On the first Afghanistan deployment I was constantly traveling, and travel in Afghanistan was rough
『海外のwordpressのテンプレートを日本語対応にする』
この使えない人が、調べものをした時に参考にした情報を書き殴るメモ。 つまり、他人には使えない情報が満載のチラ裏です。 海外のwordpressのテンプレートを日本語対応にする -------------------------------------------- １.見出しなどに日本語を入力すると表示されない。 CufonつーHTMLのテキストを好きな書体で表示させることができる仕組みを使っているテンプレートが多いようです。 CufonはフォントファイルをJavaScriptファイルに変換し、そのJavaScriptファイルでテキストを置き換えしています。 タイトルだけにCufonを利かすならともかく、ブログ記事のタイトルなどのいろんな文字に対応するとなると日本語フォントは文字の種類が多すぎるので使えません。 Cufonの無効化が管理メニューにあればそれで日本語表記できるかもしれません
このくらいまでならjsで三項演算子使ってもいいよね、っていうパターン(個人的に) - Qiita
初投稿なのでちょっと読み物っぽく三項演算子について書いてみます。（たぶん内容的にはたいしたことは書いてません。） みなさん三項演算子って使いますか？僕はこいつがけっこう好きで好んで使っています。 僕が使うパターンとしてはだいたい２パターンだけに限られています。 僕がよく使うパターン１：ふつうの三項演算子による式 var ans = ( ( Math.random() * 100 ) > 50 ) ? 'larger' : 'smaller';
2点間の距離を計算する関数
つづいて、2点間の距離を計算する関数です。 cc_huu_tools_bp_20081024.calcDistance = function(x1,y1,x2,y2) { var a, b, d; a = x1 - x2; b = y1 - y2; d = Math.sqrt(Math.pow(a,2) + Math.pow(b,2)); return d; }; ピタゴラスの定理を利用して、距離を求めます。 ピタゴラスの定理は「直角三角形の直角を挟む2辺の2乗の和は斜辺の2乗に等しい」です。 なので、x座標の差の2乗とy座標の差の2乗を足した値のルートをとって、返します。
JavaScriptプログラミング講座【タッチスクリーン操作について】
// タッチイベントに対応している if(window.TouchEvent){ // イベントリスナーに対応している if(document.addEventListener){ // ------------------------------------------------------------ // タッチすると実行される関数 // ------------------------------------------------------------ function TouchEventFunc(e){ // TouchList オブジェクトを取得 var touch_list = e.changedTouches; // 中身に順番にアクセス var i; var num = touch_list.length; for(i=0;i < num;i++){ // Tou
2つのDateオブジェクトが同じ日か否かを判定する - monjudoh’s diary
date1 = new Date('Tue, 19 Feb 2008 02:26:57 GMT'); date2 = new Date('Tue, 13 Feb 2008 02:26:57 GMT');// date1と日付が違う date3 = new Date('Tue, 19 Feb 2008 02:36:57 GMT');// date1と時刻が違う new Date(date1.toDateString()).getTime() == new Date(date2.toDateString()).getTime(); //false new Date(date1.toDateString()).getTime() == new Date(date3.toDateString()).getTime(); //true 一応、IE、Firefox、Operaで試したけどtoDateS
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」:phpspot開発日誌
Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 2012年04月12日- Retina.js | Retina graphics for your website Retinaディスプレイ判別で自動で高解像度画像を出しわけ可能な単独ライブラリ「Retina.js」 <img src="/images/my_image.png" /> という画像タグがあったとするとスクリプトがサーバ上の"/images/my_image@2x.png"というファイルを自動でチェックして存在すれば置き換えてくれます。 インストールはretina.jsを読み込むだけというお手軽さがいいです。 単に高解像度で出したい部分だけファイルを用意して置いてあげればよいというのはお手軽ですね。 <script type="text/javascript" src="/s
Adobe Photoshop CS3自動化作戦
このページはAdobe Systems（アドビシステムズ）社のPhotoshop CS3をJavaScriptによって自動化運用するためのサンプルスクリプトを掲載しています。サンプルはMacPro (Xeon 3GHz/Intel Mac) 上で動作させたものです、このため、PowerPC搭載MacやWindows XP/Vista上での動作とは異なる可能性があります。あらかじめ、ご了承下さい。 Photoshop CS3は基本的には以前のCSからの延長上にあります。このため、JavaScriptのコアオブジェクト、Adobeファイルオブジェクトに関しては他のAdobeソフトと同じです。つまりInDesign CS～CS3、AfterEffects 6.5～7.0、Illustrator CS2～CS3、Bridgeで作成された一部のコードは、そのまま動かす事ができます。Photoshop
JavaScriptのタイマー処理 setTimeoutとその活用 - 犬も歩けば棒も歩く
以前id:amachangさんのブログでJavaScriptのsetTimeoutの活用方法が掲載されていたのですが、当時はいまいち意味が分かりませんでした。その補足というのはあつかましいですが、簡単な解説と応用をのせておきます。なお、setTimeoutだけに限らず、JavaScriptのタイマー処理に関する話になります。 setTimeoutのはなし setTimeoutは指定した時間後に、指定した関数を実行してくれる関数です。JavaScriptで数秒間処理を待ちたい場合、最も単純なものに次のような方法があります。 for(var i = 0 ; i < 10000 ; i++) for(var j = 0 ; j < 10000 ; j++); //何もしない これは単に処理を重くしているだけで、ほとんどのブラウザでは、このように何回もループが続くとエラーが出ます。これをエラーが出
JavaScript basic samples
┣ 文字列のスクロール（テキストボックス） ┣ 文字列のスクロール（ステータスバー） ┣ 1文字ずつ表示（テキストボックス） ┣ 1文字ずつ表示（ステータスバー） ┣ 1文字ずつ表示（テキスト） ┣ マウスを重ねると説明を表示（テキストボックス） ┣ マウスを重ねると説明を表示（ステータスバー） ┣ マウスを重ねると説明を表示（テキスト） ┣ マウスを重ねると説明を表示（ポップアップ） ┣ マウスと共に移動するイメージ ┣ 入力できないテキストエリア ┣ クイックリンク ┣ クイックリンク（フレーム形式） ┣ 複数のフレームページを同時に変更する ┣ プロンプトをパスワードの入力に利用 ┣ リンクボタン ┗ リロードボタン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Swiper - Most Modern Mobile Touch Slider
GitHub - yubinbango/yubinbango
GitHub - thebird/Swipe: Swipe is the most accurate touch slider.
Aptana.com