Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

Nicmare · 29-07-2009, 17:52

Also ich habe zwei Probleme. Problem 1: Folgendes Script funktioniert in FF und Safari aber in keinem IE! Da reagiert er für mich unnachvollziehbar. Am besten ihr schaut euch das selber mal an. Hier mein Script:

HTML-Code:

<script type="text/javascript">


jQuery(function( $ ){
	$('#filter :checkbox').change(function (){
		var $criteria = $(this).attr("id");
		if($(this).hasClass("checked"))
		{
			$(this).removeClass("checked");
			$('#clientlist a.'+$criteria).removeClass('filtered');
			$('#clientdetail li.'+$criteria).removeClass('selected');
			return true;
		} else {
			$(this).addClass('checked');
			$('#clientlist a.'+$criteria).addClass('filtered');
			$('#clientdetail li.'+$criteria).addClass('selected');
		};
	});
});
	

</script>

html:

HTML-Code:

 <div id="clients" class="center">
                        <div id="filter">
                            <input type="checkbox" name="filter" id="web" />
                            <label for="web">Web</label>
                            <input type="checkbox" name="filter" id="print" />
                            <label for="print">Print</label>

                            <input type="checkbox" name="filter" id="coding" />
                            <label for="coding">Coding</label><br />
                        </div>
                        <ul id="clientlist">
                            <li><a href="#" class="web coding">Link1</a></li>
                            <li><a href="#" class="coding">Link2</a></li>
                            <li><a href="#" class="print">Link3</a></li>

                            <li><a href="#" class="web coding">Link4</a></li>
                            <li><a href="#" class="web print">Link5</a></li>
                        </ul>
                        <div id="clientdetail" class="box white">
                            <ul>
                            	<li class="web"><a href="#">Client1</a></li>
                            	<li class="coding"><a href="#">Client1</a></li>

                            	<li class="print"><a href="#">Client1</a></li>
                            	<li class="coding"><a href="#">Client1</a></li>
                            	<li class="print web"><a href="#">Client1</a></li>
                            	<li class="web"><a href="#">Client1</a></li>
                            	<li class="coding"><a href="#">Client1</a></li>
                            	<li class="web"><a href="#">Client1</a></li>

                            	<li class="print"><a href="#">Client1</a></li>
                            	<li class="web coding"><a href="#">Client1</a></li>
                            	<li class="web"><a href="#">Client1</a></li>
                            	<li class="web"><a href="#">Client1</a></li>
                            </ul>
                        </div>
                	</div>

css:

HTML-Code:

#clientlist {
	margin:10px 0 0 0;
	padding:0;
	float:left;
	width:200px;}
	
#clientlist li {
	list-style:none;}

#clientlist a {
	display:block;
	height:24px;
	line-height:24px;
	padding:2px 2px 2px 10px;/*top right bottom left*/
	color:#009EE1;
	text-decoration:none;
	background:#EAF6FD;
	outline:0;
	margin:0 1px 1px 1px}
	
#clientlist a.filtered {
	padding-left:20px;}
	
#clientlist a:hover {
	text-decoration:underline;}
	
#clientlist a.selected {
	background:#BCE4F6;}
	
#filter input, #filter label {
	float:left;
	margin-right:6px;}
	
#filter label {
	line-height:18px;}
	
#filter input {
	}
	
#filter br, #filter strong {
	clear:both; display:block;}
	
#filter input {}

#clientdetail {
	float:left;
	width:400px;
	height:308px;}
	
#clientdetail ul {
	margin:0;
	padding:0;}
	
#clientdetail li {
	list-style:none;
	float:left;
	width:128px;
	height:72px;
	border:1px solid #009EE1;
	padding:1px;
	margin:0 1px 1px 0;}
	
#clientdetail li.selected, #clientdetail li:hover {
	border:2px solid #000;
	padding:0px;}
	
#clientdetail a {
	text-indent:-9999px;
	float:left;
	width:128px;
	height:72px;
	display:block;
	outline:0;
	background:#009EE1;
	margin:0px}

Das HTML und CSS ist an der Stelle nicht so wichtig meine ich aber habe es trotzdem mal angehängt.

Das wäre Problem1. Problem2:
Wenn man zB "Web" anhakt, dann werden die entsprechenden items in der Liste makiert. Wenn noch "Print" dazukommt, steigt natürlich auch die anzahl der gewählten Items. Auch die, die sich überschneiden (es gibt schließlich Web UND Print Sachen) Problem kommt jetzt: Wenn man "Print" abhakt, werden auch items demakiert, die noch zu Web gehören. Das soll nicht sein. Hier bräuchte ich mal einen Denkanstoß?! Kleine Knobelaufgabe die ich mit :not und .not() nicht lösen konnt

.

Nightflyer · 29-07-2009, 18:42

