Avatar billede logout Nybegynder
19. januar 2002 - 19:36 Der er 22 kommentarer og
1 løsning

Popup center

Hej,

Jeg vil kunne følgende:

Åbne et popup vindue, der passer nøjagtigt til billedets størrelse UDEN at angvie billedet størrelse i linket. Dette gør jeg ved at anvende nedenstående script, der checker billedets dimensioner på serveren. Virker fint.

http://anarchos.xs.mw/thumbnail.phtml

PROBLEM:

Vinduet centreres ikke. Til det skal bruges javascript, der på en eller anden måde fortæller php scriptet, at det vindue der åbnes skal placeres midt på skærmen. Jacascriptet skal omvendt have billedets fimensioner angivet af php scriptet.

Jeg kan ikke selv finde ud af at få det til at virke ... er der nogen der gider / kan ??

Jeg er sikker på at mange vil kunen bruge denne funktion - den sparer masser af tid, og ser godt ud. Php scriotet der er angivet virker i ALLE browsere + platforme jeg har testet indtil nu - Samme skal gælde for javascriptet ...

Avatar billede larsen Nybegynder
19. januar 2002 - 19:43 #2
Regneformlen er vidst nok :

X = (screen.width-billedbredde)/2
Y = (screen.width-billedhøjde)/2

Men det er da mange point for så lidt
Avatar billede entracore Nybegynder
19. januar 2002 - 19:44 #3
Larsen >> Er det ikke kun gældende for IE ???
Avatar billede cd_ Nybegynder
19. januar 2002 - 19:45 #4
function popUp(URL) {
day = new Date();
id = day.getTime();
eval(\"page\" + id + \" = window.open(URL, \'\" + id + \"\', \'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=1280,height=1024,left = 0,top = 0\');\");
}


tilpas
Avatar billede logout Nybegynder
19. januar 2002 - 19:46 #5
Det er bestemt ikke så lidt. Prøv engang at kigge i scriptet ... Sæt evt den kode ind du mener virker og kør scriptet. Hvis du kan aflæse billedestørrelsen på serveren og samtidigt centrere vinduet udfra skærmstørrelsen får du de 1000 point. Jeg skal bruge funktionen, hvis der skal endnu flere point til er jeg klar på det ;o)
Avatar billede entracore Nybegynder
19. januar 2002 - 19:49 #6
Logout >> du kan ikke aflæse skærmstørrelsen på serveren - hverken med PHP eller Javascript. Du må mene klientens skærmstørrelse.

Og de to link jeg postede forklarer hvordan du gør.
Avatar billede logout Nybegynder
19. januar 2002 - 19:55 #7
Jeg ved godt jeg ikke kan aflæse skærmstr. på serveren. Det er derfor jeg skal have clienten (javascript) til at fortælle serveren (php) hvilken størrelse skærm brugeren har, så popup vinduet kan centreres. resultatet skal være et centreret vindue, der er tilpasset billedets størrelse, vel og mærke UDEN at billedet størrelse er angivet fra clienten eller via img tagget
Avatar billede entracore Nybegynder
19. januar 2002 - 20:06 #8
\"er derfor jeg skal have clienten (javascript) til at fortælle serveren (php) hvilken størrelse skærm brugeren har\"
SVAR: Når du åbner dit vindue er vinduets placering defineret ud fra nogle parametere i din javascript kode. Det åbne vindue kalder så en URL der retuneres fra serveren.

\"resultatet skal være et centreret vindue, der er tilpasset billedets størrelse, vel og mærke UDEN at billedet størrelse er angivet fra clienten eller via img tagget\"
SVAR: Det forstår jeg ikke. Du bliver nød til at fortælle din javascript kode hvilken størrelse dit vindue skal have... ellers retunere den bare en default størrelse.

F.eks.

<script>
    function kald_åben_vindue_funktion(bredde, hoejde) {
    window.open(\'URL\', \'Ident\', \'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=\'+bredde+\',height=\'hoejde\',left = 0,top = 0\');\");

    }
</script>
<a onclick=\"kald_åben_vindue_funktion(\"bredde\", \"hoejde\")\">Åben Ny vindue</a>

Avatar billede logout Nybegynder
19. januar 2002 - 20:19 #9
Ja det er nok derfor det ikke virker, Hvis javascriptet skal kende billedets (vinduets) størrelse er det PHP scriptet der skal definere det, da kun scriptet kender billedets størrelse. (det aflæses jo fra serveren)

jeg gør alt dette, så jeg ikke manuelt skal sidde og sætte img str. ind i mine links - der kommer 1000vis af billeder på min side, så det skal være nemt.

Hvis der stadig er tvivl om funktionen så se evt denne tegning:

www.greyscale.dk/eksempel.jpg

1) Browseren fortæller skærmstr. til serveren
2) Serveren sender billedets dimensioner samt position udfra skærmstørrelse tilbage til clienten
3) Billedet vises perfekt!




Avatar billede entracore Nybegynder
19. januar 2002 - 20:31 #10
Ad. 1 Det er ikke nødvendig at serveren kender skærmstørrelsen på klienten.

Eksempel:
<script language=\"javascript\">
    function openNewWin(width, height) {
        strTop = screen.height/2 - height;
        strLeft = screen.width/2 - width;
       
        strWidth = width;
        strHeight = height;
       
        window.open(\'din_url_php\', \'Image\', \'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=\'+strWidth+\',height=\'+strHeight+\',left=\'+strLeft+\',top=\'+strTop+\');
    }
</script>

<a onclick=\"openNewWin(Width_Param_I_PHP, Height_Param_I_PHP);\"><img src=\"\"></a>
Avatar billede entracore Nybegynder
19. januar 2002 - 20:33 #11
logout >> jeg har ikke lige testet min strTop/strLeft algoritme - håber at den virker :)
Avatar billede entracore Nybegynder
19. januar 2002 - 20:35 #12
Men vent - de billeder du vil vise. Er de optimeret til forskellige skærmstørrelser. F.eks. du har tre versioner af et billede. En version til 640x480 og en version til 800x600 osv... ?
Avatar billede logout Nybegynder
19. januar 2002 - 20:36 #13
Jeg tror ikke du er helt med ...

Jeg kender ikke width og height som du skriver her:

function openNewWin(width, height) {
strTop = screen.height/2 - height;
strLeft = screen.width/2 - width;

Det er serveren, der læser billedet (IKKE skærmens størrelse men selve image størrelsen) og bruger denne værdi i et popupvindue...

Måske det er mig, der ikke kan se skoven for bare træer, men hvis det er så let, kan du så ikke lige prøve at ligge det sript op jeg henviste til i spørgsmålet med dine rettelser *GGG*
Avatar billede entracore Nybegynder
19. januar 2002 - 20:43 #14
\"Det er serveren, der læser billedet (IKKE skærmens størrelse men selve image størrelsen) og bruger denne værdi i et popupvindue...\"

Den er jeg fuldstændig med på. men hvor jeg skriver <a onclick=\"openNewWin(Width_Param_I_PHP, Height_Param_I_PHP);\"><img src=\"\"></a>

Så er Width_Param_I_PHP og Height_Param_I_PHP variabler defineret af serveren. Så deres værdi kunne være:

<a onclick=\"openNewWin(\'400\', \'550\');\"><img src=\"\" width=\"400\", height=\"550\"></a>


Avatar billede entracore Nybegynder
19. januar 2002 - 20:44 #15
og det er de to parameter du sender til din javascript funktion.
Avatar billede logout Nybegynder
19. januar 2002 - 21:31 #16
Prøv at se i koden på det link jeg lagde ind i spm. Jeg koder ikke så godt php/javascript selv, så hvis du kan sætte koden ind så det spiller ville det være perfekt :o)
Avatar billede nikolajdu Nybegynder
19. januar 2002 - 21:38 #17
Det er simpelthen til grin det her - Kan på ingen måder vente til Eksperten 3 kommer.
Avatar billede entracore Nybegynder
19. januar 2002 - 21:45 #18
Sådan her - husk at anføre dit kald til javascript funktionen \"popUp\" på dit billede eller link.
-----------------------------------------------------------------------------------------------

<?php
/******
* [thumbnail.php] v1.12
* 2001-09-01
* Author: Anarchos
* URL: http://anarchos.xs.mw/
/***/

/* $widthChange will be added to the width of the image to create the width of the popup window. */
$widthChange = 6;

