[js] Popup met image resized niet altijd goed - Softwareontwikkeling

donderdag 13 november 2003 13:41

Acties:

Verwijderd

Topicstarter

Hieronder zie je de HTML en Javascript die ik gebruik om in een popup, een image te laden, en aan de hand van de breedte en hoogte van die image het venster te resizen. Dit is om tegen te gaan dat men een gedeelte van het plaatje niet ziet omdat het venster d'r overheen hangt.. lijkt me logisch

Voor mijzelf werkt dit perfect. Geen problemen mee, en ik zie zo gauw ook geen "bottlenecks" in de code. Toch krijg ik van verschillende klanten het verzoek de popups aan te passen, omdat af en toe de popup lijkt te crashen.

Je krijgt dan een popup met de gewone window borders, maar met een transparante achtergrond.. dit kan voorkomen bij programma's die crashen door oneindigende loops e.d.

Het lijkt vooral te gebeuren bij onstabiele en/of trage verbindingen. Op een lokaal netwerk heb ik nergens last van, en ook niet met een webspeed simulator eigenlijk.

Voorbeeld: www.auto-gt.nl

Code: (in php tags gezet voor color-coding)

PHP:

<html>
<head>
<title>titel van popup</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="imagetoolbar" content="no" />
<script>
    // split URI on questionmark, make array
    var arrTemp = self.location.href.split("?"); 

    // get the url of the picture from the URI
    var picUrl = (arrTemp.length>0) ? arrTemp[1] : ""; 

    // if someone dares visiting with netscape..!
    var NS = (navigator.appName=="Netscape") ? true : false;

    /*
    fuction:    resizes screen to fit the image in the URI
    input:      none
    output:     none
    date:       12 oktober 2003
    by:         syntaxis
    */
    function FitPic() { 
        iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
        iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
        iWidth = document.images[0].width - iWidth; 
        iHeight = document.images[0].height - iHeight; 
        window.resizeBy(iWidth, iHeight); 
        self.focus(); 
    }; 
</script>
</head>

<body onblur="this.close();">

<img src="{$file}" 
    id="imgone" 
    alt="" 
    onload="FitPic()" 
    onclick="window.close();" 
    border="0" 
    onerror="window.close();" 
    style="border:1px solid #3E5EAB;cursor:hand;" 
/>

</body>

</html>

Kan iemand me vertellen waarom dit script kan haperen?

donderdag 13 november 2003 13:49

Acties:

crisp

Devver

Pixelated

ik heb ook slechte ervaringen met de onload op image tags - die lijkt af en toe inderdaad constant getriggered te worden (afhankelijk van browser en/of verbinding - heb ik verder niet meer getest). tegenwoordig gebruik ik een loopje met een timeout die de complete property checked (en zelfs dat schijnt niet overal goed te werken, dus ook daar moet ik eigenlijk nog een fallback voor verzinnen)

[ Voor 17% gewijzigd door crisp op 13-11-2003 13:50 ]

Intentionally left blank

donderdag 13 november 2003 14:01

Acties:

Verwijderd

Topicstarter

Timeouts in de pagina zijn wel leuk inderdaad, maar als de image dan nog helemaal niet geladen is zit je met onnodige javascript loopjes

Ik kan wel een recursieve functie maken die gewoon om de 3 seconden zichzelf aanroept en bekijkt of een plaatje geladen is. Als dat dan wel het geval is resize ik het venster.

Een andere oplossing is met serverside code te werken en zodoende de formate in de "window.open(.." code mee te sturen. Waardoor je dus helemaal geen functies nodig hebt in de popup.

Als vind ik dat laatste minder compatible.. ik vind dit juist zo mooi, omdat ik maar 1 pagina (xsl normaal..) hoef te gebruiken voor iedere site, en zo dus makkelijk popups kan openen

Recursieve functies klinken nog het best eigenlijk

Verder nog ideeën?

donderdag 13 november 2003 14:11

Acties:

crisp

Devver

Pixelated

mwa, zo'n loopje is echt niet zo zwaar hoor, en hoeft helemaal niet recursief:

JavaScript:

function checkLoaded() {

  if (document.images[0].complete) {

    // resize
    window.resizeTo(document.images[0].width,document.images[0].height);

  } else {

    setTimeout('checkLoaded()', 100);

  }

}

maar volgens mij kan je net zo goed de resize uitvoeren op het moment dat de onload van je window getriggered wordt, dan is het plaatje als het goed is ook al geladen.

[ Voor 5% gewijzigd door crisp op 13-11-2003 14:12 ]

Intentionally left blank

donderdag 13 november 2003 14:22

Acties:

Verwijderd

Topicstarter

Zoiets bedoel ik ja, is dat niet recursie? Recursief is toch gewoon een functie die zichzelf aanroept totdat aan een bepaalde voorwaarde is voldaan?

Bij een onload op de body kreeg ik soms een half plaatje - en dus een half scherm. Vandaar eigenlijk de onload in de image..

Anway, ik probeer die code wel. Hopelijk heeft de klant er dan geen last meer van. Thanks!

donderdag 13 november 2003 14:27

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 13 november 2003 @ 14:22:
Zoiets bedoel ik ja, is dat niet recursie? Recursief is toch gewoon een functie die zichzelf aanroept totdat aan een bepaalde voorwaarde is voldaan?

Bij een onload op de body kreeg ik soms een half plaatje - en dus een half scherm. Vandaar eigenlijk de onload in de image..

Anway, ik probeer die code wel. Hopelijk heeft de klant er dan geen last meer van. Thanks!

ja, recursie is inderdaad een functie die zichzelf opnieuw aanroept. Hier eindigt de functie echter, en wordt na 100 milliseconden opnieuw aangeroepen; klein detail

Intentionally left blank