zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Accordion / Felder Anordnung, Steuerung funktioniert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.01.2020, 16:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard 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>


Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2020, 07:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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. }
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.02.2020, 11:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 03.02.2020, 18:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
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

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);
	
			}	
	});
	
	
	});
Mit Zitat antworten
  #5 (permalink)  
Alt 04.02.2020, 09:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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();
    }
    
  });
  
	
	
	});
Mit Zitat antworten
  #6 (permalink)  
Alt 04.02.2020, 12:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Iago2 (04.02.2020 um 13:16 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 04.02.2020, 13:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
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 anzeigen
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.02.2020, 22:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
K
Wenn dir etwas spezifisches unklar ist dann darfst du natürlich gerne fragen
Ok
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)

Geändert von Iago2 (04.02.2020 um 22:54 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 05.02.2020, 09:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 05.02.2020, 12:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Felder Anordnung Problem radon CSS 1 19.11.2006 19:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:21 Uhr.