[javascript] popupimage centreren - Softwareontwikkeling

donderdag 5 oktober 2006 22:23

Acties:

Verwijderd

Topicstarter

Verhuisd van 'programming' naar hier. Mijn excuses

Ik zal maar beginnen met zeggen dat ik een totale noob ben wat javascript betreft. Ik probeer momenteel twee scriptjes met elkaar te verzoenen, maar dit loopt niet van een leien dakje. Het uiteindelijke script moet dienen om afbeeldingen in een popupwindow te laten verschijnen zonder voor elke pagina een apart htm bestand te maken. Bovendien moet de grootte van het venster zich automatisch aanpassen aan de grootte van de afbeelding.

Het gaat om volgende twee scriptjes:

Script 1: centreren van een popupwindow.

code:

/*
Auto center window script- Eric King (http://redrival.com/eak/index.shtml)
Permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}

Script 2: popup image waarbij de popup zich aanpast aan de grootte van de afbeelding zonder witte randen rond de afbeelding over te houden.

code:

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

// SETUPS:
// ===============================

// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 100;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth  = 1044;
defaultHeight = 606;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();        
}}

Resultaat: Hierin zit een fout, maar na enkele uren zoeken en proberen heb ik ze nog steeds niet gevonden. (het zou ook kunnen dat het volledige script fout zit, want zoals ik al eerder zei: ik ben nog volledige noob wat javascript betreft.
Ik heb dus zitten proberen en dit lijkt mij alvast een logische opbouw van de code.

code:

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this notice.

LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;

defaultWidth  = 1044;
defaultHeight = 606;


var AutoClose = true;

if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+';
var optIE='scrollbars=no,width=150,height=100;
var settings='top='+TopPosition+',left='+LeftPosition+';
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN,settings);}
if (isIE){imgWin=window.open('about:blank','',optIE,settings);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;

}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
writeln('width=100-(document.body.clientWidth-document.images[0].width);');
writeln('height=100-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].

height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" 

onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();        
}}

donderdag 5 oktober 2006 22:41

Acties:

user109731

Sorry, maar ik overdrijf niet als ik dit ranzige code noem. Browser detectie bijvoorbeeld, voor zoiets simpels, en wat doe je met gebruikers van opera, safari, konqueror, ...?

Resultaat: Hierin zit een fout, maar na enkele uren zoeken en proberen heb ik ze nog steeds niet gevonden. (het zou ook kunnen dat het volledige script fout zit, want zoals ik al eerder zei: ik ben nog volledige noob wat javascript betreft.

Wat gaat er precies fout? Wat gebeurt er, of wat gebeurt er juist niet? en waar zit volgens jou de fout ongeveer? Kijk eens naar de error-console van firefox. Wat zegt die? Kun je misschien een voorbeeld online plaatsen?

Meer info geven dus, want zo is het erg lastig.

donderdag 5 oktober 2006 22:50

Acties:

Verwijderd

Topicstarter

Grote prutser schreef op donderdag 05 oktober 2006 @ 22:41:
[...]
Wat gaat er precies fout? Wat gebeurt er, of wat gebeurt er juist niet?
[...]

Er gebeurt niets, dat is het probleem. De twee codes appart werken allebei, maar wanneer ik de hoofdcode (script2) probeer te centreren door script1 hierin te verwerken komt er geen popup meer.

Bron van het autosizeimagepopup-script: http://www.codelifter.com...t/autosizeimagepopup.html

Hier zie je de code geïmplementeerd: http://users.telenet.be/sorgeloos/portfolio/ (testversie)
Maar zoals ik al zei: totale javascript noob. Ik ben gewoon van met css te werken, maar na twee dagen zoeken heb ik dit voor de popup op deze pagina opgegeven.

[ Voor 31% gewijzigd door Verwijderd op 05-10-2006 23:02 ]

donderdag 5 oktober 2006 23:17

Acties:

Verwijderd

Topicstarter

Probleem opgelost. Voor mensen die hier in de toekomst verzeild geraken met hetzelfde probleem: hier is de oplossing: http://www.webmastercity....b63197e521d0fb1d872406a74

Reageer