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

2k2designer · 14-01-2010, 21:41

Hello liebe User vl könnt ihr mir helfen:

habe ein menü wo ich per ajax das innerHTML von div "content" austausche klappt wunderbar

jetzt will ich aber dass sich zuerst content ausblenden -> dann ladet ajax das neue html rein -> und dann blendet es wieder ein.

habe es so versucht:

PHP-Code:

  ie5 = (document.all && document.getElementById);

ns6 = (!document.all && document.getElementById);

opac = 0;

 
function fadeIn() {

if(opac != 100){

opac2 = 100;

opac+=1;

if(ie5) document.getElementById('content').filters.alpha.opacity = opac;

if(ns6) document.getElementById('content').style.MozOpacity = opac/50;

setTimeout('fadeIn()', 0);

 
}

}

 
//fades layer out

ie5 = (document.all && document.getElementById);

ns6 = (!document.all && document.getElementById);

opac2 = 100;

 
function fadeOut() {

//document.write(opac2);

if(opac2 > 0){

opac = 0;

opac2-=1;

if(ie5) document.getElementById('content').filters.alpha.opacity = opac2;

if(ns6) document.getElementById('content').style.MozOpacity = opac2/50;

setTimeout('fadeOut()', 0);

}

=>> hier möchte ich die funktion sachennachladen(); ausführen und danach wieder einblenden lassen

}

hoffe ihr habt ne idee

**sonar** · 14-01-2010, 22:07

Um Himmels Willen – tu dir bitte selber den Gefallen und verwende ein standardisiertes Framework wie Prototype & Scriptaculous oder JQuery. Da kannst dir solche Käse-Abfragen mit ie5 und ns6 und was weiß ich sparen und – vor allem – du hast Callback-Handler sowohl für Fade-Effekte & Co. als auch für Ajax-Requests zur Verfügung. Damit ist das relativ einfach…

2k2designer · 14-01-2010, 22:20

oh

gibts da deutschsprachige tuts die du empfehlen kannst ?

**sonar** · 14-01-2010, 22:30

Nö, mehr als googeln könnte ich in der Richtung jetzt auch nicht, wenn's deutsch sein soll…

Nightflyer · 14-01-2010, 23:06

