Javascript kniffliges Problem

Garavani

Hallo Profis,

bin Javascriptanfänger. Versuche aber auch, so wie es geht, alles selber zu machen, bastle, probiere, suche im Internet etc.…
Jetzt bin ich aber an meine Grenzen gestoßen, darum mein Frage hier. Und schon mal Danke für Euer Interesse.

Habe folgende kleine site:

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #ffffff;
}
* {

  padding-left:6px;
  padding-right:6px;




}
.fit {

  max-width: 100%;
  max-height: 100%;
}
.center {




  display: block;




  margin-left:auto;
  margin-right:auto;




}
img
{  border-style: none;
}
a:focus {
    outline: 0;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('gy').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>




</head>
<body style="overflow: hidden;">
<div id="g" style="cursor:pointer;" onclick="$('#g').fadeOut(900, 'linear')">
<img id="the_pic" class="center fit" src="images/Memoir_g.gif">




</div>




<div id="y">
<img id="the_pic_2" class="center fit" src="images/Memoir_y.gif">
</div> 




 
</body>
</html>

Alles anzeigen

<<Ihr könnt die Funktion der Seite unter:
http://www.stefanseifert.com/Adobe_Edge_Tests/Memoir_g.html
anschauen.>>

Die Funktionen oben hab ich mir im Internet rausgesucht. Funktioniert prima für ein Bild.
Geil finde ich vor allem, dass man die Browserfenster live aufziehen kann und verkleinern, das Bild sich live anpasst.
Diese Funktionsweise will ich gerne aufrecht erhalten.
Nun habe ich aber zwei Bilder. Geht soweit auch, aber ich möchte erreichen, dass das Bild „the_pic" ausfadet auf Klick
und darunter dann fließend „the_pic_2“ auftaucht.
Problem ist aber dass in meiner Lösung bisher die Bilder nicht wirklich untereinander liegen, sondern Bild „the_pic_2“ sich erst hochschiebt wenn „the_pic“ ganz weg ist
Leider kann aber die „position: absolute“ nicht wie gewohnt eingesetzt werden, da sie die Funktionen der Bildanpassung behindert, bzw. ungültig macht.

Hat jemand von Euch Profis eine Idee, wie man das Problem lösen könnte?
Ich glaube das Ding ist schon knifflig.

Wäre für Tipps und Ideen sehr dankbar!

Gruß
Garavani

7even

Hallo Garavani,

du kannst zwei div-Container mittels z-index übereinander legen. Allerdings benötigst du dafür eine Positionierung, wie du ja schon schreibst. Probiere mal position:relative; oder position:fixed; aus, ob dies immer noch die Funktion stört.

Ggf. kannst du eine zweite Ebene um die bestehenden Container erstellen und diese dann positionieren:

HTML

<div style="position:absolute; z-index:0;">
<div id="g"><img id="the_pic_2" class="center fit" src="images/Memoir_y.gif"> </div>
</div>

Unregistriert

Hi 7even,

Danke für Deine Ideen.
Leider hat das auch nicht geklappt

Ich fürchte, ich will da etwas zu viel…

Da ich dieses jQuery script nicht wirklich verstehe, wird es schwer sein für mich, da einzugreifen.
Sicher ist, dass jegliche Positionierung außerhalb des scripts das script stört.
Eigentlich auch logisch

Habe es auch mit Edge versucht. Da kann man die html sogar öffnen und sogar die Animation vornehmen,
nur leider checkt Edge die verlinkten CSS nicht korrekt. Das ist mir nicht neu.
In diesem Fall klappt alles, nur die vertikale Positionierung hält er nicht ein…
Aber das ist ein eigenes Thema für sich.

Danke jedenfalls für Deine Mühe.
Hätte auch vorher geantwortet, war aber im Urlaub

Gruß
Garavani

7even

Eventuell kommst du mit Frames weiter, wobei ich diese Lösung als unsauber erachte...

synaptic

also ich seh kein problem.
du hast bilder in einem containergenau genommen musst du bild 2 dem container von bild 1 als hintergrund geben,
dann bild 1 ausfaden lassen, danach gibste bild die src von dem bild2 und machst das pic wieder sichtbar da bild und container eine gleiche fläche decken sollte das faden da kein problem darstellen. nur transparenz würde ein problem sein...

edit: vergiss was ich schrieb, mir fällt eben ein, dass man ja bei css das backgroundpic net skalieren kann^^
ich mach mir ma nen kopp..

synaptic

meinste des so??

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #ffffff;
  overflow:hidden;
}
* {

  padding-left:6px;
  padding-right:6px;




}
.fit {

  max-width: 100%;
  max-height: 100%;
}
.center {




  display: block;




  margin-left:auto;
  margin-right:auto;




}
img
{  border-style: none;
}
a:focus {
    outline: 0;
}
#g, 
#y
{
    position:absolute;
    left:50%;
    background:#fff;
    cursor:pointer;
}
#g
{
z-index: 20;
}
#y
{
z-index: 10;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('#g').css('height', wh + 'px');
    $('#g').css('margin-left', -1*($('#g').width()/2) + 'px');
    $('#y').css('height', wh + 'px');
    $('#y').css('margin-left', -1*($('#y').width()/2) + 'px');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
    $('#g').click(function(){
        $(this).fadeOut(900, 'linear');
    });
});
</script>
</head>
<body>
    <div id="g">
        <img id="the_pic" class="center fit" src="http://www.stefanseifert.com/Adobe_Edge_Tests/images/Memoir_g.gif">
    </div>
    <div id="y">
        <img id="the_pic_2" class="center fit" src="http://www.stefanseifert.com/Adobe_Edge_Tests/images/Memoir_y.gif">
    </div> 
</body>
</html>

Alles anzeigen

hab jetzt mal extra keine verkürzungen vorgenommen, damit du siehst, was für schritte ich da habe.
eigentlich könnte/müsste man die funktionen ne ganze ecke verkürzen und kapseln

Tags