Firefox pop up problem

[chrismiddleton]

Im creating an e-commerce site and am trying to show a pop up of the full image when the user clicks on the thumbnail image. now ive used the basic "_blank" command which works fine in early firefox and IE, but in the new firefox it just loads up in a new tab rather than a new window?

Any one know a way around this?

Thanks,

Chris Middleton

[londrum]

that is something set by the user. they can choose to have links open up in the same page, in a new window, or in a new tab -- it's not something you have control over.
if it was me, i would forget the open a new window idea, because you will never be able to get it consistent for this reason.

try opening up a div instead. you can use a combination of CSS and javascript to make a hidden div appear when a link is clicked. you can even give the div borders and scrollbars to make it look like a window, if you like. and you can be sure that all users will see the same thing.

[chrismiddleton]

Cheers londrum, will look into some java stuff, but as i know nothing about it should be fun! cheers tho.

Chris

[penders]

...will look into some java stuff...

Just in case you go off buying the wrong book... that's JavaScript, not 'Java'. Java is a very different beast, which I don't think is even covered by WebmasterWorld! ;)

[Marshall]

chrismiddleton,

I have a script and CSS to do exactly what penders describe with <div>. This will pop-up the <div> where you place it in the page:

<script type="text/javascript">
<!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
<style type="text/css">
div.largeImage {
border:5px solid #000090;
display:none;
position:absolute;
background-color: #000000;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
</style>

The <div>

<div id="uniqueID" class="largeImage"><img src="small_image.gif"></div>

The Link:

<img src="small_image.gif" onmouseover="ShowContent('uniqueID'); return true;" onmouseout="HideContent('uniqueID'); return true;" />

All that matters is that the ID's in the <div> match the onmouse event ID.

Marshall

[edited by: Marshall at 10:23 pm (utc) on July 12, 2007]