Прокрутка не работает деление с

0

У меня есть веб-приложение, которое позволяет вам выбирать различные биты мебели, используя флажки, а затем отображает ссылки на упражнения, которые вы можете делать с этой мебелью. Поскольку я использую phonegap, я пытаюсь использовать iScroll для div, которые отображаются, когда галочка отмечена.

Прокрутка div отлично работает с простым

однако, когда я пытаюсь добавить код для флажков divs, он не работает.

JAVASCRIPT

        //CHECKBOX SHOW/HIDE 

 function showHideChair(box,id) 
 {
  var chairData = document.getElementById(id)
  chairData.style.display = box.checked? "inline":"none"
 }

 function showHideMatt(box,id) 
 {
  var mattData = document.getElementById(id)
  mattData.style.display = box.checked? "inline":"none"
 }

 function showHideBook(box,id) 
 {
  var bookData = document.getElementById(id)
  bookData.style.display = box.checked? "inline":"none"
 }

 function showHideBunjee(box,id) 
 {
  var bunjeeData = document.getElementById(id)
  bunjeeData.style.display = box.checked? "inline":"none"
 }

 function showHideBottle(box,id) 
 {
 var bottleData = document.getElementById(id)
 bottleData.style.display = box.checked? "inline":"none"
 }


 var myScroll;
 function loaded() {
     myScroll = new IScroll('#wrapper');
 }

HTML

 <body onload="loaded()">

<header>
    <h1>Home Fitness</h1>
</header>

<section>
    <h3>Abdominals</h3>
</section>



<p>Please select the the equipment you have available from the choices</p>


  <div class="container">   

             <form >


            <div class="chairCheckbox">
                <label for="chair">Chair</label>
                <input style="display:inline" type="checkbox" id="chair" value="chair" name="option" onClick="showHideChair(this,'myChair')">

            <label for "floorMatt">Floor Matt</label>
            <input style="display:inline" type="checkbox" id="floorMatt" value="floorMatt" name="option" onClick="showHideMatt(this,'myMatt')">

            <label for "book">Hard Back Book</label>
            <input style="display:inline" type="checkbox" id="book" value="book" name="option" onClick="showHideBook(this,'myBook')">

            <label for "bunji">Bunji Cord</label>
            <input style="display:inline" type="checkbox" id="bunji" value="bunji" name="option" onClick="showHideBunjee(this,'myBunjee')">

            <label for "bottle">Water Bottle</label>
            <input style="display:inline" type="checkbox" id="bottle" value="bottle" name="option" onClick="showHideBottle(this,'myBottle')">

            </div>

        </form>  

 </div> 


 <div id="wrapper">
     <div id="scroller">

         <!--ABS CHAIR-->


     <div id="myChair" style="display:none;"> 

       <div class="subBanner" >
         <h4>Chair</h4>
         </div>

                  <a class="Exercisebutton icon chair" href="ChairCrunch.html"><span>Chair Crunch</span></a>

                  <a class="Exercisebutton icon chair" href="ElevatedCrunch.html"><span>Elevated Crunch</span></a>


     </div>

     <!--ABS MATT-->    
     <div id="myMatt" style="display:none;">

     <div class="subBanner" >
         <h4>Matt</h4>
         </div>


         <a class="Exercisebutton icon matt" href="BWLegRaises.html"><span>Bodyweight Leg Raises</span></a>

         <a class="Exercisebutton icon matt" href="BWPlank.html"><span>Bodyweight Plank</span></a>

     </div>

     <!--ABS BOOK-->
     <div id="myBook" style="display:none;">

    <div class="subBanner" >
         <h4>Book</h4>
         </div>

         <a class="Exercisebutton icon book" href="BookTwists.html"><span>Book Twists</span></a>

         <a class="Exercisebutton icon book" href="BookBridge.html"><span>Book Bridge</span></a>


     </div>

     <!--ABS BUNJEE-->
     <div id="myBunjee" style="display:none;">

     <div class="subBanner" >
         <h4>Bunjee</h4>
         </div>

         <a class="Exercisebutton icon bunjee" href="BCPLank.html"><span>Bunjee Cord Plank</span></a>

        <a class="Exercisebutton icon bunjee" href="BCHipRaise.html"><span>Bunjee Cord Hip Raise</span></a>

     </div>

     <!--ABS BOTTLE-->
     <div id="myBottle" style="display:none;">

     <div class="subBanner" >
         <h4>Bottle</h4>
         </div>

         <a class="Exercisebutton icon bottle" href="BSitup.html"><span>Bottle Situp</span></a>

         <a class="Exercisebutton icon bottle" href="BSidePress.html"><span>Bottle Side Press</span></a>


         </div>

     </div>
</div>

CSS

 /*ISCROLL*/

 #wrapper {
position: relative;
width: 90%;
height: 300px;
overflow: hidden;

/* Prevent native touch events on Windows */
-ms-touch-action: none;

/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

 }

 #scroller {
position: absolute;

/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);

/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
 }

Я понимаю, что это много кода, им жаль! но любая помощь будет очень оценена. !!

1 ответ

0

У вас в HTML много ошибок. Некоторые теги, содержащие входные теги, не закрываются, метки тегов не соответствуют синтаксису. например: <label for "book"> должна быть <label for="book">

Вы можете проверить свой HTML-код с помощью онлайн-инструментов, таких как http://validator.w3.org/check

Посмотрите, поможет ли это вам в восстановлении от ошибки

Iscroll вызывается как myScroll = new iScroll('wrapper');

Ниже приведен рабочий пример: http://lab.cubiq.org/iscroll/examples/simple/, и, кроме того, существует много вопросов SO о проблемах с iScroll, с которыми столкнулись пользователи. Пожалуйста, попробуйте их, и все же, если вы не проходите, затем попробуйте простой пример с флажками, и если вы застряли, создайте jsfiddle и разместите его здесь. мы можем помочь

Ещё вопросы

Сообщество Overcoder
Наверх
Меню