DIV einfliegen / einblenden lassen

Programmier-Felix · 30 April 2011

Hi!

Ich würde gerne ein Div einfliegen / einblenden lassen. Ich habe keine Ahnung, wie ich das anstellen soll... Ich hab zwar ein Verdacht, dass ich es mit JQuery machen muss... (hab null Ahnung davon... :( ) Im Internet habe ich auch schon überall gesucht und ich dachte vielleicht kann mir hier einer Helfen...

Wenn ich auf ein Div klicke, soll sich ein anderer Div einblenden (/ einfliegen).

Bitte um Denkschub etc.! :)

Gruß

threadi · 30 April 2011

Das "einfliegen" ist letztlich nur die Änderung von CSS-Eigenschaften, genauer gesagt left und top oder bottom und right, je nachdem aus welcher Richtung es kommen soll. Diese CSS-Eigenschaften kann man mittels jQuery z.B. über die dort vorhandene Funktion animate() variieren. Beispiele zur Beeinflussung von CSS-Eigenschaften darüber gibt es genügend.

Programmier-Felix · 30 April 2011

Das habe ich auch schon herausgefunden...

aber dazu muss der div schon rechts positioniert sein (soll von recht kommen) und dann kann man scrollen... (obwohl ich schon im body "scroll='no'" eingetippt habe) dies ist aber nur bei firefox glaube ich...
und wenn ich wieder auf den div klicke soll er wieder verschwinden... (nach rechts oder nach links)...

aber für die oben genannten punkte habe ich keine lösung gefunden... deswegen bin ich sozusagen hier...

threadi · 30 April 2011

Du kannst das Element dort positionieren, musst es aber nicht anzeigen.

Code:

display: none;

Kurz bevor die JavaScript-Funktion das Einfliegen durchführt, blendest Du es einfach ein

Code:

obj.style.display = "block";

Du könntest es auch erst per JavaScript dort oben positionieren:

Code:

obj.style.right = 0;

Programmier-Felix · 30 April 2011

okay damit könnte ich es nochmal probieren...

aber ich habe nur eine methode gefunden wo man auf ein button raufklickt und dann das passiert... ich weiß nicht wie ich es für ein div um ändern muss...

EDIT:

hab es jetzt...

HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Div einfliegen</title>
 <style>
 #einfliegen {
  background-color:orange;
  width:100px;
 }
 
 #daswaseingeflogenwird {
  background-color:red;
  width:200px;
  height:300px;
  position:absolute;
  left:2000px;
  top:300px;
  display:none;
 }
 </style>
 <script src="http://code.jquery.com/jquery-git.js"></script>
 
 <script type="text/javascript">
 
 function sehen() {
  document.getElementById('daswaseingeflogenwird').style.display = 'block';
 }
 
 </script>
</head>
<body>
<div id="einfliegen" onclick="sehen()">
 einfliegen
</div>

<div id="daswaseingeflogenwird">
</div>
<script>
$("#einfliegen").click(function(){
 $("#daswaseingeflogenwird").animate({"left": "-=1300px"}, "slow");
});
</script>
</body>
</html>

aber jetzt fehlt mir etwas damit es zurückfliegt, wenn man noch mal draufklickt...

threadi · 1 Mai 2011

Dann musst Du das selbe wieder machen, nur eben umgekehrt ;)

Programmier-Felix · 1 Mai 2011

das ist mir klar...

HTML:

<script>
$("#einfliegen").click(function(){
 $("#daswaseingeflogenwird").animate({"left": "+=1300px"}, "slow");
});
</script>

aber das soll ja nur bei jedem 2. klick passieren... wenn man das so nochmal hinzufügt dann geht der erst nach links und dann sofort wieder nach rechts...

mir fehlet also die lösung für jeden 2. klick....

threadi · 1 Mai 2011

Achso, das ist das selbe Element auf das Du klickst zum Aus- und zum Einblenden? Dann sehe ich 3 Möglichkeiten:

