Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Jquery Problem

  1. #1
    HTML Newbie
    Registriert seit
    17.06.2013
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Jquery Problem

    Hallo,
    ich habe ein kleines Problem. Ich lasse mir ein Bild in einem Kreis ausgeben, mit border-radius gelöst. Jetzt möchte ich, dass wenn man über das Bild fährt, das Bild transparenter wird und dass sich dann ein anderes Element eingefadet wird. Es sollen also 2 Elemente übereinander liegen und je nach dem eins eingeblendet bzw. ausgeblendet werden.

    Mein Problem ist die Positionierung. Der Container der ausgeblendet werden soll, liegt immer drüber.
    screen.png

    Code sieht wie folgt aus:

    HTML:
    HTML-Code:
    <a href="detail/anja.php">                            
    <div class="image-container">                                
    <span class="image-info">Anja</span>                                
    <span class="image-wrap " style="position:relative; display:inline-block; background:url(bilder/gallery-1/0.jpg) no-repeat center center; width: 17em; height: 17em;">                                    
    <img class="circle" src="bilder/gallery-1/0.jpg" style="opacity: 0;">                                
    </span>                            
    </div>                        
    </a>
    Jquery:
    Code:
    $(document).ready(function(){              
    $(".circle").load(function() {
                        $(this).wrap(function(){
                              return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center top; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
                        });
                        $(this).css("opacity","0");
                  });
    CSS:
    Code:
    .circle {    width:17em;
        height:17em;
    }
    
    
    .image-wrap {
        -webkit-border-radius: 50em;
        -moz-border-radius: 50em;
        border-radius: 50em;
    }
    
    
    .image-container {
        width:17em;
        height:17em;
    }
    
    
    .image-info {
        position:relative;
        background:black no-repeat center center;
        width:17em;
        height:17em;
        -webkit-border-radius: 50em;
        -moz-border-radius: 50em;
        border-radius: 50em;
        opacity:1;    
    }
    
    
    .circle-list {
        text-align:center;
    }
    
    
    .circle-list li {
        display:inline;
        line-height:5em;
        margin-left:1em;
        margin-right:1em;
    }
    Hoffentlich kann mir jemand helfen
    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
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Jquery Problem

    zunächst mal das css aus dem HTML in dein CSS-File. Dann beide Bilder auch als solche deklarieren.
    Und eigentlich sollte es dann klappen, beide mit
    Code:
    position: relative;
    top: 0;
    left: 0;
    Überainandern zu legen. Dann kannst du mit fadeOut/fadeIn auf dem Oberen hin- und her faden
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    17.06.2013
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Jquery Problem

    Css ist in einer extra Datei.
    Leider haben sich die Beiden Spans nicht verschoben und hängen immer noch wie im Bild

  4. #4
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Jquery Problem

    <a>-Elemente sind Inlineelemente in denen keine Blockelemente wie <div> oder <h3> vorkommen dürfen. Wenn Du all diese Inhalte verlinken willst, dann müsstest Du entweder jeden Inhalt einzeln verlinken oder statt <div> und <h3> eher <span> verwenden und die Ausgabe per CSS entsprechend anpassen. Ausnahme wäre, wenn Du einen HTML5-Doctype verwendest - dort ist so eine Verschachtelung zulässig.

    Unabhängig davon wäre ein Link zur Seite interessant.

  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: Jquery Problem

    mit position:relative wird man nichts übereinander bekommen, dafür muss der wrapper relative sein und die elmeente an sich absolut, z-index nich vergessen!

    und die besten ergebnisse haste wenn du nicht die fade-funktionen nimmst sondern ein animate auf die opacity machst.
    aber wie threadi schon sagte ist ein link immer mehr wert, als der code, weil man da das zusammenspiel aler elemente sehen kann und des ganze auch debuggen kann.
    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
    HTML Newbie
    Themenstarter

    Registriert seit
    17.06.2013
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Jquery Problem

    Habe die Seite mal kurz hochgeladen: http://christophkreibich.de/sandbox/0007/V2/

    Eigentlich nutze ich HTML 5...

  7. #7
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Jquery Problem

    Ich bin mir nicht sicher was mit jQuery nun genau dort passieren soll - bei mir passiert gar nichts. Allerdings fällt mir auf, dass Du wenn Du die Bilder an der selben Stelle haben willst beide per
    Code:
    position: absolute;
    ausrichten solltest, nicht relativ wie es aktuell ist.

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    17.06.2013
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Jquery Problem

    Ah absolute ist perfekt Scheint jetzt erstmal zu funktionieren. Dankeschön

    Nächstes Problem:
    Mein schwarzer Kreis im Hintergrund gibt jetzt dem eigentlichen Bild einen Rahmen. Den möchte ich aber nicht... Größe verändern hilft leider nicht und Positionierung hat mich auch noch nicht zum richtigen Ergebnis gebracht.

    Edit 2:
    Mit mehreren Bildern funktioniert es leider nicht mehr Ich hab die Datei nochmals aktualisiert.
    Geändert von DummerTroll (18.06.2013 um 01:14 Uhr)

  9. #9
    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: Jquery Problem

    probier mal den kreisen nen weißen rahmen zu geben.
    hab deine technik da noch nicht so ausprobiert, daher nur ein tip ins blaue.

    aber: du solltest dir um deine struktur gedanken machen.
    erst baut man seine funktion für ein objekt, dann haut man ein zweites objekt dazu und schaut nach fehlern, erst danach kann man die restlichen objekte hinzufügen.

    wrapper => objekt

    so dass du nur die wrapper positinieren musst und die objekte einfach drin liegen und dann haste später eine art objektmatrix, mit der alles fruchten sollte
    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

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    17.06.2013
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Jquery Problem

    Ich versteh nicht ganz was du meinst...

    Ich habe etwas weiter versucht. Leider klappt es nur bei ein paar wenigen Kreisen
    Geändert von DummerTroll (19.06.2013 um 00:58 Uhr)

Ähnliche Themen

  1. jQuery Problem mit appear()
    Von nadjak im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 27.02.2013, 10:07
  2. #split HMTL, CSS bzw. vielleicht auch jQuery Problem
    Von jouunas im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.03.2012, 10:11
  3. Problem mit jquery bxslider und Google Webfonts
    Von greenapple28 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 20.11.2011, 18:16
  4. while-Schleife; jQuery Problem
    Von XantypiaxD im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 12.11.2010, 18:07
  5. Java Script JQuery Problem / Switch Abfrage
    Von 1234d1 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 26.10.2009, 11:29

Stichworte

Berechtigungen

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