Problem 1) onclick anstelle von onchange. Der IE interpretiert das onchange erst als vollständig wenn nicht nur das Häkchen gesetzt wurde sondern wenn danach auch noch irgendwo auf die Seite geklickt wurde.

Problem 2) Wenn etwas deselektiert wird lösche erst mal alles und durchlaufe die checkboxen wieder und markier die Rahmen wenn die checkbox angekreutzt ist

Nicmare · 29-07-2009, 20:37

ich hatte es erst mit onclick! aber das geht offenbar mit checkboxen nicht! zwar funzt die funktion, das klicken als solches, aber es wird kein häkchen gesetzt! das mit onchange habe ich mir mühesam ergooglet ;-). übrigens kriegt der IE das im grunde schon hin. Aber erst wenn man das häkchen wegmacht! also im prinzip genau verkehrt herum!!

zu tipp2: klingt interessant. also im grunde wieder alles deselektieren und gucken welche checkboxen noch angehakt sind und entsprechend dann ausführen... ich probiere das mal! danke

Nicmare · 29-07-2009, 22:14

zu erstens: geht hier bei mir an vista. vorhin beim mac hatte ich probleme mit click. muss ich dann nochmal testen morgen!

bei zweitens stehe ich noch auf dem schlauch...wie in etwa müsste die abfrage zur überprüfung der klassen lauten?

Nightflyer · 30-07-2009, 11:57

Code:

$(document).ready( function(){

	$('#filter input:checkbox').click( function(){

		var criteria = this.id;

		if( $(this).hasClass("checked") ){

			//Alle Markierungen entfernen
			$(this).removeClass('checked');
			$('#clientlist a').removeClass('filtered');
			$('#clientdetail li').removeClass('selected');

			$('#filter input:checkbox:checked').each( function(){

				criteria = this.id;
				$('#clientlist a.'+criteria).addClass('filtered');
				$('#clientdetail li.'+criteria).addClass('selected');

			});
			

		}else{

			$(this).addClass('checked');
			$('#clientlist a.'+criteria).addClass('filtered');
			$('#clientdetail li.'+criteria).addClass('selected');


		}
	

	});

});

Dürfte so klappen

Nicmare · 30-07-2009, 15:07

tatsächlich! es klappt. dabei hast du garnicht so viel geändert. aber das war die lösung:

HTML-Code:

$('#filter input:checkbox:checked').each( function(){

vielen dank :-)

Nicmare · 05-08-2009, 20:00

Nightyyyyyy????

....
Habe da nochmal eine Ergänzung.
Statt dem einen Element ne Klasse zuzuweisen, will ich es einfach aus und einblenden lassen. Funktioniert soweit:

HTML-Code:

var criteria = this.id;
		if( $(this).hasClass("checked") ){
			//Alle Markierungen entfernen
			$(this).removeClass('checked');
			$('#clientlist li').removeClass('filtered');
			$('#clientlist  span').remove();
			$('#clientdetail li').fadeIn();
		
			$('#filter input:checkbox:checked').each( function(){
				criteria = this.id;
				$('#clientlist li.'+criteria).addClass('filtered');
				$('#clientdetail li').not('#clientdetail li.'+criteria).fadeOut();
				$('#clientlist li.'+criteria+' a').prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>');
			});	
		}else{

			$(this).addClass('checked');
			$('#clientlist li.'+criteria).addClass('filtered');
			$('#clientdetail li').not('#clientdetail li.'+criteria).fadeOut();
			$('#clientlist li.'+criteria+' a').prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>');
		}

Allerdings funktioniert das immer nur perfekt wenn man nur eine checkbox bedient. Bei mehreren, werden es weniger statt mehr elemente?! irgendwie hab ich nen denkfehler bei $('#clientdetail li').not('#clientdetail li.'+criteria).fadeOut(); ?!

Nightflyer · 05-08-2009, 22:25

Das not darf natürlich nicht in die Schlaufe da es sonst alles trifft ausser den Elementen im letzten Schlaufendurchgang. Habs jetzt noch etwas gekürzt. Zuerst alle Selektierten einblenden, dann alle andern ausblenden.

Code:

	$(document).ready( function(){

		$('#filter input:checkbox').click( function(){

			var criteria = this.id;
			var debug = '';
				
			//Alle Markierungen entfernen
			$(this).removeClass('checked');
			$('#clientlist li').removeClass('filtered');
			$('#clientlist span').remove();
			
			$('#filter input:checkbox:checked').each( function(){
				
				criteria = this.id;
				$('#clientlist li.'+criteria).addClass('filtered');
				$('#clientdetail li.'+criteria).fadeTo("slow", 1);
				
			});
			
			$('#filter input:checkbox').not(':checked').each( function(){
				
				criteria = this.id;
				$('#clientdetail li.'+criteria).fadeTo("slow", 0.1);
			
			});
		
		});
		
	});

Nicmare · 05-08-2009, 22:48

hmm. da fehlt jetzt die if schleife. gefällt mir.
jedoch faden die NICHTmakierten alle auf 0.1 und dann faden danach alle anderen (also makierten) auch auf 0.1? ganz alleine. da stekct noch der wurm drin. check ich nicht.

Nightflyer · 05-08-2009, 22:59

Nun ja, so wars von mir gedacht. Zuerst alle markierten einblenden und dann alle nicht markierten ausblenden. Was gefällt dir daran denn nicht?

Nicmare · 05-08-2009, 23:04

also ich probiere gerade bissl rum aus dem alten code und deinem neuen.
habe eben den einen div mit listelements und classen (criteria). diese listenelemente wollte ich "stehen" lassen wenn die entsprechende checkbox angehakt ist. alle anderen sollen gehidet oder ausgefadet werden (fadeto ist ja auch ok). wenn man unchecked, dann soll das wieder resettet werden. also im grunde unspektakulär. blos die mehreren checkboxen sind problematisch

Nightflyer · 06-08-2009, 07:35

Ansatzen gibst du halt jeder Box eine ID und machst drei Arrays mit den ID's welche angezeigt werden sollen wenn ein Kästchen gehakt ist. Dann musst noch etwas mit array_diff (leider gibts diese Funktion nicht in JS) rumspielen damit immer nur die Boxen ausgeblendet werden welche du nicht mehr willst.

29-07-2009, 18:42	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Problem 1) onclick anstelle von onchange. Der IE interpretiert das onchange erst als vollständig wenn nicht nur das Häkchen gesetzt wurde sondern wenn danach auch noch irgendwo auf die Seite geklickt wurde. Problem 2) Wenn etwas deselektiert wird lösche erst mal alles und durchlaufe die checkboxen wieder und markier die Rahmen wenn die checkbox angekreutzt ist __________________ (\__/) (='.'=) (")_(")

