zurck zur Startseite
  


Zurck XHTMLforum > Webentwicklung (auer 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, 15:43
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
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, 06:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich ber einen ToggelButton den Wert einer Variablen verndere, dann msste ich doch mit diesen Werten eine Steuerung implementieren knnen?

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, 10:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beitrge: 2.059
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
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 fr 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, 17:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
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, 08:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beitrge: 2.059
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Meine Frage bleibt die gleiche, wieso schreibst du fr jeden Fall einen eigenen Block? Bei 10 Elementen schreibst du dann 100 verschiedene Blcke?

Hier mal ein Ansatz wie es krzer geht, ohne doppelten Code:

Am besten auf jsfiddle.net gehen und code dort einfgen (nicht vergessen jquery bei javascript auszuwhlen)

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, 11:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Am besten auf jsfiddle.net gehen und code dort einfgen
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 wrde es eben gerne lernen, verstehen.

Gendert von Iago2 (04.02.2020 um 12:16 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 04.02.2020, 12:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beitrge: 2.059
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von Iago2 Beitrag anzeigen
jsfiddle anstatt Exception Handling?
Keine Ahnung was du damit meinst, jsfiddle ist nur um schnell etwas zu prfen.
Bzw. ein Grundgerst zu entwickeln.
Kannst natrlich 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 wrde es eben gerne lernen, verstehen.
Sehr lblich, aber mehr als dir einen Ansatz zu geben kann ich hier auch nicht.
Wenn dir etwas spezifisches unklar ist dann darfst du natrlich gerne fragen, aber so wei ich nicht, wo ich anfangen soll dir etwas zu erklren.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.02.2020, 21:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
K
Wenn dir etwas spezifisches unklar ist dann darfst du natrlich 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)

Gendert von Iago2 (04.02.2020 um 21:54 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 05.02.2020, 08:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beitrge: 2.059
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
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 gendert. 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, 11:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beitrge: 73
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Ok, ja danke.

Ich habe nun die Hintergrundfarbe beim Accordion gelscht und

HTML-Code:
		li:nth-child(4) {
			background-color: gray;
			}
hinzugefgt. Leider bekomme ich nun keine Hintergundfarbe und auch keine
Farbe fr 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 Beitrge zu antworten.
Es ist Ihnen nicht erlaubt, Anhnge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beitrge 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 18:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:54 Uhr.