フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

jQueryで特定classのidや要素を全部取り出す

slick.jsで、スライダー部分をdisplay:noneにするとレイアウトが乱れてハマったのでメモ。
今回、私がハマった状況は、
– 4つのタブがあり、それぞれにスライダーを配置する。
– そのタブのコンテンツ領域(tab-panes)はページが読み込まれた際には、見えない状態(タブだけひょっこり見えてる状態)にしておいて、4つのうちどれかタブをクリックするとタブのコンテンツ領域(tab-panes)がslideUpする
というものでした。コードで表現すると以下のような感じ。

<div class="tab-area">
  <div class="tabs">
    <div class="tab"> タブ1 </div>
    <div class="tab"> タブ2 </div>
    <div class="tab"> タブ3 </div>
    <div class="tab"> タブ4 </div>
  </div>
  <div class="tab-panes">
    <div class="tab-pane"> タブ1のコンテンツ(スライダー) </div>
    <div class="tab-pane"> タブ2のコンテンツ(スライダー) </div>
    <div class="tab-pane"> タブ3のコンテンツ(スライダー) </div>
    <div class="tab-pane"> タブ4のコンテンツ(スライダー) </div>
  </div>
</div>

そして、cssで.tab-panes { display:none }にしてjqueryをごにょごにょ書いて、よし挙動確認だ!ってかんじで試してみると…スライダーがない…widthが0になっている。
googleセンセー…

でてきました!さすがセンセー

Basically slick can calc the dimensions if the slides aren’t taking up space in the dom. Use visibility: hidden w/ position: absolute to take it out of the document flow, instead of display: none or use the slick reset/setPosition method in your JS when the click event reveals it.

引用元:Slider set to display:none then set to show() … first slide does not show??

display:noneなどでスペースを確保していない状態でスライダーが読み込まれると、計算できないよ。ってことみたいですね
setPositionは使いこなせず、タブかnext/prevボタンを2、3回クリックするとスライダーが表示される仕様に。
visibility: hidden、この線で試してみるといい感じに表示されました!

同じようにハマっていらっしゃる方のお助けになればと思い、書きました。
setPositionはこう使うんだぜ、こういうやり方の方がいけてるぜってのがありましたら、教えてください。

[紹介元] jQueryタグが付けられた新着投稿 – Qiita jQueryで特定classのidや要素を全部取り出す

コメント

記事に戻る

コメントを残す