• Forum
• Allgemein
• HTML, PHP, SQL,...
• Javascript ein-/ausblenden

ilch Forum » Allgemein » HTML, PHP, SQL,... » Javascript ein-/ausblenden

1. So. 17.07.2011 18:12 Uhr #1

   

   Ra- Mitglied

   Registriert seit

   01.05.2011

   Beiträge

   317

   Beitragswertungen

   

   Hallo,
   
   ich habe aus einem Memberlistmod einen javascript Code benutzt um dinge ein und auszublenden. Dafür braucht man 2 bilder die anzeigen obs aus oder eingeblendet ist. Ich möchte das aber gerne durch einen Schriftzug anzeigen lassen.
   
   Kann mir da jemand helfen?
   
   Hier der code:
   
   

   <script type="text/javascript">
   function Klappen(Id) {
   var KlappText = document.getElementById('Lay'+Id);
   var KlappBild = document.getElementById('Pic'+Id);
   var jetec_Minus="inhalt/codeschnipsel/minus.gif", jetec_Plus="inhalt/codeschnipsel/plus.gif";
   if (KlappText.style.display == 'none') {
   KlappText.style.display = 'block';
   KlappBild.src = jetec_Minus;
   } else {
   KlappText.style.display = 'none';
   KlappBild.src = jetec_Plus;
   }}
   </script>

   0 Mitglieder finden den Beitrag gut.

   • zitieren
2. So. 17.07.2011 18:18 Uhr #2

   

   Tr3icio gelöschter User

   Du musst ein Element erstellen ( Beispiel: <div class="test1"> [ es geht vor allem auch um die klasse! ] )
   Dann in deinem Code das src in innerHTML ändern.
   
   Beispiel:
   
   

   <script type="text/javascript">
   function Klappen(Id) {
   var KlappText = document.getElementById('Lay'+Id);
   var KlappContainer = document.getElementById('klappText'+Id);
   var jetec_Minus="[-]", jetec_Plus="[+]";
   if (KlappText.style.display == 'none') {
   KlappText.style.display = 'block';
   KlappContainer.innerHTML = jetec_Minus;
   } else {
   KlappText.style.display = 'none';
   KlappContainer.innerHTML = jetec_Plus;
   }}
   </script>

   
   
   Du müsstest dann nur nen Container machen:
   
   

   <span id="klappText1" onclick="Klappen(1)">[+]</span>

   0 Mitglieder finden den Beitrag gut.

   • zitieren
3. So. 17.07.2011 18:20 Uhr #3

   

   Ra- Mitglied

   Registriert seit

   01.05.2011

   Beiträge

   317

   Beitragswertungen

   

   das hab ich schon probiert hat aber nicht geklappt
   0 Mitglieder finden den Beitrag gut.

   • zitieren
4. So. 17.07.2011 18:30 Uhr #4

   

   Tr3icio gelöschter User

   Sonst bin dir über Google jQuery ein dannr eicht auch n simples:
   
   

   document.ready(function(){
   
   	$('.spoiler').click(function(){
   	
   		var id = $(this).attr('id');
   		
   		$('spoiler_' + id).toogle("slow", function(){
   			
   			if ( $('spoiler_' + id).is(':hidden') ) {
   			
   				$(this).html = '[+]';
   				
   			} else {
   				
   				$(this).html = '[-]';
   				
   			}
   				
   		});
   		
   	});
   
   });

   
   
   Oder animiert:
   
   

   document.ready(function(){
   
   	$('.spoiler').click(function(){
   	
   		var id = $(this).attr('id');
   		
   		$('spoiler_' + id).slideToogle("slow", function(){
   			
   			if ( $('spoiler_' + id).is(':hidden') ) {
   			
   				$(this).html = '[+]';
   				
   			} else {
   				
   				$(this).html = '[-]';
   				
   			}
   				
   		});
   		
   	});
   
   });

   
   
   Hier der Code für jQuery:
   
   

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

   
   
   
   Zuletzt modifiziert von Tr3icio am 17.07.2011 - 18:32:20
   0 Mitglieder finden den Beitrag gut.

   • zitieren
5. So. 17.07.2011 21:07 Uhr #5

   

   Ra- Mitglied

   Registriert seit

   01.05.2011

   Beiträge

   317

   Beitragswertungen

   

   das kapier ich nicht Soll ich den Code gegen meinen ersetzen oder nur ergänzen? Und wenn ergänzen: Wie?
   
   währe dir dankbar wenn du mir helfen kannst.
   0 Mitglieder finden den Beitrag gut.

   • zitieren
6. So. 17.07.2011 21:12 Uhr #6

   

   Tr3icio gelöschter User

   deinen ersetzen durch meinen.
   
   Erst den 3. den ich gepostet habe ( um jquery einzubinden )
   Dann einen der beiden ersten ( der 2. Code ist mit Effekt! )
   0 Mitglieder finden den Beitrag gut.

   • zitieren
7. So. 17.07.2011 21:22 Uhr #7

   

   Ra- Mitglied

   Registriert seit

   01.05.2011

   Beiträge

   317

   Beitragswertungen

   

   gut und wie sieht der link aus wo ich dann raufklicke? Ich muss ja irgentwo {uid} einbauen und nen link habe der das script ausführt oder?
   0 Mitglieder finden den Beitrag gut.

   • zitieren
8. So. 17.07.2011 21:25 Uhr #8

   

   Tr3icio gelöschter User

   zum Öffnen :
   
   

   <span class="spoiler" id="{uid}>[+]</span>

   
   
   Inhalt:
   
   

   <div id="spoiler_{uid}">Inhalt</div>

   0 Mitglieder finden den Beitrag gut.

   • zitieren
9. So. 17.07.2011 21:32 Uhr #9

   

   Ra- Mitglied

   Registriert seit

   01.05.2011

   Beiträge

   317

   Beitragswertungen

   

   ich kapiers nicht. Also es funktioniert nicht. Aber ich brauch doch grundsätzlich einen link zum drauf klicken oder wie soll sonst der Spoiler ausfahren?
   0 Mitglieder finden den Beitrag gut.

   • zitieren
10. So. 17.07.2011 22:05 Uhr #10

    

    Tr3icio gelöschter User

    wieso link? ich hab in meinem vorherigen post 2 code. der erste öffnet den inhalt!
    0 Mitglieder finden den Beitrag gut.

    • zitieren
11. Mo. 18.07.2011 18:36 Uhr #11

    

    Ra- Mitglied

    Registriert seit

    01.05.2011

    Beiträge

    317

    Beitragswertungen

    

    eben nicht. funktioniert nicht. der javascript code muss doch in den headbereich richtig?
    
    
    Zuletzt modifiziert von Ra- am 18.07.2011 - 18:37:20
    0 Mitglieder finden den Beitrag gut.

    • zitieren
12. Mo. 18.07.2011 18:37 Uhr #12

    

    Tr3icio gelöschter User

    Was sagt den die Console?
    Ok mein Fehler:
    
    

    $(document).ready(function(){
     
        $('.spoiler').click(function(){
       
            var id = $(this).attr('id');
           
            $('#spoiler_' + id).toogle("slow", function(){
               
                if ( $('#spoiler_' + id).is(':hidden') ) {
               
                    $(this).html = '[+]';
                   
                } else {
                   
                    $(this).html = '[-]';
                   
                }
                   
            });
           
        });
     
    });

    
    
    Und animiert:
    
    

    $(document).ready(function(){
     
        $('.spoiler').click(function(){
       
            var id = $(this).attr('id');
           
            $('#spoiler_' + id).slideToogle("slow", function(){
               
                if ( $('#spoiler_' + id).is(':hidden') ) {
               
                    $(this).html = '[+]';
                   
                } else {
                   
                    $(this).html = '[-]';
                   
                }
                   
            });
           
        });
     
    });

    
    
    
    Zuletzt modifiziert von Tr3icio am 18.07.2011 - 18:39:10
    0 Mitglieder finden den Beitrag gut.

    • zitieren
13. Mo. 18.07.2011 18:48 Uhr #13

    

    KoernerWS gelöschter User

    Zitat geschrieben von Tr3icio

    
    

    <span class="spoiler" id="{uid}">[+]</span>

    
    

    
    Da hattest du ein Fehler
    0 Mitglieder finden den Beitrag gut.

    • zitieren
14. Mo. 18.07.2011 18:53 Uhr #14

    

    Tr3icio gelöschter User

    Ja ist schlecht wenn ich beim essen Code hinschmiere :-P
    Essen geht bei mir vor^^
    0 Mitglieder finden den Beitrag gut.

    • zitieren
15. Mo. 18.07.2011 19:14 Uhr #15

    

    KoernerWS gelöschter User

    Faule Ausrede
    0 Mitglieder finden den Beitrag gut.

    • zitieren
16. Mo. 18.07.2011 19:17 Uhr #16

    

    Ra- Mitglied

    Registriert seit

    01.05.2011

    Beiträge

    317

    Beitragswertungen

    

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    document.ready(function(){
        $('.spoiler').click(function(){
            var id = $(this).attr('id');
            $('spoiler_' + id).toogle("slow", function(){
                if ( $('spoiler_' + id).is(':hidden') ) {
                    $(this).html = '[+]';
                } else {
                    $(this).html = '[-]';
                }
            });
        });
    });
    </script>
    </head>
    
    <body>
        <span class="spoiler" id="{uid}">[+]</span>
        <div id="spoiler_{uid}">Inhalt</div>
    </body>
    </html>

    
    
    So einfach mal zu testen. Funktioniert nicht oder versteh ich da was falsch?
    0 Mitglieder finden den Beitrag gut.

    • zitieren
17. Mo. 18.07.2011 19:54 Uhr #17

    

    Tr3icio gelöschter User

    Ich habe den Code nochmal neu gepostet weil dort Fehler drinne waren!
    0 Mitglieder finden den Beitrag gut.

    • zitieren