a) Du prüfst beim Anklicken, ob das einzublendende Element schon eingeblendet ist.

Code:

if(document.getElementById("daswaseingeflogenwird").style.display == "block"){ /* ausblenden */ }else{ /* einblenden */ }

b) Du setzt beim Klick eine Variable auf einen bestimmten Wert und prüfst bei jedem Klick diesen Wert.

Code:

if( elementstatus == 1 ){ /* ausblenden */ elementstatus = 0; }else{ /* einblenden */ elementstatus = 0; }

c) Du setzt in dem einzublendenden Element ein in HTML für dieses Element zulässiges Attribut auf einen bestimmten Wert und prüfst diesen bei jedem Klick.

Programmier-Felix · 1 Mai 2011

okay... das habe ich jetzt versucht um zusetzen... aber irgendwie klappt das nicht... ich muss das element wenn es raus geflogen ist ja wieder auf display:none; setzen...

HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Div einfliegen</title>
 <style type="text/css">
 #einfliegen {
  background-color:orange;
  width:100px;
 }
 
 #daswaseingeflogenwird {
  background-color:red;
  width:200px;
  height:300px;
  position:absolute;
  left:2000px;
  top:300px;
  display:none;
 }
 </style>
 <script src="http://code.jquery.com/jquery-git.js"></script>
 
 <script type="text/javascript">
 
 function einfliegen() {
  var status = 0;
  if (status == 1)
  {
   document.getElementById("daswaseingeflogenwird").style.display = "none";
  }
  if (status == 2)
  {
   document.getElementById("daswaseingeflogenwird").style.display = "block";
  }
  if (document.getElementById("daswaseingeflogenwird").style.display == "block")
  {
   $("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "-=1300px"}, "slow");
   });
   status = 1;

  }else{
   $("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "+=1300px"}, "slow");
   });
   status = 2;
  }
 }
 
 </script>
</head>
<body>
<div id="einfliegen" onclick=""einfliegen()">
 einfliegen
</div>
<div id="daswaseingeflogenwird">
</div>
</body>
</html>

ich weiß nicht was da falsch ist... vielleicht ist das ja auch nur ein ganz dummer fehler...

threadi · 1 Mai 2011

Bei animate() kann man als weiteren Parameter meines Wissens auch angeben, was passiert, wenn die Animation beendet wurde. Da könntest Du das ausblenden unterbringen.

Programmier-Felix · 1 Mai 2011

ich kenn mich nicht sogut mit jquery aus... ich habe auch schon im internet gesucht... könntest du mir sagen wie ich das machen soll? also wo hin das parameter, was reinschreiben, etc.

threadi · 1 Mai 2011

Im Beitrag #2 hatte ich dir einen Link zum Manual gezeigt. Dort steht für animate():

.animate( properties, [ duration ], [ easing ], [ complete ] )

Und zur Option "complete":

A function to call once the animation is complete.

Weiter unten gibt es bei "Complete Function" auch ein konkretes Beispiel:

Code:

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

In deinem Fall hieße das, du musst hier

Code:

$("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "+=1300px"}, "slow",HIER);

einen Funktionsnamen nennen der ausgeführt werden soll, wenn animate() fertig ist. Z.B.:

Code:

$("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "+=1300px"}, "slow",BlendeAus("daswaseingeflogenwird"));

Da Du den Rest ja schon prima selbst hin bekommen hast, nehme ich an, das reicht als Anstoß ;)

Programmier-Felix · 1 Mai 2011

Ich habe versucht das was du geschrieben hast um zu setzen... aber irgendwie will das nicht klappen :(

HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Div einfliegen</title>
 <style type="text/css">
 #einfliegen {
  background-color:orange;
  width:100px;
 }
 
 #daswaseingeflogenwird {
  background-color:red;
  width:200px;
  height:300px;
  position:absolute;
  left:2000px;
  top:300px;
  display:none;
 }
 </style>
 <script src="http://code.jquery.com/jquery-git.js"></script>
 
 <script type="text/javascript">
 
 function einfliegen() {
  if (document.getElementById("daswaseingeflogenwird").style.display == "block")
  {
   $("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "+=1300px"}, "slow", function() { document.getElementById('daswaseingeflogenwird').style.display = 'none';});
    });
  }else{
   document.getElementById('daswaseingeflogenwird').style.display = 'block';
   $("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "-=1300px"}, "slow", function() { document.getElementById('daswaseingeflogenwird').style.display = 'block';});
   });
  }
 }
 
 </script>
