Jump to content

Archived

This topic is now archived and is closed to further replies.

WoodsWalker

Popup Images Issues

Recommended Posts

Hi, All,

 

I recently sourced this thread, which provided some improved Javascript for catalog/popup_image.php. The reason I made this small mod was that my popup-image window was always smaller than the image itself and cut it off at the edges.

 

Now that I have modified popup_image.php, the window size is good, but the window itself behaves strangely.

 

In Firefox on Windows XP, the popup window initially appears in the top left of the browser window (where I want it), and then disappears behind all the active windows on my desktop, to a position in the center of my computer screen.

 

In IE 7.0 on Windows XP, the popup window appears in front of all active windows as it should, but again it is in the center of the computer screen.

 

Here is the Javascript code in popup_image.php, as I have it now.

 

<script language="javascript"><!--
var i=0;

function resize() {

if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
i=23; //IE 6.x on Windows XP SP2
} else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
i=50; //IE 6.x somewhere else
} else if (window.navigator.userAgent.indexOf('MSIE 7.0') != -1) {
i=0; //IE 7.x
} else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
i=38; //Firefox on Windows
} else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1 && window.navigator.userAgent.indexOf("MSIE") == -1) {
i=45; //Mozilla on Windows, but not IE7
} else if (window.opera && document.childNodes) {
i=50; //Opera 7+
} else if (navigator.vendor == 'KDE' && window.navigator.userAgent.indexOf("Konqueror") != -1) {
i=-4; //Konqueror- this works ok with small images but not so great with large ones
//if you tweak it make sure i remains negative
} else {
i=70; //All other browsers
}

if (document.images[0]) {
imgHeight = document.images[0].height+150-i;
imgWidth = document.images[0].width+80;
var height = screen.height;
var width = screen.width;
var leftpos = width / 2 - imgWidth / 2;
var toppos = height / 2 - imgHeight / 2;
window.moveTo(leftpos, toppos);
window.resizeTo(imgWidth, imgHeight);
}

self.focus();

}
//--></script>

 

I have successfully customized imgHeight and imgWidth. But, can anyone give me some pointers as to what most of this script does, especially the part with the else if statements (what is "!", and what is "i", for instance)?

 

If I can get the hang of this, I can probably fix such problems myself. Or, if you have the answer as to why my popup window moves to the back of the other windows in Firefox, and to the center of the screen in most browsers, I'd appreciate that as well.

 

Thanks for any and all help!

~Wendy

Share this post


Link to post
Share on other sites

Me again...

 

PS: Before in made the mod, the Javascript in popup_image.php looked like this:

 

<script language="javascript"><!--
var i=0;
function resize() {
 if (navigator.appName == 'Netscape') i=40;
 if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60-i);
 self.focus();
}
//--></script>

 

Perhaps I should keep it this simple, put this original code back and just adjust the width and height?

 

Thanks,

~Wendy

Share this post


Link to post
Share on other sites
I have successfully customized imgHeight and imgWidth. But, can anyone give me some pointers as to what most of this script does, especially the part with the else if statements (what is "!", and what is "i", for instance)?

 

If I can get the hang of this, I can probably fix such problems myself. Or, if you have the answer as to why my popup window moves to the back of the other windows in Firefox, and to the center of the screen in most browsers, I'd appreciate that as well.

 

the '!' means 'not'. so 'if (x != -1)' means 'if x is not equal to -1'.

 

the indexOf() method searches a string to see if it contains another string. it returns the index of the string within the search string, or if it's not found, a -1 is returned. so if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) is looking for the string 'MSIE 6.0' in the useragent identifier, and if it's found (e.g. indexOf() *not* returning -1) it knows that the user has IE version 6.0.

 

the 'i' is a (poorly named, in my opinion) value that is being subtracted from the height of the image. different browsers will create the popup window with different amounts of 'overhead', such as status bars, caption bars, buttons, etc.

 

the majority of the code (the if ... else stuff) is use to determine which browser the user has. depending on the browser and version, 'i' is set to different values and later used to adjust the position of the window when it's centered on the screen. (that's what the window.resizeto() is doing...)

 

i hope that clears things up a little bit. :)

Share this post


Link to post
Share on other sites

Thanks Dave! That does clear up a few things. B)

 

Having tested my site in a few browsers now, I have decided that most of that code in the mod is unnecessary, and besides, something about it is causing my pop-up to hide itself behind the browser window. So, I removed the mod and went back to the original code, as quoted above. I added 20 to both the width and the height, and now my pop-ups look fine.

 

Thanks again,

~Wendy

Share this post


Link to post
Share on other sites

maybe you can just add a lightbox contribution and then you will have pretty fancy boxes that hold your images AND they will fit your images too!!!


A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Share this post


Link to post
Share on other sites
Thanks Dave! That does clear up a few things. B)

 

Having tested my site in a few browsers now, I have decided that most of that code in the mod is unnecessary, and besides, something about it is causing my pop-up to hide itself behind the browser window. So, I removed the mod and went back to the original code, as quoted above. I added 20 to both the width and the height, and now my pop-ups look fine.

 

no problem. :)

 

it might be the moveTo() or resizeTo() that is causing the window to go behind the main browser window. i'm sure there's a way to get it back on top as i've seen popups do that in the past. i just don't know what it is off the top of my head but maybe someone else here does....

Share this post


Link to post
Share on other sites

×