18. Mo. 18.07.2011 20:06 Uhr #18

    

    Ra- Mitglied

    Registriert seit

    01.05.2011

    Beiträge

    317

    Beitragswertungen

    

    ich habe den neuen Code ja benutzt
    0 Mitglieder finden den Beitrag gut.

    • zitieren
19. Mo. 18.07.2011 20:10 Uhr #19

    

    Tr3icio gelöschter User

    In deinem Beispiel ist der alte!
    0 Mitglieder finden den Beitrag gut.

    • zitieren
20. Mo. 18.07.2011 20:20 Uhr #20

    

    Ra- Mitglied

    Registriert seit

    01.05.2011

    Beiträge

    317

    Beitragswertungen

    

    hab den Code aus diesem Beitrag verwendet:
    
    externer Link
    0 Mitglieder finden den Beitrag gut.

    • zitieren
21. Mo. 18.07.2011 20:21 Uhr #21

    

    KoernerWS gelöschter User

    Es heißt doch

    html(string)

    und nicht

    html = string

    !
    0 Mitglieder finden den Beitrag gut.

    • zitieren
22. Mo. 18.07.2011 20:27 Uhr #22

    

    Tr3icio gelöschter User

    Echt? Ohh mein Fehler :-P Hab zu viel andere Frameworks angeguckt in letzter Zeit xD
    
    Ach und Ra-
    
    

    $('spoiler_' + id).toogle("slow", function(){

    
    
    Steht in deinem Beispiel .. in dem Beitrag den du gerade als link egpostet hast steht es aber anders!
    0 Mitglieder finden den Beitrag gut.

    • zitieren
23. Mo. 18.07.2011 20:50 Uhr #23

    

    KoernerWS gelöschter User

    Ja, ohne Witz. Bei jQuery ist des' eine Funktion namens html. :/
    Variablen - wo kommen wir da hin? Dann können wir ja gleich JS Core proggen
    0 Mitglieder finden den Beitrag gut.

    • zitieren
24. Mo. 18.07.2011 20:59 Uhr #24

    

    Ra- Mitglied

    Registriert seit

    01.05.2011

    Beiträge

    317

    Beitragswertungen

    

    ich kapier hier überhaupt nichts mehr. zu viel Fachchinesisch
    
    Kann einer von euch bitte einen funktionierenden + fehlerfreien Code posten? Ich blick nämlich überhauot nicht mehr durch
    0 Mitglieder finden den Beitrag gut.

    • zitieren
25. Mo. 18.07.2011 21:56 Uhr #25

    

    Tr3icio gelöschter User

    Zitat geschrieben von KoernerWS

    
    Ja, ohne Witz. Bei jQuery ist des' eine Funktion namens html. :/
    Variablen - wo kommen wir da hin? Dann können wir ja gleich JS Core proggen
    

    
    
    Ich weiß das es ne Funktion ist^^ Habs nur in dem moment vergessen weil ich so lange kein jQuery mehr benutzt habe ^^ Benutze ab demnächst sowieso n viel besseres JS Framework was ich erstmal lernen muss. ( Ok net viel besser .. das beste xD )
    0 Mitglieder finden den Beitrag gut.

    • zitieren
26. Mo. 18.07.2011 22:12 Uhr #26

    

    Ra- Mitglied

    Registriert seit

    01.05.2011

    Beiträge

    317

    Beitragswertungen

    

    Und wie siehts mit dem von dir geposteten Script aus? Kannst du das bite verbessern? Bitte
    0 Mitglieder finden den Beitrag gut.

    • zitieren
27. Mo. 18.07.2011 22:17 Uhr #27

    

    Tr3icio gelöschter User

    Wurde hier alles erklärt!
    Man kann auch mal lesen!
    0 Mitglieder finden den Beitrag gut.

    • zitieren
28. Mo. 18.07.2011 22:26 Uhr #28

    

    KoernerWS gelöschter User

    Zitat geschrieben von Tr3icio

    
    Benutze ab demnächst sowieso n viel besseres JS Framework
    

    
    Sowas WILL ich hier NICHT hören. Das ist eine Meinungssache.
    
    
    "Benutze demnächst ein JS Framework, das ich persönlich besser finde." Das wäre korrekt. - Das war im übrigen KEINE Ironie, sondern purer Ernst.
    
    
    Noobs extra zu verwirren, weil jeder ein anderes Framework als das "Beste" bezeichnet ist gemein. <= Das war Ironie :p
    0 Mitglieder finden den Beitrag gut.

    • zitieren
29. Mo. 18.07.2011 22:28 Uhr #29

    

    Tr3icio gelöschter User

    Es ist auf jedenfall größer :-P weiß gerade nicht wie viele zeilen . Glaube mehr als 10 mal so viele wie jQuery ( also wenn beide unkomprimiert sind ) xD
    0 Mitglieder finden den Beitrag gut.

    • zitieren
30. Mo. 18.07.2011 22:42 Uhr #30

    

    KoernerWS gelöschter User

    Kann auch auf eine schlechte Programmierung hinweisen. Um so größer die JS-Datei, um so schlechter eigentlich.
    0 Mitglieder finden den Beitrag gut.

    • zitieren