レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
【jQuery】IE8以下でもCSS3のbackground-sizeプロパティが使えるようになるプラグインjquery.backgroundSize.js | Rapid Progress
IE8以下でもCSS3のbackground-sizeプロパティが使えるようになるプラグイン「jquery.backgroundSize.js」についてです。最近縦長＋背景画像が横幅100%になるページを作る機会が増えました。 そんな時便利なのがCSS3から登場した「background-size」というプロパティですが、IE8以下は当然（？）対応していません。 が、非常に有難いことに、「jquery.backgroundSize.js」というプラグインを用いることでIE8以下でもbackground-sizeプロパティが使えるようになります。 1.background-sizeプロパティについてちょっとだけ CSS3から背景画像の幅と高さを拡大・縮小するプロパティが追加されました。それがbackground-sizeプロパティです。なんか文章で説明しても伝わりにくいと思うのですが、とに
【jQuery】拡大・縮小のアニメーションをする例 at softelメモ
問題 jQueryプラグインとか無しで、拡大・縮小できる？ 答え 拡大・縮小します。jQueryプラグイン無しで、拡大・縮小します！ jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。 それならば、ほぼ表示に影響しないプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して拡大・縮小などのプロパティの指定に使ってはどうかというアイデアで作ってみました。 前回、回転でz-indexを使いました。違う例をやってみたいので、今回は、拡大・縮小時ならほぼ気づかれない、paddding-rightを利用してみます（もちろんz-indexでもよいです）。 //ここでは表示上ほぼ気づかれないpadding-rightをアニメーションさせます $('#sample20130315').animate({paddingRight
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
