Results 1 to 6 of 6

Thread: Keep it in the browser window.

  1. #1
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Keep it in the browser window.

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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.

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Pointless?

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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/...atibility.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.
    Last edited by jscheuer1; 12-06-2008 at 04:40 AM. Reason: punctuation
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks for the links

    The links you gave me look to be what I have been looking for. I'll see how it goes. Thanks.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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/dynamici...oontooltip.htm

    particularly in its section here:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •