[JavaScript] Probleem met statusbar en image - Softwareontwikkeling

zaterdag 25 juni 2005 23:56

Acties:

It's Britney, b*tch!

Topicstarter

Allereerst mijn code:

code:

...
<script language="JavaScript">
<!--
...
}
POTM = new Image()
POTM.src = "http://users.telenet.be/David_Britney/Site/Images/POTM.JPG"
function EnlargeImage(picName,picTitle)
{
picURL=picName.src
newWindow=window.open(picURL,'EnlargedImage','toolbar=no,status=no,width='+picName.width+',height='+picName.height+',left='+(screen.width-picName.width)/2+',top='+(screen.height-picName.height)/2+'')
newWindow.document.write('<html><head><title>'+picTitle+'</title></head><body topmargin="0" leftmargin="0">[img]"'+picUrl+'"[/img]</body></html>')
newWindow.resizeBy(picName.width-newWindow.document.body.clientWidth,picName.height-newWindow.document.body.clientHeight)
newWindow.focus()
} 
//-->
</script>
...
<div id="layoutPicture">
    [img]"http://users.telenet.be/David_Britney/Site/Images/POTM_th.jpg"[/img]<br/>
    <p class="info">Click to enlarge...</p><br/><br/>
    Patrick Demarchelier Photoshoot<br/>2001
</div>
...

Het belangrijkste probleem is het volgende: In de oorspronkelijke code, die ik via google had weten te vinden, werd de afbeelding in de document.write meegegeven als achtergrondafbeelding. De afbeelding werd toen wel weergegeven, maar als gewone afbeelding ipv achtergrond. Nochthans werkte de pagina perfect als ik de code uit de document.write in een nieuw .html document stak (na vervanging van de variabelen door de gegevens die ze voorstellen natuurlijk). Toen heb ik maar geprobeerd de afbeelding als image mee te geven. Dit werkt dus eigenlijk wel, maar maakte dus geen verschil met de vorige oplossing. Daarbij worden de marges die ik meegeef genegeerd, en werken de onclick en de aangepaste cursor niet.

Een bijkomend probleem doet zich voor eens de pagina online staat. Als ik de pagina lokaal weergeef, wordt de statusbalk inderdaad verborgen, net zoals ik heb aangegeven. Maar wanneer de pagina online staat, wordt die terug zichtbaar

.

Ziet er iemand fouten in mijn code staan? Of heb ik iets over het hoofd gezien? Alvast bedankt voor de hulp

!

zondag 26 juni 2005 00:06

Acties:

crisp

Devver

Pixelated

Zet eens na de newWindow.document.write() het volgende:

JavaScript:

1	newWindow.document.close();

Een bijkomend probleem doet zich voor eens de pagina online staat. Als ik de pagina lokaal weergeef, wordt de statusbalk inderdaad verborgen, net zoals ik heb aangegeven. Maar wanneer de pagina online staat, wordt die terug zichtbaar

Dat is een security-feature in sommige browsers en valt niets aan te doen...

Intentionally left blank

zondag 26 juni 2005 00:06

Acties:

Dark Blue

Compositionista!

Alpenmeisje

Ik ben geen held hierin, maar ik wil je wel aanraden om achter die

style="cursor:hand;"

een puntkomma te zetten.

heidiulrich.nl | adventura.nl : rugzakavonturen | pathwise.nl : prepping geeks to get jobs

zondag 26 juni 2005 00:18

Acties:

crisp

Devver

Pixelated

Dark Blue schreef op zondag 26 juni 2005 @ 00:06:
Ik ben geen held hierin, maar ik wil je wel aanraden om achter die

style="cursor:hand;"

een puntkomma te zetten.

Dat maakt niet uit

Maar correcter is wel cursor:pointer (alleen voor IE < 6 heb je cursor:hand nodig)

Intentionally left blank

zondag 26 juni 2005 00:18

Acties:

fanatic_david

It's Britney, b*tch!

Topicstarter

crisp schreef op zondag 26 juni 2005 @ 00:06:
Zet eens na de newWindow.document.write() het volgende:
JavaScript:
1
newWindow.document.close();
[...]

Dat is een security-feature in sommige browsers en valt niets aan te doen...

Die document.close heeft jammer genoeg niets veranderd. En wat betreft die beveiliging mbt de statusbalk...moet ik dan de hoogte van het nieuwe venster uitbreiden met de hoogte van de statusbalk of wordt hiermee automatisch rekening gehouden?

Ook die ; na de cursor:hand heeft niet mogen baten

!

zondag 26 juni 2005 00:25

Acties:

crisp

Devver

Pixelated

picURL != picUrl (javascript is case-sensitive). Dit zou moeten werken:

JavaScript:

function EnlargeImage(picName,picTitle)
{
    var picURL=picName.src
    var newWindow=window.open('','EnlargedImage','toolbar=no,status=no,width='+picName.width+',height='+picName.height+',left='+(screen.width-picName.width)/2+',top='+(screen.height-picName.height)/2+'')
    newWindow.document.write('<html><head><title>'+picTitle+'</title></head><body style="margin:0;padding:0"><img src="'+picURL+'" alt="" title="Click the picture to close this window" onclick="self.close()" style="cursor:pointer"/></body></html>')
    newWindow.document.close();
    newWindow.resizeBy(picName.width-newWindow.document.body.clientWidth,picName.height-newWindow.document.body.clientHeight)
    newWindow.focus()
}

[ Voor 3% gewijzigd door crisp op 26-06-2005 00:28 ]

Intentionally left blank

zondag 26 juni 2005 00:34

Acties:

fanatic_david

It's Britney, b*tch!

Topicstarter

crisp schreef op zondag 26 juni 2005 @ 00:25:
picURL != picUrl (javascript is case-sensitive). Dit zou moeten werken:

JavaScript:

function EnlargeImage(picName,picTitle)
{
    var picURL=picName.src
    var newWindow=window.open('','EnlargedImage','toolbar=no,status=no,width='+picName.width+',height='+picName.height+',left='+(screen.width-picName.width)/2+',top='+(screen.height-picName.height)/2+'')
    newWindow.document.write('<html><head><title>'+picTitle+'</title></head><body style="margin:0;padding:0">[img]"'+picURL+'"[/img]</body></html>')
    newWindow.document.close();
    newWindow.resizeBy(picName.width-newWindow.document.body.clientWidth,picName.height-newWindow.document.body.clientHeight)
    newWindow.focus()
}

Ik zie niet meteen wat je hebt veranderd, of toch niet wat het verschil heeft gemaakt, maar jouw code werkt idd

! Je bent enorm bedankt $_/-\o_$ !!! Maar wat heb je precies gewijzigd (het kwam btw niet door de picUrl ipv picURL want die heb ik gewijzigd vooraleer je code te pasten!)?

zondag 26 juni 2005 00:40

Acties:

crisp

Devver

Pixelated

je document.write() liep in IE tegen een security error aan vanwege crossdomain issues; daarom heb ik in de window.open het 1e argument leeg gelaten.
Voor de rest heb ik enkel wat dingen standards-compliant gemaakt: lokale variabelen in je functie gedeclareerd, CSS gebruikt om de padding/margin van je document te verwijderen, je alt-tekst in een title-attribuut gezet en de cursor:hand vervangen door cursor:pointer. Hiermee werkt het ook goed in bijvoorbeeld Firefox.

[ Voor 6% gewijzigd door crisp op 26-06-2005 00:41 ]

Intentionally left blank

zondag 26 juni 2005 00:54

Acties:

fanatic_david

It's Britney, b*tch!

Topicstarter

crisp schreef op zondag 26 juni 2005 @ 00:40:
je document.write() liep in IE tegen een security error aan vanwege crossdomain issues; daarom heb ik in de window.open het 1e argument leeg gelaten.
Voor de rest heb ik enkel wat dingen standards-compliant gemaakt: lokale variabelen in je functie gedeclareerd, CSS gebruikt om de padding/margin van je document te verwijderen, je alt-tekst in een title-attribuut gezet en de cursor:hand vervangen door cursor:pointer. Hiermee werkt het ook goed in bijvoorbeeld Firefox.

Ja, ik had al even de tijd genomen om het uit te zoeken en het eerste argument leeg laten heeft het hem inderdaad gedaan

! Het declareren van de variabelen had ik idd ook over het hoofd gezien (zal me leren van code vanop een site te kopieren, zeker), ik heb nu een link gelegd naar mijn css stylesheet waarin de marges voor de body reeds op 0 stonden, het verschil tussen alt en title ga ik dadelijk eens uittesten en wat ik met de cursor ga aanvangen weet ik nog niet.

Je bent echt bedankt voor het oplossen van mijn probleem! Ik zal er al een hele poos achter te zoeken en wist me geen raad meer

!

*EDIT*: Ik moet je nog eens bedanken voor het geven van die 2 laatste tips! Ik vond het vrij vervelend toen ik erachter kwam dat FireFox de alt atribuut op een andere manier gebruikt (zoals het eigenlijk zou moeten zijn...als alternatief) als IE. Voordien was mijn "extra informatie" enkel te zien in IE, omdat ik ze in alt stak. Maar dankzij jouw tip zijn ze nu ook in FireFox zichtbaar

! En ik wist niet dat pointer je dezelfde cursor oplevert als hand! Nu is de cursor eindelijk zichtbaar in zowel FireFox als IE

!

Maar nu we het toch over compatibiliteit hebben...zou jij niet toevallig weten of er een alternatief bestaat voor embed, de tag waarmee ik audiostream voorzien op m'n site? Embed is, zoals je waarschijnlijk zelf wel zult weten, niet compatibel met FireFox, of werkt in ieder geval minder goed als in IE! Alvast bedankt

!

[ Voor 27% gewijzigd door fanatic_david op 26-06-2005 01:29 ]