Ergebnis 1 bis 6 von 6

Thema: Javascript kniffliges Problem

  1. #1
    Youngster
    Registriert seit
    15.05.2012
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Javascript kniffliges Problem

    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-Code:
    <!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>
    <<Ihr könnt die Funktion der Seite unter:
    http://www.stefanseifert.com/Adobe_E.../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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny Avatar von 7even
    Registriert seit
    16.05.2012
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Javascript kniffliges Problem

    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-Code:
    <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>

  3. #3
    Unregistriert
    Gast

    Standard AW: Javascript kniffliges Problem

    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

  4. #4
    Teeny Avatar von 7even
    Registriert seit
    16.05.2012
    Beiträge
    21
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Javascript kniffliges Problem

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

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Javascript kniffliges Problem

    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..
    Geändert von synaptic (22.05.2012 um 20:57 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Javascript kniffliges Problem

    meinste des so??

    HTML-Code:
    <!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>
    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. Problem mit Javascript
    Von the_zoker_09 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 14
    Letzter Beitrag: 15.02.2012, 23:12
  2. Kniffliges MySQL Problem
    Von Teron Gerofied im Forum Datenbank Forum - MySQL und andere Datenbanksoftware
    Antworten: 4
    Letzter Beitrag: 08.12.2010, 12:46
  3. Kniffliges Problem für einen Anfänger! Bitte helfen!
    Von hilfesuchender im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 01.12.2005, 21:20
  4. problem zu javascript
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 05.09.2005, 16:33
  5. was kniffliges Xtra nur für euch :wink:
    Von HoLo im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.10.2004, 11:08

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •