Web Analytics Made Easy -
StatCounter Help with border around image in popup window. - CodingForum

Announcement

Collapse
No announcement yet.

Help with border around image in popup window.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help with border around image in popup window.

    Hi. I'm designing a page where I have thumnail images. When you click on one of them, a box pops up and displays the larger version of the image. I did this using a javascript tutorial because I have very little scripting knowledge.

    My problem is that there is padding on the top and the left side of the image inside the box. I have the box's dimensions set the same as the image's dimensions, so the padding is pushing the image off of the box.

    You can see what I mean by clicking on one of the thumnails on This Page.

    Here's the code I put in a .js file and uploaded to my server,

    Code:
    function move_box(an, box) {
      var cleft = 0;
      var ctop = 0;
      var obj = an;
      while (obj.offsetParent) {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
      }
      box.style.left = cleft + 'px';
      ctop += an.offsetHeight + 8;
      if (document.body.currentStyle &&
        document.body.currentStyle['marginTop']) {
        ctop += parseInt(
          document.body.currentStyle['marginTop']);
      }
      box.style.top = ctop + 'px';
    }
    
    function show_hide_box(an, width, height, borderStyle) {
      var href = an.href;
      var boxdiv = document.getElementById(href);
    
      if (boxdiv != null) {
        if (boxdiv.style.display=='none') {
          move_box(an, boxdiv);
          boxdiv.style.display='block';
        } else
          boxdiv.style.display='none';
        return false;
      }
    
    boxdiv = document.createElement('div');
      boxdiv.setAttribute('id', href);
      boxdiv.style.display = 'block';
      boxdiv.style.position = 'absolute';
      boxdiv.style.width = width + 'px';
      boxdiv.style.height = height + 'px';
      boxdiv.style.border = borderStyle;
      boxdiv.style.backgroundColor = '#fff';
    
      var contents = document.createElement('iframe');
      contents.scrolling = 'no';
      contents.frameBorder = '0';
      contents.style.width = width + 'px';
      contents.style.height = height + 'px';
      contents.src = href;
    
      boxdiv.appendChild(contents);
      document.body.appendChild(boxdiv);
      move_box(an, boxdiv);
    
      return false;
    }
    And here's the script I added to my links in order to open the box and also to set its dimensions.

    Code:
    onClick="return show_hide_box(this,459,344,'1px solid')"
    Can anyone tell me what I have to take out of the code to get rid of the padding in the pop-up box? Also, is there any code I can add that will automatically close the box once a different thumbnail image is clicked? Thanks!
    Last edited by SBFlyFan; Oct 2, 2006, 04:48 AM.

  • #2
    You're confusing termonology. What is happening is padding is being applied to your image inside the window - not a "white border".

    Insert the following "return;" into the funciton. This will stop the function from executing any code below it. I am not positive this will work, but it seems a logical place to start. If it does work, then it means the code NOT executed was the problem and you can either leave the "return;" in place, or remove the function code below it.

    Code:
    function move_box(an, box) {
      var cleft = 0;
      var ctop = 0;
      var obj = an;
      while (obj.offsetParent) {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
      }
    
      return;
    
      box.style.left = cleft + 'px';
      ctop += an.offsetHeight + 8;
      if (document.body.currentStyle &&
        document.body.currentStyle['marginTop']) {
        ctop += parseInt(
          document.body.currentStyle['marginTop']);
      }
      box.style.top = ctop + 'px';
    }
    Last edited by syosoft; Oct 2, 2006, 04:33 AM.
    Active PHP/MySQL application developer available for immediate work.
    syosoft.com mavieo.com - Remote Web Site Administration Suite - Reseller Ready

    Comment


    • #3
      I tried what you suggested and it just caused the box to open in the upper left corner of the page.

      I made a huge mistake in leaving out some of the code for the .js file when I posted my question. I've edited it so that all of the code is there now, and I also corrected my "White border" error. Thanks for letting me know it's called "padding!"

      Comment


      • #4
        No problem - I clearly should've read the code more carefully. As you've already figured out, offset left/top is the popup positioning..my bad

        Glad to help thou --- if I did.
        Active PHP/MySQL application developer available for immediate work.
        syosoft.com mavieo.com - Remote Web Site Administration Suite - Reseller Ready

        Comment


        • #5
          Yes, you did help.

          There isn't a way to remove the padding; what I had to do was change the dimensions of my box. Now the whole image is displayed, with an even "white frame" of padding around it. It's looking good!

          Comment

          Working...
          X