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
  #21 (permalink)  
Alt 10.02.2020, 14:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 52
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
wenn das dein Ziel ist,
Mein Ziel ist es nicht ständig neue Dinge anzufangen, d.h. das CSS dann an die JS Steuerung anzupassen.
Das sind ja Tutorials, ich hab keinen konkreten Bedarf einen Codeplayer zu implementieren, gibt's ja genug im Netz.
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 10.02.2020, 14:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 52
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Was mich wundert ist, dass wenn ich im originalen CSS den vierten Listenpunkt einfärbe, dieser nicht zu sehen ist (oder die Farbe nicht zu sehen ist):

HTML-Code:
li:nth-child(4) {
			background:rgb(211,211,211);
			}	
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 10.02.2020, 15:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Einfärben funktioniert ja, du musst nur deine float etc. styles entfernen. Aber du hast da irgendeine komische Logik drinnen (die ich auch nicht wirklich gewillt bin zu entwirren, da verweise ich lieber auf flexbox)

Entfernst du all deine float styles dann wird dir auch die Box richtig angezeigt. (Nur halt eben alle untereinander und nicht übereinander)
Mit Zitat antworten
  #24 (permalink)  
Alt 10.02.2020, 22:45
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 52
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Ich habs!

Merci cloned!

HTML-Code:
<!DOCTYPE html>
<html>

	<head>
	
	<title>codeplayerII</title>
	
	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
	
	<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.active {
			background-color: yellow;
			}
			
		#button {
			text-align:center;
			
			}
		
		button {
			
			background:rgb(208,219,224);
			}	
			
			
		/* Accordion */
		
		.accordion {
			
			width:100%;
			height:500px;		
			}
			
 
			
			
		#html {
			
			height:300px;
			background-color: #2b5fd6;
			float:left;
			
			}
		
		#css {
			height:300px;
			background-color: green;
			float:left;
			}	
	
		#js {
			height:300px;
			background-color: red;
			float:left;
			
			}
		
		#output {
			
			height:300px;
			background:rgb(211,211,211);
			float:left;
			}	

	
	</style>
				
	</head>
	
	
	<body>
	
	<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 class="accordion">		
      <div id="html">  <h3>HTML</h3> </div>    
      <div id="css"> <h3>CSS</h3> </div>    
      <div id="js"> <h3>JavaScript</h3>  </div>    
      <div id="output"> <h3>Output</h3> </div>    
      
  </div>
	
	<script type="text/javascript">
	
	
	$(document).ready(function(){		
  
  function defaultView() {
    $("#html").css("width","50%");
    $("#css").css("width","0px");
    $("#js").css("width","0px");
    $("#output").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(visible);
     // console.log($accordion.find(div));
    
    if (totalActiveElements > 0) {
    	$accordion.find('div').css('width', '0px'); //reset all elements that only the active elements will be displayed. 
    	
    	$('.active').each(function(e) {
         
         	//console.log(this);
         
         var id = '#' + $(this).data('for');
         
            //console.log(id);

         $(id).css('width', visible + '%');
      });
      
    } 
    else {
     defaultView();  // if(totalActiveElements == 0);
    }
    
  }); 
	
});

	
	</script>
	
	</body>	

</html>

Mit Zitat antworten
  #25 (permalink)  
Alt 11.02.2020, 13:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Noch eine Lösung mit flexbox:

Code:
$(document).ready(function() {
  $('.js-btn').on('click', function() {
    const $this = $(this),
      $accordion = $('.accordion');

    $this.toggleClass('active');
    var totalActiveElements = $('button.active').length

    if (totalActiveElements > 0) {
      $accordion.find('> div').removeClass('active');

      $('button.active').each(function(e) {
        var id = '#' + $(this).data('for');
        $(id).toggleClass('active');
      });

    } else {
      $accordion.find('> div').removeClass('active'); // if(totalActiveElements == 0);
    }
  });
});
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-color: rgb(208, 219, 224);
}


/* Accordion */

.accordion {
  height: 300px;
  display: flex;
}

#html {
  background-color: #2b5fd6
}

#css {
  background-color: green;
}

#js {
  background-color: red;
}

#output {
  background-color: rgb(211, 211, 211);
}

.accordion > div {
  display: none;
  flex: 1;
}

.accordion > div.active {
  display: block;
}
HTML bleibt gleich.
Mit Zitat antworten
  #26 (permalink)  
Alt 14.02.2020, 13:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 52
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Für die Default Einstellung (HTML links, Output rechts) habe ich folgendes versucht, was aber leider so nicht geht:

Code:
else {
      $accordion.find('html').addClass('active'); 
      $accordion.find('output').addClass('active'); 
    }  
    }
Mit Zitat antworten
  #27 (permalink)  
Alt 14.02.2020, 15:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Du solltest dich zumindest in die Grundlagen von CSS einlesen.
jQuery arbeitet mit CSS-Selektoren um Elemente auszuwählen. Ein Element <output> gibt es zB nicht, da kann er dann natürlich auch keine Klasse ändern.
Auch solltest du, wenn es dir weniger um CSS als mehr um das lernen von Js geht meinen Hinweis auf die im Browser eingebauten dev-tools annehmen. Dann setzt du dir breakpoints in deinem code und analysierst was zum jeweiligen Stand in einer Variable steht, bzw. in einem jquery Selector.
Mit Zitat antworten
  #28 (permalink)  
Alt 15.02.2020, 15:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 52
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Du solltest dich zumindest in die Grundlagen von CSS einlesen.
Eher, Hirn einschalten vergessen!
Also alles easy, analog wie im Beispiel ohne Flex, auch die Breakpoints!

Else wird ja auch erst ausgeführt, wenn man die Buitton wieder ausschaltet.

Code:
<script type="text/javascript">
	
	
	$(document).ready(function() {
		
		function defaultView() {
    
     $('#html').addClass('active'); 
      $('#output').addClass('active'); 
      $('#css').removeClass('active');
      $('#js').removeClass('active');
		
  }
  
  defaultView();
				
  $('.js-btn').on('click', function() {
	  
    const $this = $(this),
      $accordion = $('.accordion');

    $this.toggleClass('active');
    var totalActiveElements = $('button.active').length;
    
    // console.log(visible);
     // console.log($accordion.find('div'));
    

    if (totalActiveElements > 0) {
      $accordion.find('> div').removeClass('active');

      $('button.active').each(function(e) {
		  
		  console.log(this);
		  
        var id = '#' + $(this).data('for');
        
         //console.log(id);
        $(id).toggleClass('active');
      });

    } else {
			 
		// console.log($('.accordion').find('div'));
		
		   defaultView();
    }
  });
});
	
	</script>
Mit Zitat antworten
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 17:13 Uhr.