</head>
<body>
<div id="einfliegen" onclick="einfliegen()">
 einfliegen
</div>
<div id="daswaseingeflogenwird">
</div>
</body>
</html>

hab ich irgendwo ein fehler? oder ein komplett falsche ansatz? es funktioniert nicht im IE8 und auch nicht im FIREFOX... und beide werten den code anders aus... also ich habe unterschiedliche (falsche) resultate....

threadi · 1 Mai 2011

Steht was in der JavaScript-Fehlerkonsole dazu? Mich wundert es gerade auch.

Programmier-Felix · 1 Mai 2011

Was is denn eine Javascript-Fehlerkonsole? oder wo finde ich diese?

threadi · 1 Mai 2011

Siehe:
JavaScript: Arbeitstechniken und Entwicklerwerkzeuge
Mach deine Fehlerkonsole sauber! [Javascript ist Toll!]

Programmier-Felix · 2 Mai 2011

achso... also da steht nur:

Unterwartetes Token im Attribut-Selektor: '!'.
file:///C:/Users/meinname/Desktop/div einfliegen.html

ich denk mal das ist das

HTML:

<!DOCTYPE html>

sonst habe ich nämlich kein '!'...

threadi · 2 Mai 2011

Das ist, soweit ich gerade recherchieren konnte, eine jQuery-spezifische Fehlermeldung. Schau dich dazu mal um, ich tippe drauf, dass Du ein einzelnes Zeichen im jQuery-Code falsch geschrieben hast. Und das muss kein ! sein.

Programmier-Felix · 3 Mai 2011

Ich habe nichts darüber gefunden...

In meinem Code habe ich auch nach mehrmaligen überprüfen keine fehler gefunden. (bzw. nur ein: ich habe eine leertaste zuviel genommen...)

Aktueller Code:

HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Div einfliegen</title>
 <style type="text/css">
 #einfliegen {
  background-color:orange;
  width:100px;
 }
 
 #daswaseingeflogenwird {
  background-color:red;
  width:200px;
  height:300px;
  position:absolute;
  left:2000px;
  top:300px;
  display:none;
 }
 </style>
 <script src="http://code.jquery.com/jquery-git.js"></script>
 
 <script type="text/javascript">
 
 function einfliegen() {
  if (document.getElementById("daswaseingeflogenwird").style.display == "block")
  {
   $("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "+=1300px"}, "slow", function() { document.getElementById('daswaseingeflogenwird').style.display = 'none';});
   });
  }else{
   document.getElementById('daswaseingeflogenwird').style.display = 'block';
   $("#einfliegen").click(function(){
    $("#daswaseingeflogenwird").animate({"left": "-=1300px"}, "slow", function() { document.getElementById('daswaseingeflogenwird').style.display = 'block';});
   });
  }
 }
 
 </script>
</head>
<body>
<div id="einfliegen" onclick="einfliegen()">
 einfliegen
</div>
<div id="daswaseingeflogenwird">
</div>
</body>
</html>

ich kriege immernoch das gleiche resultat...

Programmier-Felix · 4 Mai 2011

keiner mehr der mir helfen kann?

DIV einfliegen / einblenden lassen

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

Neues Mitglied