Bei JQuery brauchst du nur

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript">
  $(document).ready(function(){
$('#container').fadeOut('slow');
$('#container').load('file/script.php', function( data ){

     $(this).html( data );
     $(this).fadeIn('slow');

}
});
</script>
</head>
<body>

<div id="container">Hallo Welt</div>

</body>
</html>

ungetestet.

2k2designer · 15-01-2010, 09:23

erst DANKE für eure hilfe - habe jetzt alles mit jQuery gemacht nur ist jetzt noch ein Problem

ich möchte bei klick auf einen button
1. content ausblenden
2. content nachladen
3. Höhe von content anpassen
4. content einblenden

wie mache ich das in dieser reihenfolge hier mein script:

PHP-Code:

  $(document).ready(function(){

    

    // Using multiple unit types within one animation.

    $(".button").click(function(){

        $('#content').fadeOut(1500);

        $('#content').fadeIn(1500);

        $.ajax({

           type: "GET",

           url: $(this).attr("ziel"),

           data: "content",

           success: function(msg){

            $('#content').empty()

            $(msg).appendTo('#content');

        }

        });

      $("#content").animate({ 

        height: $(this).attr("size")+"px",

      }, 1500 );

    });

  });

georgexp · 15-01-2010, 12:24

untested.

Schritt für Schritt animationen realisierst du mittels callback funtionen.

animate content macht hier keinen Sinn, man sieht ja nix.

PHP-Code:

  $(document).ready(function() {

    $('.button').click(function() {

        $('#content').fadeOut(1500,function() {

            $.ajax({ 

                type: "GET", 

                url: $(this).attr("ziel"), 

                data: "content", 

                success: function(msg){ 

                    $('#content').empty() 

                    $(msg).appendTo('#content');

                    $('#content').animate({ height: $(this).attr("size")+"px" }, 1500 , function() {

                        $('#content').fadeIn(1500);

                    ); 

                } 

            });

        });

    });

});

Nightflyer · 15-01-2010, 12:52

Das Problem: Wenn jeder Schritt nach jedem durchgeführt werden, müssen die Schritte jeweils als Callback durchgeführt werden. Dabei kannst du natürlich nicht mehr so einfach auf den Button zugreifen da der COntent zu this wird. Lösung: Jeder Schritt als eigene Funktion welche im Callback aufgerufen wird und dabei die Button-Instanz an die Funktion übergibt damit die jeweiligen Parameter geladen werden können:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
        <style type="text/css">


        </style>

        <script type="text/javascript">

        $(document).ready( function(){

                           function loadContent( button ){

                                    $('#content').load( $(button).attr('ziel'), { content : 'content' }, function(){

                                          animateContent( button );

                                    });

                           }

                           function animateContent( button ){

                                    $('#content').animate({
                                        height: $(button).attr('size') + 'px'
                                        },2000, function(){

                                                $('#content').  animate({opacity: 1}, 500 );

                                    });

                           }

                           $('.button').click( function(){

                                               var button = this;

                                               $('#content').animate({opacity: 0.01}, 500, function(){

                                                       loadContent( button );

                                               });

                           });

        });

        </script>

</head>
<body>

      <div id="content" style="width:500px;height:200px;border:1px solid red;">Leer</div>
      <button type="button" class="button" ziel="call.html" size="500" >Klick mich</button>
</body>
</html>

getestet

PS: Und weil man mit FadeOut nix mehr sieht ersetzt durch animate auf opacitiy 0.01

2k2designer · 15-01-2010, 17:36

Vielen vielen Dank funktioniert Super.... jetzt ist nur noch eine Frage aufgetaucht

ich lade jetzt mittels ajax den content ...

und in diesem content ist ein weiterer Button mit der class="button" und soll ebensfalls etwas laden bzw genau den gleichen vorgang machen.

aber bei dem Inhalt den ich mittels ajax geladen habe reagiert kein einziger button?

weiß jemand rat ?

2k2designer · 15-01-2010, 18:03

hab die lösung schon

ich habe die funktionen einfach nochmal in die zu ladenene Datei reingeschrieben - jetzt funktionierts

Nightflyer · 15-01-2010, 21:46

Viel einfacher als ohne Framework, nicht? Da fängst du einmal damit auf un willst es nie wieder missen

Bei all den Verbrechen gegen die Computrigkeit die MS da mit ihrem IE verbrochen hat...

2k2designer · 16-01-2010, 17:47

wahnsinn ja

also ich melde mich wieder wenn die website fertig ist und ihr mir beim debuggen helfen könnt ... habe schon einen Bug der im IE nicht weggeht und tüftle seit 2 tagen - aber erst mach ich mal den Rest fertig

DANKE auf jeden fall

14-01-2010, 21:41	#1 (permalink)
2k2designer www.mumac.net Registriert seit: May 2002 Ort: Vienna Beiträge: 578	FadeOut -> content laden -> Fade in Hello liebe User vl könnt ihr mir helfen: habe ein menü wo ich per ajax das innerHTML von div "content" austausche klappt wunderbar jetzt will ich aber dass sich zuerst content ausblenden -> dann ladet ajax das neue html rein -> und dann blendet es wieder ein. habe es so versucht: PHP-Code: ie5 = (document.all && document.getElementById); ns6 = (!document.all && document.getElementById); opac = 0; function fadeIn() { if(opac != 100){ opac2 = 100; opac+=1; if(ie5) document.getElementById('content').filters.alpha.opacity = opac; if(ns6) document.getElementById('content').style.MozOpacity = opac/50; setTimeout('fadeIn()', 0); } } //fades layer out ie5 = (document.all && document.getElementById); ns6 = (!document.all && document.getElementById); opac2 = 100; function fadeOut() { //document.write(opac2); if(opac2 > 0){ opac = 0; opac2-=1; if(ie5) document.getElementById('content').filters.alpha.opacity = opac2; if(ns6) document.getElementById('content').style.MozOpacity = opac2/50; setTimeout('fadeOut()', 0); } =>> hier möchte ich die funktion sachennachladen(); ausführen und danach wieder einblenden lassen } hoffe ihr habt ne idee __________________ mit den besten grüßen with kind regards yours

14-01-2010, 22:07	#2 (permalink)
sonar mod_rewrite Registriert seit: Feb 2003 Ort: München Beiträge: 15.621	Um Himmels Willen – tu dir bitte selber den Gefallen und verwende ein standardisiertes Framework wie Prototype & Scriptaculous oder JQuery. Da kannst dir solche Käse-Abfragen mit ie5 und ns6 und was weiß ich sparen und – vor allem – du hast Callback-Handler sowohl für Fade-Effekte & Co. als auch für Ajax-Requests zur Verfügung. Damit ist das relativ einfach… __________________ RTFM Wie man Fragen richtig stellt. Achim Bindannmalweg Money makes the world go round, fear makes it turn much faster. (New Model Army)

14-01-2010, 22:20	#3 (permalink)
2k2designer www.mumac.net Registriert seit: May 2002 Ort: Vienna Beiträge: 578	oh gibts da deutschsprachige tuts die du empfehlen kannst ? __________________ mit den besten grüßen with kind regards yours

14-01-2010, 22:30	#4 (permalink)
sonar mod_rewrite Registriert seit: Feb 2003 Ort: München Beiträge: 15.621	Nö, mehr als googeln könnte ich in der Richtung jetzt auch nicht, wenn's deutsch sein soll… __________________ RTFM Wie man Fragen richtig stellt. Achim Bindannmalweg Money makes the world go round, fear makes it turn much faster. (New Model Army)

15-01-2010, 09:23	#6 (permalink)
2k2designer www.mumac.net Registriert seit: May 2002 Ort: Vienna Beiträge: 578	erst DANKE für eure hilfe - habe jetzt alles mit jQuery gemacht nur ist jetzt noch ein Problem ich möchte bei klick auf einen button 1. content ausblenden 2. content nachladen 3. Höhe von content anpassen 4. content einblenden wie mache ich das in dieser reihenfolge hier mein script: PHP-Code: $(document).ready(function(){ // Using multiple unit types within one animation. $(".button").click(function(){ $('#content').fadeOut(1500); $('#content').fadeIn(1500); $.ajax({ type: "GET", url: $(this).attr("ziel"), data: "content", success: function(msg){ $('#content').empty() $(msg).appendTo('#content'); } }); $("#content").animate({ height: $(this).attr("size")+"px", }, 1500 ); }); }); __________________ mit den besten grüßen with kind regards yours

15-01-2010, 12:24	#7 (permalink)
georgexp Neuer User Registriert seit: Jan 2002 Ort: Aachen Beiträge: 1.081	untested. Schritt für Schritt animationen realisierst du mittels callback funtionen. animate content macht hier keinen Sinn, man sieht ja nix. PHP-Code: $(document).ready(function() { $('.button').click(function() { $('#content').fadeOut(1500,function() { $.ajax({ type: "GET", url: $(this).attr("ziel"), data: "content", success: function(msg){ $('#content').empty() $(msg).appendTo('#content'); $('#content').animate({ height: $(this).attr("size")+"px" }, 1500 , function() { $('#content').fadeIn(1500); ); } }); }); }); }); __________________ G.M. \| working @ source lounge Geändert von georgexp (15-01-2010 um 12:26 Uhr)

15-01-2010, 17:36	#9 (permalink)
2k2designer www.mumac.net Registriert seit: May 2002 Ort: Vienna Beiträge: 578	Vielen vielen Dank funktioniert Super.... jetzt ist nur noch eine Frage aufgetaucht ich lade jetzt mittels ajax den content ... und in diesem content ist ein weiterer Button mit der class="button" und soll ebensfalls etwas laden bzw genau den gleichen vorgang machen. aber bei dem Inhalt den ich mittels ajax geladen habe reagiert kein einziger button? weiß jemand rat ? __________________ mit den besten grüßen with kind regards yours

15-01-2010, 18:03	#10 (permalink)
2k2designer www.mumac.net Registriert seit: May 2002 Ort: Vienna Beiträge: 578	hab die lösung schon ich habe die funktionen einfach nochmal in die zu ladenene Datei reingeschrieben - jetzt funktionierts __________________ mit den besten grüßen with kind regards yours

15-01-2010, 21:46	#11 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Viel einfacher als ohne Framework, nicht? Da fängst du einmal damit auf un willst es nie wieder missen Bei all den Verbrechen gegen die Computrigkeit die MS da mit ihrem IE verbrochen hat... __________________ (\__/) (='.'=) (")_(")

16-01-2010, 17:47	#12 (permalink)
2k2designer www.mumac.net Registriert seit: May 2002 Ort: Vienna Beiträge: 578	wahnsinn ja also ich melde mich wieder wenn die website fertig ist und ihr mir beim debuggen helfen könnt ... habe schon einen Bug der im IE nicht weggeht und tüftle seit 2 tagen - aber erst mach ich mal den Rest fertig DANKE auf jeden fall __________________ mit den besten grüßen with kind regards yours

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

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Flash CS3] Szene in Content laden	C4DLoad	Flash Einsteiger	3	08-08-2009 15:21
[Flash CS3] externe swf laden: Mit FadeIn/FadeOut bzw. EaseIn / EaseOut Script ergänzen	marcelll1976	Flash Einsteiger	2	30-12-2008 12:45
Laden von Content	phil1978	Flash Einsteiger	3	19-07-2007 21:53
Content Laden	SJS	Flash MX 2004	3	04-08-2004 12:47
Externen Content laden	Beron	ActionScript 1	2	24-07-2001 17:21