[JS] Clipping en visibility niet werkend in Mozilla

[Woudloper]

Hmm,

Ik kom er niet meer uit. Op deze pagina heb ik een informatie boxje gemaakt waarbinnen een viertal foto's worden getoond. Nu moet het zo zijn dat door het klikken op één van de foto's deze als het ware al scrollend (soort van zoom) wordt uitvergroot. Dit heb ik gerealiseerd met de volgende code:

JavaScript:

function fadein(how) {
 var menu;

 x = y++;
 y = y++;
 //Top, Width, Height, Left
 if (how == "LeftToBottomRight") {
  ToFade.style.clip = "rect(0,"+ x + "," + y + ",0)";
 }
 else if (how == "LeftToTopRight") {
  ToFade.style.clip = "rect(" + (255-x) + "," + x + "," + (255+x) + ",0)";
 }
 else if (how == "RightToBottomLeft") {
  ToFade.style.clip = "rect(0,"+ (255+x) + "," + y + "," + (255-x) + ")";
 }
 else if (how == "RightToTopLeft") {
  ToFade.style.clip = "rect("+ (255-x) + "," + 255 + "," +  255 + "," + (255-x) + ")";
 }

 if (x > 255) {
  menu = getObj("goback");
  menu.style.visibility = "visible";
 } else {
  setTimeout('fadein("'+how+'")',3);
 }  

}

Dit alles werkt binnen IE (hoewel het clipping geloof ik niet helemaal OK werkt), maar om de één of andere reden krijg ik het niet aan de praat binnen Mozilla (Opera nog niet getest). Voordat de fadein functie wordt aangeroepen wordt er eerst nog deze functie aangeroepen:

JavaScript:

function showObject(obj,ftype) {
 makeVisible(obj);

 //Nu het faden...
 //Voor link
 obj.style.clip = "rect(0,0,0,0)";
 obj.style.zindex = 999;

 x = 0;
 y = 0;
 ToFade = obj;

 setTimeout('fadein("'+ftype+'")',10);

}

Deze zorgt ervoor dat de clipping altijd op het nulpunt begint en de zindex ook goed staat ingesteld (en wat kleine zaken, als variabelen toewijzingen). Hoop dat iemand mij kan helpen aangezien ik er niet echt uit aan het komen ben...

Daarnaast heb ik nog een andere vraag en dat is of iemand een oplossing weet om ervoor te zorgen dat de infobox dezelfde look and feel heeft binnen Mozilla als in Internet Explorer. Ik heb namelijk al met CSS zitten spelen en krijg het helaas nog niet aan de praat. Ook niet met de voice-family hack...

[ Voor 10% gewijzigd door Woudloper op 18-09-2005 23:04 ]

[Annie]

Moet je niet ook aangeven dat je waarden in pixels zijn,
dus: clip: rect(10px, 10px, 10px, 10px)
?

[crisp]

gewijzigde zaken:

HTML:

  <div id="info">
   <h1>Info</h1>
    <div style="position: relative">
      <div style="visibility:hidden; position:absolute" id="image_a">[img]"images/inf_box/filiformecor_250x250.gif"[/img]</div>
      <div style="visibility:hidden; position:absolute" id="image_b">[img]"images/inf_box/inbraakschade_250x250.gif"[/img]</div>
      <div style="visibility:hidden; position:absolute" id="image_c">[img]"images/inf_box/filiformecor2_250x250.gif"[/img]</div>
      <div style="visibility:hidden; position:absolute" id="image_d">[img]"images/inf_box/kleuraanpassing_250x250.gif"[/img]</div>
      <div style="visibility:hidden; position:absolute;top:220px;left:10px;" id="goback">[img]"images/inf_box/goback.gif"[/img]</div>
    </div>
    <div style="float:left;height:125px;width:125px">[img]"images/inf_box/filiformecor_125x125.gif"[/img]</div>
    <div style="float:left;height:125px;width:125px">[img]"images/inf_box/inbraakschade_125x125.gif"[/img]</div>
    <div style="float:left;height:125px;width:125px">[img]"images/inf_box/filiformecor2_125x125.gif"[/img]</div>
    <div style="float:left;height:125px;width:125px">[img]"images/inf_box/kleuraanpassing_125x125.gif"[/img]</div>
  </div>

(aangezien de images zelf ook 125x125 en 250x250 waren heb ik ze ook deze grootte gegeven, anders krijg je last van 'verspringingen' in Mozilla)

Cascading Stylesheet:

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div#info {
    height           : 272px;
    width            : 256px;
    margin-top       : 20px;
    margin-right     : 5px;
    float            : left;
    clear            : left;
    background       : #ffffff;
    border           : 3px solid #003399;
}

JavaScript:

function fadein(how) {

    var menu;
    x = y++;
    y = y++;

    if (how == "LeftToBottomRight") {
        ToFade.style.clip = "rect(0px,"+ x + "px," + y + "px,0px)";
    }
    else if (how == "LeftToTopRight") {
        ToFade.style.clip = "rect(" + (250-x) + "px," + x + "px," + (250+x) + "px,0px)";
    }
    else if (how == "RightToBottomLeft") {
        ToFade.style.clip = "rect(0px,"+ (250+x) + "px," + y + "px," + (250-x) + "px)";
    }
    else if (how == "RightToTopLeft") {
        ToFade.style.clip = "rect("+ (250-x) + "px," + 250 + "px," +  250 + "px," + (250-x) + "px)";
    }
    if (x == 250) {
        menu = getObj("goback");
        menu.style.visibility = "visible";
    } else {
        setTimeout('fadein("'+how+'")',10);
    }       

}
...
function showObject(obj,ftype) {

    obj.style.visibility = "visible";
...
function hideObject(obj) {

    obj.style.visibility = "hidden";

}

oftewel: sloop die browser-sniffing er maar uit, je gebruikt toch al opmaak die door NS4 nooit gerenderd kan worden

[Woudloper]

crisp, dank dank...

Toch ook weer het geklooi met die relative en dat float gebeuren. Ik schijn het nog steeds niet goed onder de knie te krijgen...

Maar ff alles op een rijtje, je hebt dus:

1. HTML opmaak aangepast:
   • div met positition relative om de vergrotende afbeeldingen gezet
   • de afbeeldingen ook voorzien van een div waarbij je floating hebt toegepast
     Hoe zat het ook alweer, als ze niet meer naast elkaar pasten, dan gingen ze naar de volgende regel
2. CSS aanpassingen:
   • Mozilla box-sizing toegevoegd voor alle divs
   • div#info aanpassing gedaan in height/width
3. Javascript aanpassingen:
   • waar gebruik wordt gemaakt van positionering overal de px toegevoegd
   • browser check verwijderd voor visibility

Nou in ieder geval erg bedankt, want ik had er al een hele tijd mee zitten stoeien. Overigens had ik die fout m.b.t. de px natuurlijk niet meer mogen maken

[crisp]

Woudloper schreef op 22 May 2003 @ 08:56:
crisp, dank dank...

Toch ook weer het geklooi met die relative en dat float gebeuren. Ik schijn het nog steeds niet goed onder de knie te krijgen...

Maar ff alles op een rijtje, je hebt dus:
[...]
div met positition relative om de vergrotende afbeeldingen gezet

klopt, omdat de info-div een float is plaatste Mozilla de grote afbeeldingen niet op de goede plek, de div eromheen lostte dat op

de afbeeldingen ook voorzien van een div waarbij je floating hebt toegepast
Hoe zat het ook alweer, als ze niet meer naast elkaar pasten, dan gingen ze naar de volgende regel

door van de images een float te maken zorg je ervoor dat ze netjes aan elkaar aansluiten. Zonder float ontstond er in Mozilla nog altijd een ruimte tussen de bovenste twee plaatjes en de onderste twee (of je had alles op 1 regel moeten zetten waarschijnlijk). Echter alleen de images floating maken levert weer whitespace op om de images in IE omdat die meent hspace en vspace te moeten toepassen; het wordt dan lastig xhtml-compliant te krijgen (IE propriety attributen), dus dan maar een div eromheen, en die floaten.
Floats gaan inderdaad door op de volgende 'regel' als ze niet naast elkaar meer passen, dit kan je forceren met de clear property.

CSS aanpassingen:

• Mozilla box-sizing toegevoegd voor alle divs
• div#info aanpassing gedaan in height/width

de box-sizing zorgt ervoor dat width en height op dezelfde manier wordt toegepast als in het IE boxmodel. Het is onderdeel van CSS3, en box-sizing wordt al door Opera ondersteund (ik hoop dat ze bij Mozilla binnenkort de -moz- ook weghalen).
Door die boxsizing kon ik zonder problemen de info-box 'precies pas' maken; dit moest ook wel vanwege het gebruik van de floats die effectief geen ruimte innemen (behalve in IE dan).

Javascript aanpassingen:

• waar gebruik wordt gemaakt van positionering overal de px toegevoegd
• browser check verwijderd voor visibility

duidelijk lijkt me

Nou in ieder geval erg bedankt, want ik had er al een hele tijd mee zitten stoeien. Overigens had ik die fout m.b.t. de px natuurlijk niet meer mogen maken

graag gedaan

[MAZZA]

Leuk effectje maar wel rete traag

Vanuit mijn bezoekers view is dat te traag om op te wachten Misschien iets om even naar te kijken. Zou ook kunnen zijn omdat ik achter een slome pc zit natuurlijk

[crisp]

MAZZA schreef op 22 May 2003 @ 09:17:
Leuk effectje maar wel rete traag

Vanuit mijn bezoekers view is dat te traag om op te wachten Misschien iets om even naar te kijken. Zou ook kunnen zijn omdat ik achter een slome pc zit natuurlijk

true, ik zit nu achter een 350Mhz bak, en het is idd tergend traag.
Beter is denk om het per 2 of 3 pixels tegelijk te doen. De timeout lager zetten heeft geen zin omdat zowel IE als Mozilla default een minimum van 10 milliseconden hanteren.

[Woudloper]

OK, thanks ik zal daar eens mee gaan spelen. Echter is mijn machientje snel genoeg, dus had die vertraging e.d. nog niet gezien (en weet ook ff geen manier om een trage machine te simuleren).

Zal wel kijken of ik hem gewoon op 2 px kan/ga zetten.

[disjfa]

een opmerking @ Woudloper ook nog. je had laatst dat probleem met die scrolling aan de rechterkant. ik zou een keer kijken hoe die t doet in opera zijn nog enkele probleempjes

[Woudloper]

Nog even een gerelateerde vraag. Als je op bovenstaande pagina naar bijvoorbeeld het derde menu-item (Toepassingen) gaat loopt de <ul> helemaal door het floating infoboxje heen. Weet iemand hoe dit komt en hoe het op te lossen is? Met normale tekst gaat het namelijk gewoon goed...

[crisp]

Woudloper schreef op 22 mei 2003 @ 23:25:
Nog even een gerelateerde vraag. Als je op bovenstaande pagina naar bijvoorbeeld het derde menu-item (Toepassingen) gaat loopt de <ul> helemaal door het floating infoboxje heen. Weet iemand hoe dit komt en hoe het op te lossen is? Met normale tekst gaat het namelijk gewoon goed...

mmmz, lijkt me toch typisch een bug. Grappig dat zowel IE als Mozilla hiermee de mist in gaan...
Een plakband-oplossing zou zijn geen list gebruiken, maar &bull; voor de bullets...

[Woudloper]

crisp schreef op 23 May 2003 @ 10:00:
mmmz, lijkt me toch typisch een bug. Grappig dat zowel IE als Mozilla hiermee de mist in gaan...
Een plakband-oplossing zou zijn geen list gebruiken, maar &bull; voor de bullets...

Hmm, dan ga ik wel voor de plakbandoplossing als jij er ook over denkt dat het een bug is.

Zelf was ik van mening dat ik wat fout had gedaan aangezien het zowel fout ging in Mozilla als in Internet Explorer. Echter sprak de situatie zoals een p element ermee omging dat weer tegen...

offtopic:
Kan je zo'n bug als deze ergens melden bij ofwel MS ofwel bij Mozilla

[crisp]

Woudloper schreef op 23 May 2003 @ 10:27:
[...]

offtopic:
Kan je zo'n bug als deze ergens melden bij ofwel MS ofwel bij Mozilla

http://bugzilla.mozilla.org (en bugs melden aan MS is verspilde moeite imho)

[Verwijderd]

Mijn antwoord op deze kwestie:

Ik ben dit 'probleem' vaker tegengekomen, en ben van mening dat dit geen bug is, maar wel een ongewenste situatie. Dit is 'normaal' gedrag, ik denk ook volgend W3C. Als je goed kijkt, dan zie je dat te tekst van de list-item recht onder de teks erboven begint. Zo worden list-items gerenderd, eerst de tekst (of andere content), en als er plaats is, eventueel een bullet (als er geen clipping plaatsvindt).

Je bent waarschijnlijk meer geinteresseerd in een oplossing. De vraag is dan: wat wil je precies? Dat de lijst een geheel is, met alle bullets recht onder elkaar, of wil je de lijst dan maar onder de afbeelding hebben?

Het eerste kun je doen door de lijst (ul) een vaste breedte te geven, die niet te groot is, zodat de lijst er nog rechts naast past. Ook geef je die lijst de float: left; property mee, en een beetje padding-left (1 em), zodat je bullets binnen de ul vallen. Bij de meeste UA's heeft een ul element standaard wat padding-left. Dit wil je waarschijnlijk niet zo overdreven: 1em misschien, of 0.5em, of helemaal niks.

Het tweede kun je doen met clear: left; of clear: both; voor de lijst (ul).

Dé oplossing van dit probleem zit wel in CSS3: http://www.w3.org/TR/css3-box/#floating

[ Voor 9% gewijzigd door Verwijderd op 02-06-2003 19:45 ]