【jQuery】要素の高さ合わせjQueryが、ページ読み込み時に効かない
この記事内で紹介する商品等のリンクには、アフィリエイトシステムが使用されています。記事内のリンクを経由して商品が購入されることで、僕に収益が入ることがあります。
ただし、メーカーから商品を提供されたり、報酬を得て記事を書くことはありません。実際に使用した商品を公平な立場でレビューしております。詳しくは、「このサイトのこと」をお読みください。
最近、すっかりブログ更新が滞っておりまして。ちゃんとした記事書かないとと思うと、なかなか最後まで書き終えられなくて、途中になってしまっている下書きが山積…
ということで、もうちょっと気軽に書いちゃぇカテゴリーも作ろうかなと。ということで、第一弾のこのカテゴリー。WEBのお仕事で、「最近知りました」…というお恥ずかしいネタを、備忘録として残していきたいと思っています。
「そんなん今さら知ったの？」「それでよくコーダー名乗ってるね」というツッコミは、どうぞご容赦ください。そして、もし僕のクライアントの方で、このブログ読んでくださっている方おられたら、どうぞ失望せずに今後もお付き合いくださいませ。w
ということで、記事のタイトル読んで、「コノヒトナニイッテイルノ？」という方。ごめんなさい、完全に業界ネタですので、すっとばしていただき、最後のおまけの、「トラックボール買い換えました」の件だけでも、読んでいってください。
スポンサーリンク
ページ読み込み時に発火させるjQueryコードには種類がある
一応、最初にお伝えしておきます
初めに申し上げおきますが、わたしjsほとんど書けません。w 基本はjsは、親切な解説サイトや備忘録サイトからコードをコピペさせていただき、使用しております。ただそれでも、これだけずっとコーディングのお仕事をしているので、それなりにはjsやjQueryの書き方もわかってきて、最近は簡単なコードであれば、自分で書いたりもします。
でも、基礎が欠落しておりますので、間違っている場合もありますので、参考にしてくださる場合は（そんな方おられないと思いますが。w）自己責任でお願いします！
縦2列で並んだリストの子要素の高さを、jQueryで合わせたかった
今回のお仕事では、縦2列で並んだリストの子要素の、高さを合わせるためにjQueryを使用しました。まぁ、CSSのflexbox使ってもよかったのですが、今回は全体の高さを揃えるというより、最後の要素だけを揃えたかったので、jQueryを使用しました。（ってか、あんなに苦戦するのなら、flexboxでCSS書き直した方が早かったんじゃないか…と今は思う。w）
今回作成したリストは、基本どの子要素も構成が同じなのですが、最後の要素だけ構成がまったく違う。でもサイズだけは他の要素（というか、2列になったすぐ左側の要素）と合わせたかった。というかその最後の要素のheightが、隣りの要素と同じにしたかったのです。というのも、配置されているコンテンツの中に、下から何pxで指定するものがあったため、height必須でした。
ということで、高さを合わせる子要素の高さをまず取得して、それを最後の子要素のcssに書き込むjQueryを書いてみました。今回は、基準となる子要素のpaddingも含んだ高さを取得したかったので.innerHeight();を使っていますが、paddingを含まない時は.height();で大丈夫です。
$(document).ready(function() { //ページを読み込んだ時
sampleheight = $("#sample_li_03").innerHeight(); //#sample_li_03の高さを取得
$("#sample_li_04").css("height", sampleheight + "px"); //#sample_li_04のheightを設定
});ウィンドウズサイズを変更して、要素の高さが変わると崩れる
すると、問題が。ウィンドウズサイズを変更した時に、要素の高さが変わっても、最後の要素に代入された高さは変更されないので、崩れるんです。まぁ、そりゃそうだ。
ということで、resizeでイベントを発火させるコードに変更し、ページが読み込まれた時のイベントには、
$(window).trigger('resize');を指定してあげることにしました。ということで、以下のようなコードに。
$(document).ready(function() { //ページを読み込んだ時
$(window).trigger('resize'); //resizeのイベント動作を行う
});
$(window).resize(function () {
sampleheight = $("#sample_li_03").innerHeight(); //#sample_li_03の高さを取得
$("#sample_li_04").css("height", sampleheight + "px"); //#sample_li_04のheightを設定
});以下のサイトを参考にさせていただきました。ありがとうございます。
http://proclass.jp/blog/?p=4619
ページ読み込み時のイベント発火のコードには、順序の違いがある
無事動作して、一安心。この後他の作業も進み、いよいよ納品締切時刻直前にテストサーバーへアップ。
「あれっ！崩れてる！！！」そうボックスの高さが取得できていないようで、下から何pxというposition:absolute;で指定している要素の位置がおかしい… ローカル環境で問題なかったのになぁ。おかしいなぁ。resizeするとちゃんと本来の位置にいくので、読み込み時に高さが取得できていないよう。
慌ててググったところ、以下の記事を発見！
https://on-ze.com/archives/1851
あざっす！助かります！そう、以下の2つは、どちらもページ読み込み時に使用するイベントの書き方で、とても似ているのですが、読み込みの順序が違うので、$(document).ready(function()だと、高さの取得などはできないらしい。なぜローカル環境では、取得できていたのだろう… w ←すみません、無知で。
$(document).ready(function() {$(window).load(function() {基礎を学んでいないゆえの、初歩的なミスなのだと思います… お恥ずかしい。
ということで、以下の記述に直し、無事動作しました。
$(window).load(function() { //ページを読み込んだ時
$(window).trigger('resize'); //resizeのイベント動作を行う
});
$(window).resize(function () { //ウィンドウズサイズが変更されたらイベントを発火
sampleheight = $("#sample_li_03").innerHeight(); //#sample_li_03の高さを取得
$("#sample_li_04").css("height", sampleheight + "px"); //#sample_li_04のheightを設定
});ちなみに、読み込むjQueryのバージョンが、3.x移行では以下のコードになるようです。
$(window).on('load',function() {参照サイト：https://yachin29.hatenablog.com/entry/2017/06/22/115328
いやいや、本当にjsはわからん。w でも、少し知恵が付くとうれしくもあります。というかこれflexboxで実装し直した方が、はるかに時間は節約できた気がしてならない。w まぁ勉強になったのでよしとしますか…
そう言えば、トラックボールを新調しました
ちなみにこのお仕事期間に、トラックボールを新しく購入しました。
今まで使っていたケンジントン Orbit Trackball with Scroll Ring 72337JP
昨年夏ぐらいに試しに購入した、ケンジントンのトラックボール Orbit Trackball with Scroll Ring 72337JP。今までトラックボール自体すごい気になっていたけれど、どうしても順応できる自信がなくて、敬遠してきました。でも思い切って入門価格のこちらのモデルを購入してみました。親指でコロコロするのではなく、人差し指でコロコロするタイプがよかったのと、やっぱりトラックボールはケンジントンかな、と思いまして。
そしたらこれが、思った以上にはまりまして。もうトラックボール以外は考えれれないぐらいに気に入ってしまいました。最初はちょっと不便だった、イラストレーターでの操作も最近は慣れてきました。今使ってる、35インチのウルトラワイドモニター環境では、カーソルの移動距離が長いので、絶対トラックボールの方が楽です。
ケンジントンの上位機種 Expert Mouse Wireless Trackball K72359JPを買ってみました
今回同じケンジントンの上位機種Expert Mouse Wireless Trackball K72359JPを購入してみました。いやぁ、いいです。ボタンも4つに増えたので、色々な機能を割り当てられるのも大きいですが、それ以上に作りが違います！さすが高級機種という感じで、スクロールリングも、なんだか粘りのある回し心地というか、全体的に高級感があります。コロコロするボールも大きいので、これまで1本の指でコロコロすることが多かったのですが、人差し指と中指の2本でコロコロするのがちょうどよいサイズで、よりカーソルが安定するようになりました。
有線から無線になり、すぐに移動させたり、他の端末で使用できるのも大きいです。USB無線子機での接続と、Bluetooth接続が切り替えらるのも便利そう！（なぜかBootcampしたMacBookにBluetooth接続ができないのですが…なぜだろう。）
もう少し使ったら、ちゃんとしたExpert Mouse Wireless Trackball K72359JPのレビュー記事を書いてみようと思います。やっぱりトラックボール最高です。腕や手への負担が減りますし、仕事がちょっと楽しくなります。ケンジントンはメーカー保証も3年や5年と、とても長くて安心感があります。
トラックボールが気になっておられる方、ケンジントンのトラックボール、おすすめです。
スポンサーリンク
