monograph

jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。

   

jquery.png
基本的に悩み事のない毎日を送っております。PITE.(@infoNumber333)です。

と言っても靴下がいつも片方無いとか、ちょっとしたことで筋肉痛になったとか、友達がガチでハゲてきたとかとか細かい悩みはあるものです。

そして、ここ最近はこのブログのサイドバーに設置した、”スクロールしても着いてくる”jQueryがうまく動かないということにずっと頭を悩ましていました。色々な人に聞いてみても原因がわからない。正常に動かない。その不可解なサイドバーの動きに追い詰められ、毎晩僕の枕元にサイドバーが立っている夢すら見る始末。あぁ、このままでは僕はサイドバーに追い殺されてしまうよ…

そんなギリギリの精神状態の中、藁にもすがる思いでTwitterにこんな投稿を投げかけてみました。


この1つのつぶやきからこんなドラマが始まるとは思いもよらなかったのです。ええ、この時は。

現れた救世主・さいたさん。



さきほどのツイートから間もなく、おしゃれなハットのアイコンが目印で北海道の大地のような寛大な心を持ち合わせた紳士の「さいたさん(@saita_ryuhei)」が助けの手を差し伸べてくれるという奇跡が。なんということでしょう。


ここぞとばかりにご好意に甘えることに。

サイドバーが「びゅんっ!」ってなる問題。



Number333_2013-06-10_20.48.34.png
僕が悩んでいたのは「jQueryでサイドバーをスクロールに合わせてついて来させるはずが、指定していた部分よりもかなり手前で表示されてしまいサイドバーの要素が重なる」という不具合でした。これによって今までサイドバーの一部がクリックできないという状態でした。これは良くありませんね。サイドバーを設置している意味が半減です。

このjQueryの実装はOZPAさんのこちらの記事を参考に行いました。



色々知恵を絞ってくれるも、中々答えは見つかりません。


結局おしゃれハットのさいたさんの力を持ってしても謎は解けませんでした…。もうこれは迷宮入りするしかないのか。紳士でもダメなのか。飼い犬のようについてくるサイドバーと青空の下の草原を駆けまわるという夢はもう、叶わないのか…。

遅れてきた、ヒーロー!



あきらめて別の道を探そうとしていたその時、まさかの第二の救世主が現れました!
その名も「マツオカソウヤ(@mtoksuy)」さん!颯爽と答えを携えての登場。てか10分て。


アドバイスを求めると、「ちょっとジュース買ってきます」ぐらいの軽さでコードを書いていくれるというマツオカさん。何なの神様なの?


その後超簡単な解決策を提示してくれました。不具合の詳細に関しては後で解説します。


さらに今回の原因を説明した記事まで見つけてきてくれるという始末。
ほぼ初絡みなのにここまで親切にしてくれるなんて…なんて良い人なんだ(꒦ິ⌑꒦ີ)。

母さん…日本は、大丈夫です。

jQueryの読み込みの順番が原因


Number333_2013-06-10_21.16.39.png
僕が説明するまでもなく、マツオカさんが教えてくれたページ読み込み後にjavascript(jQuery)を実行する方法という記事を読んでもらえれば話は早いのですが、一応説明しておくと今回の不具合はjQueryの読み込む順番に原因がありました。

具体的に言いますと、サイドバーに設置していた画像よりもjQueryの方が先に読み込まれてしまうために発動のキーにしていた高さが画像の分計算されず、予定よりも高い位置でjQueryが発動してしまったということです。

これを解決するには

$(function($) {

という部分を、

$(window).load(function() {

とするだけ。

後者は「画面が完全にロードされたら発動」という意味のコードです。HTMLやCSSを全て読み込んだ後に飾りとしてのjQueryを読み込むので不具合が起きづらいと先ほどの記事の著者は書いていました。

僕と同じようにjQueryでてこずっているブロガーは多いと思うので、悩んでいる方は一度お試し下さい!こっちのほうが安定感があって良さ気。

おわりに


今回はさいたさん(@saita_ryouhei)とマツオカソウヤ(@mtoksuy)の二人のおかげで念願だった「ついてくるサイドバー」をやっと実装することができました。これで今日から快眠できそうです。

この一件でjQueryの勉強になったと同時に人の暖かさ、Twitterの面白さを再認識できた気がします。せっかくブログもチューニングできたのでバリバリブログ書くぞー!!うぉぉぉお!!

PITE.(@infoNumber333)

 - jQuery

teaparty

  関連記事