30-07-2009, 15:07	#6 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	tatsächlich! es klappt. dabei hast du garnicht so viel geändert. aber das war die lösung: HTML-Code: $('#filter input:checkbox:checked').each( function(){ vielen dank :-)

05-08-2009, 22:59	#10 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Nun ja, so wars von mir gedacht. Zuerst alle markierten einblenden und dann alle nicht markierten ausblenden. Was gefällt dir daran denn nicht? __________________ (\__/) (='.'=) (")_(")

05-08-2009, 23:04	#11 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	also ich probiere gerade bissl rum aus dem alten code und deinem neuen. habe eben den einen div mit listelements und classen (criteria). diese listenelemente wollte ich "stehen" lassen wenn die entsprechende checkbox angehakt ist. alle anderen sollen gehidet oder ausgefadet werden (fadeto ist ja auch ok). wenn man unchecked, dann soll das wieder resettet werden. also im grunde unspektakulär. blos die mehreren checkboxen sind problematisch Geändert von Nicmare (05-08-2009 um 23:06 Uhr)

06-08-2009, 07:35	#12 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Ansatzen gibst du halt jeder Box eine ID und machst drei Arrays mit den ID's welche angezeigt werden sollen wenn ein Kästchen gehakt ist. Dann musst noch etwas mit array_diff (leider gibts diese Funktion nicht in JS) rumspielen damit immer nur die Boxen ausgeblendet werden welche du nicht mehr willst. __________________ (\__/) (='.'=) (")_(")

29-07-2009, 20:37	#3 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	ich hatte es erst mit onclick! aber das geht offenbar mit checkboxen nicht! zwar funzt die funktion, das klicken als solches, aber es wird kein häkchen gesetzt! das mit onchange habe ich mir mühesam ergooglet ;-). übrigens kriegt der IE das im grunde schon hin. Aber erst wenn man das häkchen wegmacht! also im prinzip genau verkehrt herum!! zu tipp2: klingt interessant. also im grunde wieder alles deselektieren und gucken welche checkboxen noch angehakt sind und entsprechend dann ausführen... ich probiere das mal! danke

29-07-2009, 22:14	#4 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	zu erstens: geht hier bei mir an vista. vorhin beim mac hatte ich probleme mit click. muss ich dann nochmal testen morgen! bei zweitens stehe ich noch auf dem schlauch...wie in etwa müsste die abfrage zur überprüfung der klassen lauten?

05-08-2009, 22:48	#9 (permalink)
Nicmare Wetmaster Registriert seit: Aug 2001 Ort: BERLIN Beiträge: 3.075	hmm. da fehlt jetzt die if schleife. gefällt mir. jedoch faden die NICHTmakierten alle auf 0.1 und dann faden danach alle anderen (also makierten) auch auf 0.1? ganz alleine. da stekct noch der wurm drin. check ich nicht.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln