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