Ajax Slide In / Slide Out

  • Ajax Slide In / Slide Out

    Tach Leute :)

    Folgendes Problem ich habe einen Ajax Schnippsel der eigentlich fast das gleiche wie moo.fx macht. Funktioniert alles wunderbar, jedoch stört mich da ne kleinigkeit.

    Folgender Code:

    Quellcode

    1. // JavaScript Document
    3. $(document).ready(function(){
    5. $("div.contentToChange").find("p.fourthparagraph").hide();
    6. //Code for example B
    7. $("input.buttonBslidedown").click(function(){ $("div.contentToChange").find("p.fourthparagraph:hidden").slideDown("slow"); });
    8. $("input.buttonBslideup").click(function(){ $("div.contentToChange").find("p.fourthparagraph:visible").slideUp("slow"); });
    9. //show code example B
    10. $("a.codeButtonB").click(function(){$("pre.codeB").show()});
    11. $("a.codeButtonB").click(function(){$("pre.codeB").hide()});
    13. function easeInOut(minValue,maxValue,totalSteps,actualStep,powr) {
    14. var delta = maxValue - minValue;
    15. var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
    16. return Math.ceil(stepp)
    17. }
    19. function addFade() {
    20. doBGFade(this,[255,255,100],[255,255,255],'transparent',75,20,4);
    21. }
    23. function doBGFade(elem,startRGB,endRGB,finalColor,steps,intervals,powr) {
    24. if (elem.bgFadeInt) window.clearInterval(elem.bgFadeInt);
    25. var actStep = 0;
    26. elem.bgFadeInt = window.setInterval(
    27. function() {
    28. elem.style.backgroundColor = "rgb("+
    29. easeInOut(startRGB[0],endRGB[0],steps,actStep,powr)+","+
    30. easeInOut(startRGB[1],endRGB[1],steps,actStep,powr)+","+
    31. easeInOut(startRGB[2],endRGB[2],steps,actStep,powr)+")";
    32. actStep++;
    33. if (actStep > steps) {
    34. elem.style.backgroundColor = finalColor;
    35. window.clearInterval(elem.bgFadeInt);
    36. }
    37. }
    38. ,intervals)
    39. }
    42. });
    Alles anzeigen


    Und im Html Dokument wird zur ausführung folgendes hinzugefügt:

    Quellcode

    1. <input type="button" value="Einklappen" class="buttonBslideup" />
    2. <input type="button" value="Weiterlesen" class="buttonBslidedown" />
    3. <div class="contentToChange">
    4. <p class="fourthparagraph">Dies ist der Text der slidet... :)</p>
    5. </div>


    Bis hier funktioniert alles wunderbar ohne Probleme, jedoch möchte ich das man nur den Button " Weiterlesen " sieht und nach klick darauf, der Button sich wechselt in " Einklappen ".

    Dies habe ich folgendermaßen gelöst:

    Quellcode

    1. function klick()
    2. {
    3. if(document.all.button.value == 'Einklappen'){
    4. document.all.button.value = 'Weiterlesen';
    5. }else{
    6. document.all.button.value = 'Einklappen';
    7. }
    8. if(documant.all.button.class == 'buttonBslideup'){
    9. document.all.button.class = 'buttonBslidedown';
    10. }else{
    11. document.all.button.class = 'buttonBslideup';
    12. }
    13. }
    Alles anzeigen


    Und dies ist wieder der Html part:

    Quellcode

    1. <input type="Button" name="button" value="Weiterlesen" class="buttonBslidedown" onClick="klick()">


    Dies funktioniert als einzel applikation auch, jedoch in verbindung mit dem Ajaxcode nicht. Wie könnte ich jetzt den obersten Ajaxcode so modifizieren, das er dies erkennt und auch durchführt ?

    Ein Freund meinte, das ich anstadt diesem klick() code einfach folgendes machen solle:

    Anstatt zwei Buttons zu verwenden, solltest du einfach nur einen Button einsetzen. Wenn der button geklickt ist, prüfst du, ob der Text sichtbar ist, wenn ja, verstecken, wenn nein, anzeigen.


    Leichter gesagt als getan, ich komm nicht drauf :(
    Für die helfenden Hände zwischen euch, wenn jmd. den Code probieren möchte, einfach im <head></head> bereich, dies hinzufügen:

    Quellcode

    1. <script type="text/javascript"
    2. src="http://jquery.com/src/latest/"></script>

    Damit wird die JQUERY.js Bibliothek hinzugefügt, damit das ganze ding auch läuft :)

    ####

    Wiedereinmal eine Frage, mit hoffnung auf eine helfende Antwort :) Jetzt schonmal grossen dank für euere Posts.

    Gruss Volkan

  • hi,

    hier werden ja die onclick handler zum objekt hinzugefügt:

    Quellcode

    1. $("input.buttonBslidedown").click(function(){ $("div.contentToChange").find("p.fourthparagraph:hidden").slideDown("slow"); });
    2. $("input.buttonBslideup").click(function(){ $("div.contentToChange").find("p.fourthparagraph:visible").slideUp("slow"); });
    3. //show code example B
    4. $("a.codeButtonB").click(function(){$("pre.codeB").show()});
    5. $("a.codeButtonB").click(function(){$("pre.codeB").hide()});


    die funktion erweiterst du nun um deinen text
    ich nehm mal als beispiel diesen ausschnitt

    Quellcode

    1. $("a.codeButtonB").click(function(){$("pre.codeB").show()});


    in die function(){also hier} musst noch deine hinzufügen
    sollte also so funktionieren

    Quellcode

    1. $("a.codeButtonB").click(function(){$("pre.codeB").show();document.all.button.value = 'Weiterlesen';});


    probiers mal aus