/* $heightChange will be added to the height of the image to create the height of the popup window. */
$heightChange = 50;
$vBlah2 = $HTTP_GET_VARS;
if (!isset($vBlah2[\"src\"]) && !isset($vBlah2[\"image\"])){
Header(\"Content-type: text/javascript\");
?>
function popUp(src,extra, width, height){
    strTop = screen.height/2 - height;
    strLeft = screen.width/2 - width;
       
    strWidth = width;
    strHeight = height;
   
    window.open(\'<?php echo basename($PHP_SELF) ?>?image=\'+src+\'\', \'Image\', \'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=\'+strWidth+\',height=\'+strHeight+\',left=\'+strLeft+\',top=\'+strTop+\');
}
<?php
exit;
}
?>
<html>
<head>
<title><?php if ($src) print basename($src);?></title>
<link rel=\"stylesheet\" href=\"general.php\" type=\"text/css\" />
<?php if (!isset($src)) echo \"<script type=\\\"text/javascript\\\">\\n<!--\\nblur();\\n-->\\n</script>\\n\" ?>
</head>
<body bgcolor=\"#3A6EA5\" text=\"#000000\" alink=\"#3A6EA5\" vlink=\"#222222\" link=\"#222222\" topmargin=\"0\" leftmargin=\"0\" marginwidth=\"0\" marginheight=\"0\">
<?php
if (!isset($src)){
if (!isset($image))
    exit(\"No image defined.\");
$size = getimagesize($image);
echo \"<script type=\\\"text/javascript\\\">\\n\";
echo \"<!--\\n\";
$url = basename($PHP_SELF) . \"?src=$image&width=$size[0]&height=$size[1]&extra=\".urlencode($extra);
$width += 20;
$height += 55;
$maxwidth = $size[0]+ $widthChange;
$maxheight = $size[1] + $heightChange;
$scroll = \"\";
if ($width < $maxwidth) {
    $maxwidth = $width - 40;
    $scroll = \"resizable,scrollbars\";
    }
if ($height < $maxheight) {
    $maxwidth += 16;
    $maxheight = $height - 120;
    $scroll = \"resizable,scrollbars\";
    }
echo \"open(\\\"$url\\\",\\\"Popup_images\\\",\\\"width=$maxwidth,height=$maxheight$scroll\\\");\\n\";
echo \"close();\\n\";
echo \"//-->\\n\";
echo \"</script>\";
print \"</body>\\n</html>\";
exit;
}
else {
print \"<center><img src=\\\"$src\\\" alt=\\\"$src\\\" width=\\\"$width\\\" height=\\\"$height\\\" valign=\\\"top\\\" vspace=\\\"3\\\" /></center>$extra\";
}
?>
<center>
<a href=\"java script:window.close()\" onMouseover=\"window.status=\'Close\';return true\" onMouseout=\"window.status=\'\';return true\">Close this window</a></center>
</body>
</html>
Avatar billede logout Nybegynder
19. januar 2002 - 23:58 #19
Jeg tror ikke vi kommer videre ...
Den funktion du angiver i eksemplet ovenfor:

function popUp(src,extra, width, height)

forudsætter jo at de fire variable er angivet i linket ... width og height er IKKE angivet og skal ikke angives, da det er det php scriptet skal sætte ind.

Derfor er det ikke mærkeligt, at jeg får en undefined variable javascript fejl
Avatar billede logout Nybegynder
19. januar 2002 - 23:58 #20
Nikolaj, hvis du synes det er så sjovt kan du jo løse problemet *lol*
Avatar billede nikolajdu Nybegynder
20. januar 2002 - 00:07 #21
Spørgsmålet er ikke en dyt over 15/30 point værd - Så jeg skal ikke pille ved det.

Et par hints kan du dog få - aflæs billedet propertioner og brug self resizeTo(billedeX,billedeY) og self.moveTo(skærmXx,skærmY) - Hvor x og y så skal beregnes i forhold til størrelsen på billedet og skærmopløsningen.

Du er altså nødt til at linke til en html fil hvis du skal centrere noget eller submitte data ind i et javascript og derefter åbne vinduet med de korrekte højde/bredde scriptet direkte ind.

/Nikolaj

Avatar billede logout Nybegynder
20. januar 2002 - 16:41 #22
Jeg tror ikke det kommer til at virke - og slet ikke cross platform / cross browser kompatibelt ... Jeg linker ikke til en reel side, men en autogenereret html side (php) der sætter billedet ind ...

15/30 point ... hmmm du kan da godt få 15/30 point i stedet hvis du kan få det til at virke ...
Jeg lukker her, men er der nogen der kan skal jeg nok overføre points til dem.
Avatar billede jakoba Nybegynder
21. januar 2002 - 07:50 #23
var popVindue;

function popLoad( url, hojde, bredde ) {
    var fratop = Math.round( ( screen.height - hojde ) / 2 );
    var fravenstre = Math.round( ( screen.width - hojde ) / 2 );
      // ovenstående skulle være ok i alle version 4+ brovsere

    if ( popVindue && popVindue.document ) {  // hvis vinduet allerede er åbent
        popVindue.moveTo( fravenstre, fratop );
        popVindue.resizeTo( bredde, hojde );
    } else {                                  // vinduet skal åbnes
        if (navigator.appName!=\"Netscape\") {
        var pos = \",left=\"+fravenstre+\",top=\"+fratop
        } else {
            var pos = \",screenX=\"+fravenstre+\",screenY=\"+fratop
        };
        popVindue = window.open( url, \"b\", \"height=\" +hojde +\",width=\" +bredde +pos );
    }
};

mvh JakobA
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester