jQuery Umfrage Auto-Größe/Auto-Ansicht funktioniert nicht

Ich versuche, eine Umfrage-Website mit Auto-Größe und Auto-View-Funktionalität zu machen. So sehen die Leute minimal 1 Umfrage Frage und max 3 Umfrage Fragen basierend auf ihrer Bildschirmgröße.jQuery Umfrage Auto-Größe/Auto-Ansicht funktioniert nicht

Ich habe den folgenden Code, aber nach der Größenänderung der nächste en vorherige Schaltfläche wird nicht mehr richtig funktionieren. Ich habe fast alles ausprobiert, aber ich kann nicht richtig funktionieren.

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script src="http://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     var firstdiv; 
     var divs = []; 
     var view; 

     $(document).ready(function() { 
      $("#container").find("div").each(function(){ divs.push(this.id); }); 
      firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs)); 
      InitalizeSizes(); 
     }); 

     $(window).resize(function(){ 
      InitalizeSizes(); 
     }); 

     function InitalizeSizes() { 
      for (i = 0; i <= divs.length; i++) { 
       $("#"+divs[i]).hide(); 
      } 

      if(window.innerHeight <= 716){ 
       $("#"+divs[firstdiv]).show(); 
       view = 1; 
      } 
      else if(window.innerHeight > 716 && window.innerHeight <= 1067){ 
       $("#"+divs[firstdiv]).show(); 
       $("#"+divs[firstdiv+1]).show(); 
       view = 2; 
      } 
      else{ 
       $("#"+divs[firstdiv]).show(); 
       $("#"+divs[firstdiv+1]).show(); 
       $("#"+divs[(firstdiv+2)]).show(); 
       view = 3; 
      } 

      var divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs)); 

      $("#btnnext").click(function(){ 
       if(!($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().is('div:last'))){ 
        divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs)); 
        for (i = 0; i < divs.length; i++) { 
          $("#"+divs[i]).hide(); 
        } 
        for (i = 1; i <= view; i++) {      
         $("#"+divs[(divnumber+i)]).show(); 

        } 
       }; 
      }); 

      $("#btnback").click(function(){ 
       if(!($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().is('div div:first'))){ 
        divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs)); 
        for (i = 0; i < divs.length; i++) { 
          $("#"+divs[i]).hide(); 
        } 
        for (i = 1; i <= view; i++) {      
         $("#"+divs[(divnumber-i)]).show(); 
        } 
       } 
      }); 

     } 
    </script>   
</head> 
<body> 
    <form id="containerform" action="#"> 
     <div id="container"> 
      <div id="div1"><br /><label>Div1</label><input type="text" name="username" /></div> 
      <div id="div2"><br /><label>Div2</label><input type="password" name="password" /></div> 
      <div id="div3"><br /><label>Div3</label><input type="text" name="email" /></div> 
      <div id="div4"><br /><label>Div4</label><input type="text" name="username" /></div> 
      <div id="div5"><br /><label>Div5</label><input type="password" name="password" /></div> 
      <div id="div6"><br /><label>Div6</label><input type="text" name="email" /></div>     
      <div id="div7"><br /><label>Div7</label><input type="text" name="username" /></div> 
      <div id="div8"><br /><label>Div8</label><input type="password" name="password" /></div> 
      <div id="div9"><br /><label>Div9</label><input type="text" name="email" /><input type="submit" value="verzonden"/></div> 
      <p id="buttons"><button id="btnback">Previous</button><button id="btnnext">Next</button></p> 
     </div> 
    </form> 
</body>

Ich hoffe, euch kann mir helfen, weil ich jetzt mein Gehirn für zwei Tage breche!

Quelle

2016-12-02 DutchFlow

Okay, ich es gefunden! Da gab es mehrere Probleme.

Wie die <p id="buttons"> muss nicht in der Form sein, weil es offensichtlich IE und Edge Weinen.

Und die $(window).resize(function() sollte $(window).on('resize',function() sein und sollte in der $(document).ready(function() platziert werden.

Auch der Button klicken und function InitializeSizes() sollte in der $(document).ready(function() platziert werden.

Damit macht den folgenden Code:

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=9"/> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script src="http://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     var divs = []; 
     $("#container").find("div").each(function(){ divs.push(this.id); }); 
     var firstdiv; 
     firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') != 'none';}).first().attr('id'), divs));  
     var view; 
     var divnumber;  

     $(document).ready(function() { 
      $("#container").find("div").each(function(){ divs.push(this.id); }); 
      InitalizeSizes(); 
      divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs)); 

      $("#btnnext").click(function(){    
       if(!($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().is('div:last'))){ 
        divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).last().attr('id'), divs)); 
        for (i = 0; i < divs.length; i++) { 
          $("#"+divs[i]).css("display","none"); 
        } 
        for (i = 1; i <= view; i++) {      
         $("#"+divs[(divnumber+i)]).css("display","table-row"); 
         firstdiv = divnumber; 
        } 
       } 
      }); 

      $("#btnback").click(function(){ 

       if(!($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().is('div div:first'))){ 
        console.log(jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs)); 
        divnumber = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs)); 
        for (i = 0; i < divs.length; i++) { 
          $("#"+divs[i]).css("display","none"); 
        } 
        for (i = 1; i <= view; i++) {      
         $("#"+divs[(divnumber-i)]).css("display","table-row"); 
        } 
       } 
      }); 

      $(window).on('resize',function(){ 
       firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs)); 
       InitalizeSizes(); 
      }); 


      function InitalizeSizes() { 
       firstdiv = (jQuery.inArray($('#container').children("div").filter(function() {return $(this).css('display') !== 'none';}).first().attr('id'), divs)); 
       for (i = 0; i <= divs.length; i++) { 
        $("#"+divs[i]).css("display","none"); 
       } 

       if(window.innerHeight <= 716){ 
        $("#"+divs[firstdiv]).css("display","table-row"); 
        view = 1; 
       } 
       else if(window.innerHeight > 716 && window.innerHeight <= 1067){ 
        $("#"+divs[firstdiv]).css("display","table-row"); 
        $("#"+divs[(firstdiv+1)]).css("display","table-row"); 
        view = 2; 
       } 
       else{ 
        $("#"+divs[firstdiv]).css("display","table-row"); 
        $("#"+divs[(firstdiv+1)]).css("display","table-row"); 
        $("#"+divs[(firstdiv+2)]).css("display","table-row"); 
        view = 3; 
       }     
      } 
     }); 

    </script>   
</head> 
<body> 
    <form id="containerform" action="#"> 
     <div id="container"> 
      <div id="div1"><br /><label>Div1</label><input type="text" name="username" /></div> 
      <div id="div2"><br /><label>Div2</label><input type="password" name="password" /></div> 
      <div id="div3"><br /><label>Div3</label><input type="text" name="email" /></div> 
      <div id="div4"><br /><label>Div4</label><input type="text" name="username" /></div> 
      <div id="div5"><br /><label>Div5</label><input type="password" name="password" /></div> 
      <div id="div6"><br /><label>Div6</label><input type="text" name="email" /></div>     
      <div id="div7"><br /><label>Div7</label><input type="text" name="username" /></div> 
      <div id="div8"><br /><label>Div8</label><input type="password" name="password" /></div> 
      <div id="div9"><br /><label>Div9</label><input type="text" name="email" /><input type="submit" value="verzonden"/></div> 
     </div> 
    </form> 
    <p id="buttons"><button id="btnback">Previous</button><button id="btnnext">Next</button></p> 
</body>

Dies funktioniert Cross-Browser (Getestet habe ich es auf Firefox, Chrome, IE und Kante) perfekt.

Quelle

2016-12-02 13:23:17 DutchFlow

können Sie versuchen, statt mit CSS, sehen, ob das funktioniert

//hide 
$("#"+divs[i]).css("display","none"); 
//show 
$("#"+divs[i]).css("display","inline");

Quelle

2016-12-02 10:13:25 Vibhu

Dank für Ihre schnelle Reaktion Viele Vibhu! Immer noch die gleichen Ergebnisse. Es funktioniert zunächst gut. Aber wenn ich auf die nächste Schaltfläche klicke, nachdem ich den Bildschirm verkleinert habe, geht es von div1 + div2 nach div9. Es muss etwas mit den Werten 'firstdiv' oder 'divnumber' zu tun haben, aber ich sehe einfach nicht ... – DutchFlow

Beim Ausführen Ihres Codes (ohne die style.css) in meinem Browser, wenn ich es wiederherstellen wird angezeigt ein Steuerelement und auf die Maximierung zeigt zwei Kontrollen .. so scheint jQuery zu arbeiten, vielleicht könnte das Problem mit den Werten der inneren Höhe sein, kann nicht wirklich sagen tho: -) – Vibhu

Sie können das gewünschte Verhalten mit dem folgende Skript erreichen:

set = function (page, width, elements) { 

    // Hide every element 

    elements.hide(); 

    // Find number of elements per page 

    var n = 1; 

    if (width >= 716 && width <= 1076) { 
     n = 2; 
    } else if (width > 1076) { 
     n = 3; 
    } 

    // Show elements of current page 

    var total = elements.length;   
    var start = (page - 1) * n; 

    var l = start + n <= total ? start + n : total; 

    for (var j = start; j < l; j++) { 
     $(elements[j]).show(); 
    } 
}; 

$(document).ready(function() { 

    // Set variables 

    var page = 1; 
    var width = $(document).width(); 
    var elements = $('#container div'); 

    var first = $(elements[0]); 
    var last = $(elements[elements.length - 1]); 

    // Set page content 

    set(page, width, elements); 

    // Set event listeners 

    $(window).resize(function() { 
     width = $(document).width(); 
     page = 1; 
     set(page, width, elements); 
    }); 

    $('#btnback').click(function() { 
     if (!first.is(':visible')) { 
      page--; 
      set(page, width, elements); 
     } 
    }); 

    $('#btnnext').click(function() { 
     if (!last.is(':visible')) { 
      page++; 
      set(page, width, elements); 
     } 
    }); 
});

Quelle

2016-12-02 13:43:53

jQuery Umfrage Auto-Größe/Auto-Ansicht funktioniert nicht

Antwort

Verwandte Themen