[JavaScript] jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Estorado, 22. Oktober 2008 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 22. Oktober 2008
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Hallo Webmasterfex und Cracks,

    kurz zur Schilderung: Mach mir eben eine neue (private) Homepage.
    Ich setzte dazu jQuery (1.2.6) und prettyPhoto zum darstellen von Fotos ein.

    Nun möchte ich gerne jQuery für mehr verwenden, wie Text auf bzw. zuklappen. Dazu habe ich eine Seite gefunden, die sowas auf deutsch erklärt: http://www.steintafel.ch/blog/2006-10/jquery-fuer-anfaenger-von-einem-anfaenger/
    Hier wollte ich eigentlich Demo2 (slideToggle) einsetzen, es stellen sich jedoch folgende Probleme:
    1. Kann man es so machen, das der Text erstmals versteckt ist und auf einen Klick der Text "rausfaded" bzw. aufklappt? fertig, mit css aufgepeppt (siehe die nächsten 3 Posts)
    2. Würde gerne zwischen öffnen und schließen einbauen, je nach Status eben (siehe dazu Post #5)
    3. Als letzten Punkt: Möchte auch gerne 2 Fadetexte pro Seite haben, muss da wahrscheinlich noch eine Variable eingebaut werden? (siehe dazu Post #5)

    Der Momentange Code:
    Javascript:
    Code:
    $("a#slideToggle").click(function(){
     $(this).next().slideToggle('slow');
     });
    Und so wirds momentan eingebunden:
    PHP:
    < a href = "#"  id = "slideToggle" > Zumachen </ a >
    Ich habe auch schon eingiges versucht, doch bin leider gescheitert.

    Bin für jeden Tipp dankbar und werde mich in Form einer Bewertung erkenntlich zeigen.

    Gruß

    Estorado
     
  2. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    du kannst ja prüfen ob im style "display" auf "none" steht,
    wenn ja -> aufklappen
    wenn nein -> zuklappen

    2 sachen auf einmal ein/aus-faden stottert nur, machs lieber nach der reihe.
    kenn mich aber mir jquery ned wirklich aus, in sau gibts da verschiedene events wenn der fade-vorgang abgschlossen wurde:

    Code:
    Effect.Fade('elementID', { 
     afterFinish: function() {
     alert('element sollte jetzt unsichtbar sein');
     }
    });
    ggf. gibts da in deiner LIB auch sowas
     
  3. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Hiho

    zu 1)
    gib deinem <div> eine Klasse zum Beispiel "hideTextbox".

    "hideTextbox" weil, du ja zwei Textboxen in/out faden willst.

    css inhalt:
    Code:
    .hideTextbox{
    display: none;
    }
    
    javascript
    Code:
    $("a#SwitchLink").click(function(){
     $('div.hideTextbox').slideToggle('slow');
     });
    
    html code
    Code:
    <div id="Textbox1" class="hideTextbox"> 
    Text von Box 1
    </div>
    
    <div id="Textbox2" class="hideTextbox">
    Text von Box 2
    </div>
    
    <a href="#" id="SwitchLink">Switch</a>
    
    Das is ungetesteter Code sollte aber so funktionieren.

    Ich hoffe ich habe es so richtig "interpretiert" da ich nicht ganz durch deine Fragen durchgeblickt habe

    Erklärs mal noch ein bisschen anders was du genau möchtest dann kann ich dir helfen, denn ich setze jQuery auch beruflich ein.
     
  4. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Hi Estorado,

    meinst du sowas?

    HTML:
    <html>
    <head>
    <title>jQuery Toogle</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $("a#slideToggle").click(function() {
     $(this)
     .next() // Spricht das Element nach dem geklickten an (das waere das p-Tag)
     .stop() // Stopt alle Animationen (so kann nichts zucken)
     .slideToggle('slow'); // Dein Slide
     });
    });
    </script>
    <style type="text/css">
    .slideToggleHidden {
     display: none;
    }
    </style>
    </head>
    <body>
    
    <a href="#" id="slideToggle">Klick mich und staune</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt
    </p>
    </body>
    </html>
     
  5. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Danke für die Hilfe, Bewertung ging an alle.

    zu 2:
    ich habe das etwas umständlich oder besser unverständlich geschrieben, ich meinte das so:

    Text anzeigen
    <kein text>

    *klick auf text anzeigen*

    Text schließen
    text blablablablablabla

    zu 3:

    Ich möchte einmal die Beschreibung anzeigen, und nocheinmal so etwas wie erweiterte Info.

    Wenn ich das jetzt so mache:
    PHP:
    < a href = "#"  id = "slideToggle" > link1 </ a >
    <
    class= "slideToggleHidden" >
       
    Ich habe einen tollen Toggle Effekt1
    </ p >
    <
    a href = "#"  id = "slideToggle" > link 2 </ a >
    <
    class= "slideToggleHidden" >
       
    Ich habe einen tollen Toggle Effekt2
    </ p >
    funktionierts natürlich nicht, bzw. es öffnet sich nur der erste Link. Was muss ich da noch hinzufügen, damits klappt? Bilde mir ein, hier eine ID vergeben zu müssen, aber leider weiß ich da nicht mehr weiter

    Hoffe erneut auf eure Hilfe.

    Gruß

    Estorado
     
  6. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Im Grunde haben bR0k3n_b0n3 und ich ja das selbe ^^ habs nur was anders gelöst

    zu 2)

    Ist eigentlich doch das selbe nur anstatt mit Toggle mit hide und show.

    wenn dir das hier zu umständlich ist und ggf fehler verursacht weil ichs ja nicht getestet habe dann pack das ganze in eine funktion dann gehts und sieht auch besser aus.

    Code:
    <a href="#" id="textfeldshow" onclick="$('#TEXTFELD').show();$('#textfeldhide').show();$(this).hide();">Text anzeigen</a>
    
    <a href="#" id="textfeldhide" onclick="$('#TEXTFELD').hide();$('#textfeldshow').show();$(this).hide();">Text schließen</a>
    
    <p id="TEXTFELD">HIER IST DEIN EIN/AUSBLEND BARER TEXT</p>
    
    zu 3)

    machs doch so in dem du den erweiterten link anders benennst
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
     $("a#slideToggle").click(function() {
     $(this)
     .next() 
     .stop() 
     .slideToggle('slow');
     });
    
     $("a#slideToggleExt").click(function() {
     $(this)
     .next() 
     .stop() 
     .slideToggle('slow');
     });
    });
    
    und dann sollte dein html code so aussehn

    Code:
    <a href="#" id="slideToggle">link1</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt1
    </p>
    <a href="#" id="slideToggleExt">link 2</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt2
    </p> 
    
    sollte eigentlich auch so funktionieren. wie gesagt alles ungetestet.

    ansonsten schick ma deine icq oder msn dann machen wir das mal im livesupport
     
  7. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Also die Lösung von hjk finde ich jetzt ein wenig umständlich, du musst bei meiner Lösung nur IDs durch Klassen ersetzen und du kannst du so viele Slidecontainer mit zugehörigem Link bauen wie du eben lustig bist.

    Hier nochmal der Code mit Klassen:
    HTML:
    <html>
    <head>
    <title>jQuery Toogle</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $("a.slideToggle").click(function() {
     $(this)
     .next() // Spricht das Element nach dem geklickten an (das waere das p-Tag)
     .stop() // Stopt alle Animationen (so kann nichts zucken)
     .slideToggle('slow'); // Dein Slide
     });
    });
    </script>
    <style type="text/css">
    .slideToggleHidden {
     display: none;
    }
    </style>
    </head>
    <body>
    
    <a href="#" class="slideToggle">Klick mich und staune</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt
    </p>
    
    <br />
    
    <a href="#" class="slideToggle">Klick mich und staune</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt
    </p>
    </body>
    </html>
     
  8. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Ok wenns so klappt ist das natürlich besser ^^

    Aber was ich nicht verstehe wieso das jetzt mit den Klassen gehen soll
    aber vorher mit den IDs dann nicht? So wie Estorado es sagt..
    Die Struktur und Ablauffolge ist doch die selbe wenn man das erste Beispiel auf zwei <p> Bereiche erweitert oder nicht?
     
  9. 22. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    HTML:
    <?xml version="1.0" encoding="utf-8"?>
    <!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> 
     <title>jQuery Toogle</title> 
     <meta name="content-type" content="application/xhtml+xml;charset=utf-8" />
     <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
     <script type="text/javascript"> 
     //<![CDATA[
     $(document).ready(function() { 
     $("a.handleAll").click(function() {
     //don't observe those elements!
     var elements = $("a.slideToggle");
     elements.each(function(name, element) {
     $(element).next().stop().slideToggle('slow');
     });
     });
     }); 
     //]]>
     </script> 
     <style type="text/css">
     /* <![CDATA[ */
     .slideToggleHidden { 
     display: none; 
     } 
     /* ]]> */
     </style> 
     </head> 
     <body> 
     <a href="#" class="slideToggle handleAll">Klick mich und staune</a> 
     <p class="slideToggleHidden"> Ich habe einen tollen Toggle Effekt </p> 
     
     <br /> 
     
     <a href="#" class="slideToggle">Klick mich und staune</a> 
     <p class="slideToggleHidden"> Ich habe einen tollen Toggle Effekt </p> 
     </body>
    </html>
    war das so gemeint? (ein klick, zwei sachen klappen runter)

    //ich habs dann doch mal mit prototype versucht:
    HTML:
    <?xml version="1.0" encoding="utf-8"?>
    <!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> 
     <title>jQuery Toogle</title> 
     <meta name="content-type" content="application/xhtml+xml;charset=utf-8" />
     <script type="text/javascript" src="http://prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script> 
     <script type="text/javascript"> 
     //<![CDATA[
     //jquery is komisch ;)
     //prototype 4tw!
     
     //eigene slideUp und slideDOwn methoden!
     Element.addMethods({
     slideUp: function(element, speed) {
     var speed = ((!speed || speed == 'normal') ? [4, 50] : 
     ((speed == 'fast') ? [10, 50] : [1, 50]));
     
     //init element
     var element = $(element), height = element.getHeight();
     element.setStyle({
     overflow: 'hidden',
     'height': height + 'px'
     });
     
     //start interval
     var i = window.setInterval(function() {
     height -= speed[0];
     if(height <= 0) {
     window.clearInterval(i);
     element.hide().setStyle({
     overflow: '', //remove this attr.
     'height': 'auto'
     });
     
     busy = false;
     return true;
     }
     
     element.setStyle('height:' + height + 'px');
     }, speed[1]);
     
     busy = true;
     return {
     stop: function() {
     window.clearInterval(i);
     },
     
     'element': element
     };
     },
     
     slideDown: function(element, speed) {
     var speed = ((!speed || speed == 'normal') ? [4, 50] : 
     ((speed == 'fast') ? [10, 50] : [1, 50]));
     
     //init element
     var element = $(element), height = 0;
     element.setStyle({
     overflow: 'hidden',
     'height': '0px',
     display: 'block'
     });
     
     //find max-height
     var c = $(element.cloneNode(true));
     c.setStyle({
     display: 'block',
     height: '',
     position: 'absolute',
     visibilty: 'hidden',
     top: '0px'
     });
     
     element.parentNode.appendChild(c);
     var maxHeight = c.getHeight();
     element.parentNode.removeChild(c);
     c = undefined;
     
     //start interval
     var i = window.setInterval(function() {
     height += speed[0];
     if(height >= maxHeight) {
     window.clearInterval(i);
     element.show().setStyle({
     overflow: '', //remove this attr.
     'height': ''
     });
     
     busy = false;
     return true;
     }
     
     element.setStyle('height:' + height + 'px');
     }, speed[1]);
     
     busy = true;
     return {
     stop: function() {
     window.clearInterval(i);
     },
     
     'element': element
     };
     }
     });
     
     var busy = false;
     document.observe('dom:loaded', function() {
     var toggleSlideP = function(p, a) {
     if(busy) {
     setTimeout(toggleSlideP.bind({}, p, a), 500);
     return false;
     }
     
     if(p.style.display == 'none') {
     p.slideDown('fast');
     a.update('Text schließen');
     } else {
     p.slideUp('fast');
     a.update('Text anzeigen');
     }
     };
     
     $$('a.slideToggle').each(function(a) {
     a.observe('click', function() {
     toggleSlideP(a.next(), a);
     }); 
     });
     
     var handler = $('handleAll');
     if(handler) handler.observe('click', function() {
     $$('a.slideToggle').each(function(a) {
     toggleSlideP(a.next(), a);
     });
     });
     });
     //]]>
     </script> 
     <style type="text/css">
     /* <![CDATA[ */
     .slideToggleHidden { 
     border: 1px solid #000;
     height: 100px;
     } 
     
     .handleAll {
     font-weight: bold;
     }
     /* ]]> */
     </style> 
     </head> 
     <body> 
     <a href="#" id="handleAll">Beide animieren</a><br />
     <br />
     
     <a href="#" class="slideToggle">Klick mich und staune</a> 
     <p class="slideToggleHidden" id="slideP"> Ich habe einen tollen Toggle Effekt </p>
     <br /> 
     
     <a href="#" class="slideToggle">Klick mich und staune</a> 
     <p class="slideToggleHidden"> Ich habe einen tollen Toggle Effekt </p> 
     </body>
    </html>
    die "slideUp" und "slideDown" methoden hab mal eben selber erstellt.
     
  10. 23. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    Das Problem lag daran, dass 2 Elemente mit der selben ID vorhanden waren, IDs aber nur einmal vergeben werden dürfen, somit konnte Javascript die Befehle nicht richtig interpretieren.
     
  11. 23. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    wie wäre es damit

    HTML:
    <!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>Untitled Document</title>
    <script type="text/javascript" language="javascript" src="./js/jq.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function(){
     $('.slideToggle').click(function(e){
     $('.slideToggleHidden').slideToggle();
     });
    });
    </script>
    </head>
    <body>
    <a href="#" class="slideToggle">link1</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt1
    </p>
    <a href="#" class="slideToggle">link 2</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt2
    </p> 
    </body>
    </html>
    hab es nur grob überflogen was du wolltest hoffe ich bin nicht am thema vorbei geschossen^^

    kannst es auch speziefisch machen setz ne id wenn nur der link 1 für 2 felder sein soll

    HTML:
    <!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>Untitled Document</title>
    <script type="text/javascript" language="javascript" src="./js/jq.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function(){
     $('#slideToggle_1').click(function(e){
     $('.slideToggleHidden').slideToggle();
     });
    });
    </script>
    </head>
    <body>
    <a href="#" id="slideToggle_1">link1</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt1
    </p>
    <a href="#" id="slideToggle_2">link 2</a>
    <p class="slideToggleHidden">
     Ich habe einen tollen Toggle Effekt2
    </p> 
    </body>
    </html>
     
  12. 23. Oktober 2008
    AW: jQuery: mehre Fade Outs pro Seite & Verstecken soll Standard sein

    An alle ein herzlichstes Dank die mir bei meinem Problem so umfangreich geholfen und inspiriert haben!
    Mit den zum Teil ganzen Scripten konnte ich alles so erstellen wie ich wollte.
    Bewertungen habe ich verteilt und habe das Thema auf jeden Fall in den Abos, fals ich mal wieder darauf zurückgreifen muss .

    Also nochmals danke an alle Beteiligten und schließe das Thema an diesem Punkt, fals jemand dazu noch Fragen oder Anregungen hat, der kann sich gerne an mich oder an einen Mod wenden, dann kann das Thema wieder eröffnet werden.

    Schönen Abend wünsche ich

    Gruß

    Estorado
     
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.