XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Accordion / Felder Anordnung, Steuerung funktioniert nicht (http://xhtmlforum.de/showthread.php?t=74024)

Iago2 27.01.2020 15:43

Accordion / Felder Anordnung, Steuerung funktioniert nicht
 
Hallo,

Ich size hier einer Steuerung für ein Akkordion. Ich habe 4 Felder (HTML,CSS,JS,Output).
Es müsste 13 Möglichkeiten der Anzeige/Anordnung der Felder geben (4 x 1 ,6 x 2, 2 x 3, 1 x 4)

Ich habe mich hier eine Lösung versucht. die eigentlich stimmig sein müsste: Wer sich das anschauen mag:

HTML-Code:

<!DOCTYPE html>
<html>

        <head>
       
        <title>codeplayer</title>
       
        <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
        <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
       
       
        <link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet">
        <style type="text/css">
               
                body {
                       
                        font-family: Arial, Helvetica, sans-serif;
                        margin:0px;
                        padding:0px;
               
                        }
                       
                #top-bar {
                       
                        width:100%;
                        height:40px;
                        border: 1px solid grey;
                        background-color:#D8D8D8;       
                        }       
                       
                #button {
                        text-align:center;
                       
                       
                        }
               
                button {
                       
                        background:rgb(208,219,224);
                        }       
                       
                       
                /* Accordion */
               
                #accordion {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        height: 500px;
                        overflow: hidden;
                        background: #7d8d96;}
 
                #accordion li {
                        float: left;
                        border-left:
                        display: block;
                        height: 500px;
                        width: 50px;
                        padding: 15px 0;
                        overflow: hidden;
                        color: #fff;
                        text-decoration: none;
                        font-size: 16px;
                        line-height: 1.5em;
                        border-left: 1px solid #fff;}
 
 
                #accordion li.active {
                        width: 450px;
                        }
                       
                       
                       
                li:nth-child(1) {
                        background-color: #2b5fd6;
                        }
               
                li:nth-child(2) {
                        background-color: green;
                        }       
       
                li:nth-child(3) {
                        background-color: red;
                        }
       
                                       

        </style>
       
        <body>
       
        <div id="top-bar">
               
                <div id="button">
       
                <button id="HTML-B">HTML</button>
                <button id="CSS-B">CSS</button>
                <button id="JS-B">Javascript</button>
                <button id="output-B">Output</button>
       
       
                </div>
        </div>
       
        <div id="body-div">
       
                <ul id="accordion">
      <li> 
        <h3>HTML</h3>   
      </li>
      <li>
        <h3>CSS</h3>     
      </li>
      <li>
                <h3>JavaScript</h3>
      </li>
      <li>
                <h3>Output</h3>
 
    </li>
  </ul>
         
        </div>
       
       
        <script type="text/javascript">
               
                $(document).ready(function(){
                       
                       
                       
                var HTMLb = false;
                var CSSb = false;
                var JSb = false;
                var OUTb = false;
               
               
        $("#accordion li:first").css("width","50%");
        $("#accordion li:nth-of-type(2)").css("width","0px");
        $("#accordion li:nth-of-type(3)").css("width","0px");
        $("#accordion li:first").css("width","50%");
         
         
          // HTML Button
   
    $("#HTML-B").click(function() {               
               
                if((CSSb == false) && (JSb == false) && (OUTb == false)) {                //100%
                $("#accordion li:first").css("width","100%");                       
                }
                if((CSSb == true) && (JSb == false) && (OUTb == false)) {                //50%       
                $("#accordion li:first").css("width","50%");       
                }
                if((CSSb == false) && (JSb == true) && (OUTb == false)) {                //50%       
                $("#accordion li:first").css("width","50%");       
                }
                if((CSSb == false) && (JSb == false) && (OUTb == true)) {                //50%
                $("#accordion li:first").css("width","50%");       
                }
                if((CSSb == true) && (JSb == true) && (OUTb == false)) {                //33%
                $("#accordion li:first").css("width","33%");       
                }
                if((CSSb == false) && (JSb == true) && (OUTb == true)) {                //33%
                $("#accordion li:first").css("width","33%");       
                }
                if((CSSb == true) && (JSb == false) && (OUTb == true)) {                //33%       
                $("#accordion li:first").css("width","33%");       
               
                }
               
                //toggle
               
                if(HTMLb == false) {
                        $("#HTML-B").css("background","rgb(244,250,88)");
                        HTMLb = true; }               
                       
                else {               
                        $("#HTML-B").css("background","rgb(208,219,224)");
                        HTMLb = false; }       
                                       
               
        });

                // CSS Button :nth-of-type(2)
       
        $("#CSS-B").click(function() {               
               
               
                if((HTMLb == false) && (JSb == false) && (OUTb == false)) {                //100%
                $("#accordion li:nth-of-type(2)").css("width","100%");                       
                }               
                if((HTMLb == true) && (JSb == false) && (OUTb == false)) {                //50%       
                $("#accordion li:nth-of-type(2)").css("width","50%");       
                }               
                if((HTMLb == false) && (JSb == true) && (OUTb == false)) {                //50%       
                $("#accordion li:nth-of-type(2)").css("width","50%");       
                }               
                if((HTMLb == false) && (JSb == false) && (OUTb == true)) {                //50%
                $("#accordion li:nth-of-type(2)").css("width","50%");       
                }               
                if((HTMLb == true) && (JSb == true) && (OUTb == false)) {                //33%
                $("#accordion li:nth-of-type(2)").css("width","33%");       
                }                               
                if((HTMLb == false) && (JSb == true) && (OUTb == true)) {                //33%
                $("#accordion li:nth-of-type(2)").css("width","33%");       
                }               
                if((HTMLb == true) && (JSb == false) && (OUTb == true)) {        //33%       
                $("#accordion li:nth-of-type(2)").css("width","33%");       
               
                }
               
                //toggle
                                                 
                if(CSSb == false) {
                        $("#CSS-B").css("background","rgb(244,250,88)");
                        CSSb = true; }               
                       
                else {               
                        $("#CSS-B").css("background","rgb(208,219,224)");
                        CSSb = false; }               
        });
       
       
        // JS Button :nth-of-type(3)
       
        $("#JS-B").click(function() {
               
                if((CSSb == false) && (HTMLb == false) && (OUTb == false)) {                //100%
                $("#accordion li:nth-of-type(3)").css("width","100%");                       
                }               
                if((CSSb == true) && (HTMLb == false) && (OUTb == false)) {                //50%       
                $("#accordion li:nth-of-type(3)").css("width","50%");       
                }               
                if((CSSb == false) && (HTMLb == true) && (OUTb == false)) {                //50%       
                $("#accordion li:nth-of-type(3)").css("width","50%");       
                }               
                if((CSSb == false) && (HTMLb == false) && (OUTb == true)) {                //50%
                $("#accordion li:nth-of-type(3)").css("width","50%");       
                }               
                if((CSSb == true) && (HTMLb == true) && (OUTb == false)) {                //33%
                $("#accordion li:nth-of-type(3)").css("width","33%");       
                }               
                if((CSSb == false) && (HTMLb == true) && (OUTb == true)) {                //33%
                $("#accordion li:nth-of-type(3)").css("width","33%");       
                }
                if((CSSb == true) && (HTMLb == false) && (OUTb == true)) {                //33%       
                $("#accordion li:nth-of-type(3").css("width","33%");       
               
                }
               
                //toggle
               
               
                if(JSb == false) {
                        $("#JS-B").css("background","rgb(244,250,88)");
                        JSb = true; }               
                       
                else {               
                        $("#JS-B").css("background","rgb(208,219,224)");
                        JSb = false; }       
        });
       
        // Output Button li:last
               
        $("#output-B").click(function() {
               
                if((CSSb == false) && (JSb == false) && (HTMLb == false)) {                //100%
                $("#accordion li:last").css("width","100%");                       
                }       
                if((CSSb == true) && (JSb == false) && (HTMLb == false)) {                //50%       
                $("#accordion li:last").css("width","50%");       
                }               
                if((CSSb == false) && (JSb == true) && (HTMLb == false)) {                //50%       
                $("#accordion li:last").css("width","50%");       
                }               
                if((CSSb == false) && (JSb == false) && (HTMLb == true)) {                //50%
                $("#accordion li:last").css("width","50%");       
                }               
                if((CSSb == true) && (JSb == true) && (HTMLb == false)) {                //33%
                $("#accordion li:last").css("width","33%");       
                }
                if((CSSb == false) && (JSb == true) && (HTMLb == true)) {                //33%
                $("#accordion li:last").css("width","33%");       
                }
                if((CSSb == true) && (JSb == false) && (HTMLb == true)) {        //33%       
                $("#accordion li:last").css("width","33%");       
               
                }
               
                //toggle
               
                if(OUTb == false) {
                        $("#output-B").css("background","rgb(244,250,88)");
                        OUTb = true; }               
                       
                else {               
                        $("#output-B").css("background","rgb(208,219,224)");
                        OUTb = false; }       
       
        });       
       
        });
   
        </script>
       
       
       
       
        </body>

