jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方 – bl6.jp
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
jQueryのif文を使ってタグやクラス名によって条件分岐するやり方 – bl6.jp
jQueryで普通にif文を使った条件分岐のやり方です。指定したタグやクラス名があった場合や、子要素にそれがあったりした時の処理の振り分けなんかをやりたかったんですが、思ったようにならなかったので調べてみました。で、いくつか見つかったのでメモがてら記事にしてみることにします。 条件分岐の時に使えそうなメソッド 条件によって処理を振り分けることはプログラムを書く上でとても重要な感じがするので、使う頻度も結構ありそうな感じです。 hasClassを使ってクラス名を指定する hasClassメソッドを使えばクラス名を取得することができます。これを使ってsampleというid名の中にtextというクラス名がある時とない時の処理の振り分けてみます。 JavaScript $(function(){ if($('#sample').children().hasClass('text')) { $('p
レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox」 – bl6.jp
とても有名なプラグインですが、今まで使ってみたことがなかったので試してみました。Lightbox風に画像をポップアップして表示するjQueryのプラグインです。以前紹介したColorBoxに似たような感じです。こちらのfancyBoxはバージョン2になってからレスポンシブになっているみたいです。その他にもヘルパーを使って拡張機能なんかも色々つけれるのでとてもバリエーション豊な印象を受けました。ということで適当なサンプルも作ってみましたので、以下使い方と合わせてどうぞ。 [ads_center] 使い方 以下のURLからファイルをダウンロードします。 fancyBox – Fancy jQuery Lightbox Alternative jQuery本体とCSS、JSファイルを読み込みます。 <link rel="stylesheet" type="text/css" href="jque
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
