Why is my javascript slider breaking? -
i've tried figure out hours now. not great js. smarter can see issue here. have tabbed view, , each view should have slider. slider works in first tab, second tab breaks. javascript function not being passed subsequent tabs. url view this: http://goo.gl/yzisjs
the code tabbed views , slider:
<!-- http://codepen.io/wallaceerick/pen/ojtal --> <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked /> <label for="tab1">spring wedding</label> <div id="tab-content1" class="tab-content chefspick"> <div id="slides"> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image1.jpg" alt=""> </div> <div class="bottom"> <div class="title">summer wedding: hors d'oeuvres</div> <p>sweet maryland crab cakes herb remoulade absolutely scrumptious , perfect spring wedding hors d'oeuvres.</p> </div> </div> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image2.jpg" alt=""> </div> <div class="bottom"> <div class="title">summer wedding: hors d'oeuvres</div> <p>chinese chicken salad in miniature tortilla cups bite size signature delight can butler passed or displayed on buffet.</p> </div> </div> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image3.jpg" alt=""> </div> <div class="bottom"> <div class="bottom"> <div class="title">summer wedding: hors d'oeuvres</div> <p>vegetable spring rolls add perfect amount of crunch wedding hors d'oeuvre selection.</p> </div> </div> </div> </li> <li> <input type="radio" name="tabs" id="tab2" /> <label for="tab2">summer wedding</label> <div id="tab-content2" class="tab-content chefspick"> <div id="slides" style="overflow: hidden;"> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image1.jpg" alt=""> </div> <div class="bottom"> <div class="title">summer wedding: hors d'oeuvres</div> <p>sweet maryland crab cakes herb remoulade absolutely scrumptious , perfect spring wedding hors d'oeuvres.</p> </div> </div> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image2.jpg" alt=""> </div> <div class="bottom"> <div class="title">summer wedding: hors d'oeuvres</div> <p>chinese chicken salad in miniature tortilla cups bite size signature delight can butler passed or displayed on buffet.</p> </div> </div> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/summer_image3.jpg" alt=""> </div> <div class="bottom"> <div class="bottom"> <div class="title">summer wedding: hors d'oeuvres</div> <p>vegetable spring rolls add perfect amount of crunch wedding hors d'oeuvre selection.</p> </div> </div> </div> </li> <li> <input type="radio" name="tabs" id="tab3" /> <label for="tab3">fall wedding</label> <div id="tab-content3" class="tab-content chefspick"> <div id="slides"> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image1.jpg" alt=""> </div> <div class="bottom"> <div class="title">spring wedding: hors d'oeuvres</div> <p>sweet maryland crab cakes herb remoulade absolutely scrumptious , perfect spring wedding hors d'oeuvres.</p> </div> </div> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image2.jpg" alt=""> </div> <div class="bottom"> <div class="title">spring wedding: hors d'oeuvres</div> <p>chinese chicken salad in miniature tortilla cups bite size signature delight can butler passed or displayed on buffet.</p> </div> </div> <div> <div class="top"> <img src="../wp-content/themes/wolfgang-puck/assets/img/spring_image3.jpg" alt=""> </div> <div class="bottom"> <div class="bottom"> <div class="title">spring wedding: hors d'oeuvres</div> <p>vegetable spring rolls add perfect amount of crunch wedding hors d'oeuvre selection.</p> </div> </div> </div> </li> <li> <input type="radio" name="tabs" id="tab4" /> <label for="tab4">winter wedding</label> <div id="tab-content4" class="tab-content"> <p>"sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p> </div> </li> <li> <input type="radio" name="tabs" id="tab5" /> <label for="tab5">the classics</label> <div id="tab-content5" class="tab-content"> <p>"sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla?</p> </div> </li> </ul> i've moved code around multiple times , can't seem figure out. appreciated.
you calling slider :
$("#slides").slidesjs({ width: 480, height: 380, play: { active: true, // [boolean] generate play , stop buttons. // cannot use own buttons. sorry. effect: "slide", // [string] can either "slide" or "fade". interval: 3000, // [number] time spent on each slide in milliseconds. auto: false, // [boolean] start playing slideshow on load. swap: true, // [boolean] show/hide stop , play buttons pauseonhover: false, // [boolean] pause playing slideshow on hover restartdelay: 2500 // [number] restart delay on inactive slideshow } }); it means call slider on #slides element. selector id, apply first 1 get.
so, considering have multiple sliders, should use classes instead.
$(".slides").slidesjs({ width: 480, height: 380, play: { active: true, // [boolean] generate play , stop buttons. // cannot use own buttons. sorry. effect: "slide", // [string] can either "slide" or "fade". interval: 3000, // [number] time spent on each slide in milliseconds. auto: false, // [boolean] start playing slideshow on load. swap: true, // [boolean] show/hide stop , play buttons pauseonhover: false, // [boolean] pause playing slideshow on hover restartdelay: 2500 // [number] restart delay on inactive slideshow } }); then, remove id="slides"in html , add class slides instead.
for record: can use 1 specific id per document > https://www.w3.org/tr/html401/struct/global.html#h-7.5.2
edit : 2nd issue
now, slidesjs can't real dimensions of each of sliders, due use of display: none; on tabs :
/* line 328, ../sass/style.scss */ html .wrapper.weddings .tabs .tab-content, body .wrapper.weddings .tabs .tab-content { z-index: 2; display: none; overflow: hidden; width: 838px; font-size: 17px; line-height: 25px; padding: 25px 25px 0 25px; position: absolute; top: 53px; min-height: 680px; border-right: 1px solid #bc9a95; border-left: 1px solid #bc9a95; border-bottom: 1px solid #bc9a95; left: 0; background: white; } so, need find solution mask tabs without using display: none;
you try :
html .wrapper.weddings .tabs .tab-content, body .wrapper.weddings .tabs .tab-content { z-index: 2; /*display: none; */ overflow: hidden; width: 838px; font-size: 17px; line-height: 25px; padding: 25px 25px 0 25px; position: absolute; top: 53px; min-height: 680px; border-right: 1px solid #bc9a95; border-left: 1px solid #bc9a95; border-bottom: 1px solid #bc9a95; left: 0; background: white; /* vvvv there vvvv */ opacity: 0; z-index: -1 /* hacky, works */ } and then, make appear :
/* line 433, ../sass/style.scss */ html .wrapper.weddings .tabs [id^="tab"]:checked ~ [id^="tab-content"], body .wrapper.weddings .tabs [id^="tab"]:checked ~ [id^="tab-content"] { opacity: 1; z-index: 10; /* or whatever default value set */ } 
Comments
Post a Comment