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

Geschlossen
  1. #1
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    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.
  2. #2
    User Pic
    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.
  3. #3
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    das hab ich schon probiert hat aber nicht geklappt traurig
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    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.
  5. #5
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    das kapier ich nicht traurig 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.
  6. #6
    User Pic
    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.
  7. #7
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    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.
  8. #8
    User Pic
    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.
  9. #9
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    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.
  10. #10
    User Pic
    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.
  11. #11
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    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.
  12. #12
    User Pic
    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.
  13. #13
    User Pic
    KoernerWS gelöschter User
    ZitatZitat geschrieben von Tr3icio

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


    Da hattest du ein Fehler zwinker
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    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.
  15. #15
    User Pic
    KoernerWS gelöschter User
    Faule Ausrede lachen
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    <!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.
  17. #17
    User Pic
    Tr3icio gelöschter User
    Ich habe den Code nochmal neu gepostet weil dort Fehler drinne waren!
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    ich habe den neuen Code ja benutzt
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    Tr3icio gelöschter User
    In deinem Beispiel ist der alte!
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    hab den Code aus diesem Beitrag verwendet:

    externer Link
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    KoernerWS gelöschter User
    Es heißt doch
    html(string)
    und nicht
    html = string
    !
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    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.
  23. #23
    User Pic
    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 lachen
    0 Mitglieder finden den Beitrag gut.
  24. #24
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    ich kapier hier überhaupt nichts mehr. zu viel Fachchinesisch lachen

    Kann einer von euch bitte einen funktionierenden + fehlerfreien Code posten? Ich blick nämlich überhauot nicht mehr durch traurig
    0 Mitglieder finden den Beitrag gut.
  25. #25
    User Pic
    Tr3icio gelöschter User
    ZitatZitat 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 lachen


    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.
  26. #26
    User Pic
    Ra- Mitglied
    Registriert seit
    01.05.2011
    Beiträge
    317
    Beitragswertungen
    13 Beitragspunkte
    Und wie siehts mit dem von dir geposteten Script aus? Kannst du das bite verbessern? Bitte glücklich
    0 Mitglieder finden den Beitrag gut.
  27. #27
    User Pic
    Tr3icio gelöschter User
    Wurde hier alles erklärt!
    Man kann auch mal lesen!
    0 Mitglieder finden den Beitrag gut.
  28. #28
    User Pic
    KoernerWS gelöschter User
    ZitatZitat 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.
  29. #29
    User Pic
    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.
  30. #30
    User Pic
    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.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten