先日、とあるサイトの改善デザインとコーディングをしました。
そのときにJavaScriptの書き方を調べたのですが、また使う機会があるかもしれないのでメモです。
改善したページはECサイトの購入画面で、商品のオプションを選択する画面です。
ブロック1からオプションを選び、ブロック2には選んだオプションが表示されます。ブロック3にはオプション金額の合計と、次のステップに進むボタンが入ってます。
オプション選択は下向きに選んでいくのに合計金額やボタンが上部にあります。
なのでオプション選択後、次のページに進むにはページ上部に戻らなければなりません。わかりにくいしめんどくさい。
いくつか案を出して、下図のように改善方法に決定ました。
ブロック3をスクロールに応じて追随させるようにしました。
これならオプションを選び続けて画面下に進んでも、合計金額と次に進むボタンが常に表示されます。
じゃあコーディングするかなぁ〜と触り始めたところ問題発生…
スクロールに追随させるフローティングボックスはよく使うのですが、選んだオプションによってブロック2の高さが可変するのでブロック3を絶対位置で指定できません。
ちなみにブロック1も選んだ商品によってオプション数が変化、高さが可変します…
となると、JavaScriptで要素の高さを取得して計算する必要があります。
けれど僕はJavaScript書けないのでちょっと調べてみました。
まずはhtmlとcss。
<div id="contents" class="block1">オプション一覧</div> <div id="sidebar"> <div class="block2">選択されたオプション</div> <div class="block3_wrap"> <div class="block3">金額とボタン</div> </div> </div>
#contents{float:left;}
#sidebar{float:right;}
JavaScriptで全部書こうと思うと大変らしいのでjQueryを使いました。
block1とblock2の高さを取得してそれぞれを変数に。block1の高さからblock2の高さを引いて、その数値をblock3の外枠の高さに指定します。
var blockheight1 = $('#block1').height();
var blockheight2 = $('#block2').height();
$('#block3_wrap').css('height',blockheight1 - blockheight2);
そうしたらblock3_wrap内でblock3をフローティングさせれば完了です！！
ちなみにフローティングさせるのには『smartsticky.js』というjQueryプラグインを使わせていただきました。
追いかけてくるフローティングボックス – SolidStateEveryday
やっぱりJavaScript便利ですねぇ。早く使えるように勉強しよう。
もっと良い記述方法があったら教えてください。
コメント