</html>




Iago2 01.02.2020 06:52

Wenn ich über einen ToggelButton den Wert einer Variablen verändere, dann müsste ich doch mit diesen Werten eine Steuerung implementieren können?

button1 = true;
button2 = true;
button3 = false;
button4 = false;

if(button1 && button2 && button && (button4 == false) ) { do s.th. }

cloned 03.02.2020 10:18

Wieso willst du es dir selber so kompliziert machen?
Wenn du 10 buttons hast die etwas ein- ausblenden sollen schreibst du dann 100 verschiedene Varianten fix in deinen Code?
Überleg dir wie du deine Logik für eine beliebige Anzahl an buttons realisieren kannst. Zb in dem du die width durch die Anzahl an buttons dividierst die aktiv sind. Macht bei 3 buttons zb 33.3%, auch wenn du die buttons dann auf 10 erweiterst.

Iago2 03.02.2020 17:42

Zitat:

Zitat von cloned (Beitrag 554075)
Wieso willst du es dir selber so kompliziert machen?
Wenn du 10 buttons hast die etwas ein- ausblenden sollen schreibst du dann 100 verschiedene Varianten fix in deinen Code?

Wenn man gerne schreibt :mrgreen:

Der Counter funktioniert, auch die Werte in tempWidth stimmen, trotzdem noch keine richtige Darstellung:

HTML-Code:


// HTML Button
   
    $("#HTML-B").click(function() {               
               
       
                //toggle
               
                if(HTMLb == false) {
                        $("#HTML-B").css("background","rgb(244,250,88)");               
                        HTMLb = true;
                       
                        counter++;
                        $("#count").html(counter);
                       
                        tempWidth = 100/counter;
               
                        $("#accordion li:first").css("width",tempWidth+"%");
                        // alert(tempWidth);
                        }               
                       
                else {               
                        $("#HTML-B").css("background","rgb(208,219,224)");               
                        HTMLb = false;
                        counter--;
                        $("#count").html(counter);
                       
                        $("#accordion li:first").css("width","0px");
                       
                        // alert(tempWidth);               
                       
                        }       
                               
               
        });

                // CSS Button :nth-of-type(2)
       
        $("#CSS-B").click(function() {       
               
                                 
                //toggle
                                                 
                if(CSSb == false) {
                        $("#CSS-B").css("background","rgb(244,250,88)");       
                                CSSb = true;
                                counter++;       
                                $("#count").html(counter);
                               
                                tempWidth = 100/counter;
                       
                                $("#accordion li:nth-of-type(2)").css("width",tempWidth+"%");
                                // alert(tempWidth);                                               
                                }               
                               
               
                else {               
                        $("#CSS-B").css("background","rgb(208,219,224)");
                                CSSb = false;
                                counter--;                               
                                $("#count").html(counter);
               
                                $("#accordion li:nth-of-type(2)").css("width","0px");
                                // alert(tempWidth);
                               
                                }               
       
        });
       
       
        // JS Button :nth-of-type(3)
       
        $("#JS-B").click(function() {
                       
                //toggle
                               
                if(JSb == false) {
                        $("#JS-B").css("background","rgb(244,250,88)");
                        JSb = true;
                        counter++;               
                       
                        $("#count").html(counter);       
                       
                        tempWidth = 100/counter;
                       
                        $("#accordion li:nth-of-type(3)").css("width",tempWidth+"%");
                       
                        // alert(tempWidth);
                                       
                        }               
                       
                else {               
                        $("#JS-B").css("background","rgb(208,219,224)");
                        JSb = false;
                        counter--;                       
                                       
                        $("#count").html(counter);
                       
                        $("#accordion li:nth-of-type(3)").css("width","0px");
                       
                        // alert(tempWidth);
                       
                        }       
        });
       
        // Output Button li:last
               
        $("#output-B").click(function() {
                       
                //toggle
               
                if(OUTb == false) {
                        $("#output-B").css("background","rgb(244,250,88)");
                       
                        OUTb = true;               
                        counter++;               
                        $("#count").html(counter);
                       
                        tempWidth = 100/counter;
                       
                        $("#accordion li:last").css("width",tempWidth+"%");
                       
                        // alert(tempWidth);
                       
                        }               
                       
                else {               
                        $("#output-B").css("background","rgb(208,219,224)");
                       
                        OUTb = false;
                        counter--;               
                        $("#count").html(counter);
                       
                        $("#accordion li:last").css("width","0px");
                       
                        // alert(tempWidth);
       
                        }       
        });
       
       
        });


