PDA

View Full Version : Keep it in the browser window.



Samanello
12-05-2008, 12:48 PM
This will be a much easier question to answer if you view this...

http://wyatteugeneamm.com/101808/test.html

Found this script from a guy giving it out for free. Can't figure out how to manipulate x,y positions to detect browser edge and keep the big image on the screen.

Thanks for any help.

jscheuer1
12-05-2008, 04:40 PM
That can be done. However it's pointless because once the browser window becomes too small, the effect will still be disturbing. I guess that's why the script is free. :rolleyes:

Anyways, there are many image viewer type scripts that do things a little differently and so don't have this issue:

http://www.dynamicdrive.com/dynamicindex4/indexb.html

Perhaps you will find one there that you like better, all are free.

Samanello
12-05-2008, 05:45 PM
This is a site for the family and I don't care if they are annoyed that I force them to view it full screen at 1024x768. Not to mention the fact that I could learn a lot by the help to do it this way. Any more receptive helpers out there?

Thanks,

Sam

jscheuer1
12-06-2008, 04:18 AM
Trust me.

Once you select a more advanced script, if you have any problems with it, I will be happy to help.

However, if you are insistent on learning, see:

http://www.quirksmode.org/dom/w3c_cssom.html

and:

http://www.jr.pl/www.quirksmode.org/viewport/compatibility.html

Also, many scripts deal with this issue. If you are sincere in your desire to learn how this is done (calculating the browser edges and dealing with them as regards dynamically generated content), I could point out some of the scripts that do that so that you could observe how they accomplish it. But the best approach in a case like this is to center the larger image over the browser window (as is done in lightbox, facebox and thumbnail image viewer - to name a few), or to place it in a display area reserved for the larger images as is done in thumbnail viewer II.

Samanello
12-06-2008, 10:24 AM
The links you gave me look to be what I have been looking for. I'll see how it goes. Thanks.

jscheuer1
12-06-2008, 11:05 AM
I might also have mentioned that scripts that do deal with this usually are displaying smaller items, like a tool tip for instance. Even then, when the browser window becomes narrow and/or short, the effect is still less than ideal. But, as promised, here is one script that does do this:

http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm

particularly in its section here:


function clearbrowseredge(obj, whichedge){
if (whichedge=="rightedge"){
edgeoffsetx=0
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffsetx=dropmenuobj.contentmeasure-obj.offsetWidth
return edgeoffsetx
}
else{
edgeoffsety=0
var topedge=ie && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) //move up?
edgeoffsety=dropmenuobj.contentmeasure+obj.offsetHeight+(verticaloffset*2)
return edgeoffsety
}
}

It should be noted that the above function is used by other code in its script, so is not totally complete in and of itself, but it shows one approach to getting the window dimensions and reporting them back to a positioning function for further use. You may view the above code's full script at:

http://www.dynamicdrive.com/dynamicindex5/balloontip.js

If after going over this and the other resources I mentioned, you have some added code for the script you want to use but are having trouble with it, give me a link to a demo of it and I will see what I can do.