cloned 04.02.2020 08:53

Meine Frage bleibt die gleiche, wieso schreibst du für jeden Fall einen eigenen Block? Bei 10 Elementen schreibst du dann 100 verschiedene Blöcke?

Hier mal ein Ansatz wie es kürzer geht, ohne doppelten Code:

Am besten auf jsfiddle.net gehen und code dort einfügen (nicht vergessen jquery bei javascript auszuwählen)

Code:

body {
                       
                        font-family: Arial, Helvetica, sans-serif;
                        margin:0px;
                        padding:0px;
               
                        }
                       
                #top-bar {
                       
                        width:100%;
                        height:40px;
                        border: 1px solid grey;
                        background-color:#D8D8D8;       
                        }
     
      button.active {
        background-color: yellow;
      }
                       
                #button {
                        text-align:center;
                       
                       
                        }
               
                button {
                       
                        background:rgb(208,219,224);
                        }       
                       
                       
                /* Accordion */
               
                #accordion {
                        list-style: none;
                        margin: 0;
                        padding: 0;
                        height: 500px;
                        overflow: hidden;
                        background: #7d8d96;}
 
                #accordion li {
                        float: left;
                        display: block;
                        height: 500px;
                        width: 50px;
                        padding: 15px 0;
                        overflow: hidden;
                        color: #fff;
                        text-decoration: none;
                        font-size: 16px;
                        line-height: 1.5em;
                        border-left: 1px solid #fff;}
 
 
                #accordion li.active {
                        width: 450px;
                        }
                       
                       
                       
                li:nth-child(1) {
                        background-color: #2b5fd6;
                        }
               
                li:nth-child(2) {
                        background-color: green;
                        }       
       
                li:nth-child(3) {
                        background-color: red;
                        }


Code:

<div id="top-bar">
               
                <div id="button">
       
                <button type="button" class="js-btn" data-for="html">HTML</button>
                <button type="button" class="js-btn" data-for="css">CSS</button>
                <button type="button" class="js-btn" data-for="js">Javascript</button>
                <button type="button" class="js-btn" data-for="output">Output</button>
       
       
                </div>
        </div>
       
        <div id="body-div">
                <ul id="accordion">
      <li id="html"> 
        <h3>HTML</h3>   
      </li>
      <li id="css">
        <h3>CSS</h3>     
      </li>
      <li id="js">
                    <h3>JavaScript</h3>
      </li>
      <li id="output">
                    <h3>Output</h3>
      </li>
  </ul>
         
        </div>

Code:


$(document).ready(function(){               
 
  function defaultView() {
    $("#accordion li:first").css("width","50%");
    $("#accordion li:nth-of-type(2)").css("width","0px");
    $("#accordion li:nth-of-type(3)").css("width","0px");
    $("#accordion li:first").css("width","50%");
  }
 
  defaultView();
 
  $('.js-btn').on('click', function() {
          const $this = $(this),
                            $accordion = $('#accordion');
    $this.toggleClass('active');
    var totalActiveElements = $('.active').length;
    console.log(totalActiveElements);
    var visible = 100 / totalActiveElements;
                            // console.log($accordion.find('li'));
   
    if (totalActiveElements > 0) {
            $accordion.find('li').css('width', '0px');
            $('.active').each(function(e) {
              console.log(this);
        var id = '#' + $(this).data('for');
        console.log(id);
        $(id).css('width', visible + '%');
      });
    } else {
    defaultView();
    }
   
  });
 
       
       
        });


Iago2 04.02.2020 11:26

Zitat:

Am besten auf jsfiddle.net gehen und code dort einfügen
jsfiddle anstatt Exception Handling?



Code:

$('.js-btn').on('click', function() {
          const $this = $(this),
                            $accordion = $('#accordion');
    $this.toggleClass('active');
    var totalActiveElements = $('.active').length;
    console.log(totalActiveElements);
    var visible = 100 / totalActiveElements;
                            // console.log($accordion.find('li'));
   
    if (totalActiveElements > 0) {
            $accordion.find('li').css('width', '0px');
            $('.active').each(function(e) {
              console.log(this);
        var id = '#' + $(this).data('for');
        console.log(id);
        $(id).css('width', visible + '%');
      });
    } else {
    defaultView();
    }

Ich finde den code sicher irgendwo bei stackoverflow, aber ich würde es eben gerne lernen, verstehen.

cloned 04.02.2020 12:53

Zitat:

Zitat von Iago2 (Beitrag 554080)
jsfiddle anstatt Exception Handling?

Keine Ahnung was du damit meinst, jsfiddle ist nur um schnell etwas zu prüfen.
Bzw. ein Grundgerüst zu entwickeln.
Kannst natürlich auch gerne lokal bei dir die Struktur aufbauen damit du das Ergebnis des Codes siehst.


Zitat:

Zitat von Iago2 (Beitrag 554080)
Ich finde den code sicher irgendwo bei stackoverflow, aber ich würde es eben gerne lernen, verstehen.

Sehr löblich, aber mehr als dir einen Ansatz zu geben kann ich hier auch nicht.
Wenn dir etwas spezifisches unklar ist dann darfst du natürlich gerne fragen, aber so weiß ich nicht, wo ich anfangen soll dir etwas zu erklären.

Iago2 04.02.2020 21:45

Zitat:

Zitat von cloned (Beitrag 554081)
K
Wenn dir etwas spezifisches unklar ist dann darfst du natürlich gerne fragen

Ok :mrgreen:
also ich hab den code so übertragen:
Dann bekomme ich folgende Fehldarstellung:

aktiv: (HTML, CSS): Anzeige: (HTML), (OUTPUT)
aktiv: (CSS, JS), Anzeige: (CSS), (OUTPUT)
aktiv: (HTML,JS), Anzeige: (HTML), (OUTPUT)
aktiv: (HTML,CSS,JS), Anzeige: (HTML),(CSS),(OUTPUT)
aktiv: (CSS), Anzeige: (OUPUT)
aktiv: (JS), Anzeige: (OUPUT)

cloned 05.02.2020 08:26

Das ist keine Frage ;)
Auch ist das kein Fehler meiner JS Logik, das kommt von deinem CSS. Du siehst bei aktiv von HTML + CSS auch nur HTML + CSS, dein akkordion hat nur die selbe Hintergrundfarbe wie dein Output, deshalb hier die falsche Annahme deinerseits.
Entfernst du das CSS von deiner Liste (und den elementen) dann siehst du das alle Elemente richtig da sind. Nachdem ich keine Ahnung habe wie du deinen Output haben willst habe ich hier nichts geändert. Das hat jetzt ja auch nichts mit dem togglen an sich zu tun, da geht es nur um die Darstellung mittels CSS.

Iago2 05.02.2020 11:13

Ok, ja danke.

Ich habe nun die Hintergrundfarbe beim Accordion gelöscht und

HTML-Code:

                li:nth-child(4) {
                        background-color: gray;
                        }

hinzugefügt. Leider bekomme ich nun keine Hintergundfarbe und auch keine
Farbe für Output und die Darstellung macht logisch immer noch keinen Sinn??

Mit Eclipse (Java) gibt es ein Debugging tool, wo man jeden Schritt der Application nachvollziehen kann. Gibt es so etwas mit HTML, CSS, JS?


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:45 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019