Loading ...
Sorry, an error occurred while loading the content.

Footer/Header doesn't align with edge of panel

Expand Messages
  • Matt
    Hi, I m using the PhotoBox example to create an image panel. I m running in to a problem where the hd/ft don t span the entire panel. I ve been through the
    Message 1 of 4 , Aug 1 12:24 AM
    • 0 Attachment
      Hi,

      I'm using the PhotoBox example to create an image panel. I'm running
      in to a problem where the hd/ft don't span the entire panel. I've been
      through the container, PhotoBox, and PanelEffect, but haven't figured
      out how to modify the header/footer to expand the entire panel. I've
      modified PhotoBox.js to resize the image to fit the panel, without
      distorting the image, but the rest of the code is untouched.

      YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
      var photos = args[0];

      if (photos) {
      this.images = new Array();

      if (! (photos instanceof Array)) {
      photos = [photos];
      }

      this.currentImage = 0;

      if (photos.length == 1) {
      this.footer.style.display = "none";
      }

      for (var p=0;p<photos.length;p++) {
      var photo = photos[p];
      var img = new Image();
      img.src = photo.src;
      img.title = photo.caption;
      img.id = this.id + "_img"

      // RESIZE THE PHOTOS IN THE PHOTO WINDOW HERE!
      if (img.width > img.height) {
      img.width = 615;

      if (img.height > 445) {
      img.height = 445;
      }
      } else {
      img.height = 445;

      if (img.width > 615) {
      img.width = 615;
      }
      }

      this.images[this.images.length] = img;
      }

      this.setImage(0);
      }

      }

      what am i doing wrong?

      thanks
      -matt
    • Steven Peterson
      Matt, Resizing the image isn t enough. You need to resize the body of the Panel as well in order to get the header and footer to stretch. The header and footer
      Message 2 of 4 , Aug 2 11:52 AM
      • 0 Attachment

        Matt,


        Resizing the image isn’t enough. You need to resize the body of the Panel as well in order to get the header and footer to stretch. The header and footer size will equal the physical width of your Panel, and modifying the image size will not alter that. Try adjusting the size of the Panel body and see if that resolves your issue.

         

        Thanks!

        Steven Peterson

        Web Developer, Platform Engineering

        Yahoo!

         

         

         

        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Matt
        Sent: Tuesday, August 01, 2006 12:25 AM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Footer/Header doesn't align with edge of panel

         

        Hi,

        I'm using the PhotoBox example to create an image panel. I'm running
        in to a problem where the hd/ft don't span the entire panel. I've been
        through the container, PhotoBox, and PanelEffect, but haven't figured
        out how to modify the header/footer to expand the entire panel. I've
        modified PhotoBox.js to resize the image to fit the panel, without
        distorting the image, but the rest of the code is untouched.

        YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
        var photos = args[0];

        if (photos) {
        this.images = new Array();

        if (! (photos instanceof Array)) {
        photos = [photos];
        }

        this.currentImage = 0;

        if (photos.length == 1) {
        this.footer.style.display = "none";
        }

        for (var p=0;p<photos.length;p++) {
        var photo = photos[p];
        var img = new Image();
        img.src = photo.src;
        img.title = photo.caption;
        img.id = this.id + "_img"

        // RESIZE THE PHOTOS IN THE PHOTO WINDOW HERE!
        if (img.width > img.height) {
        img.width = 615;

        if (img.height > 445) {
        img.height = 445;
        }
        } else {
        img.height = 445;

        if (img.width > 615) {
        img.width = 615;
        }
        }

        this.images[this.images.length] = img;
        }

        this.setImage(0);
        }

        }

        what am i doing wrong?

        thanks
        -matt

      • matt snider
        Steve/anyone, Hm... I left out of my first message that i do initialize the panel with a userConfig that contains the appropriate width and height. If i adjust
        Message 3 of 4 , Aug 2 1:40 PM
        • 0 Attachment
          Steve/anyone,

          Hm... I left out of my first message that i do initialize the panel with a userConfig that contains the appropriate width and height. If i adjust these values, the window resizes appropriately, but the header/footer width remains fixed. Any other thoughts on where things might be going wrong?

          this is my code that initializes the photobox

          var images = [];

          for (var mediaType in mediaArray) {    // loop through each media type       
            if (mediaArray[mediaType][0].mediaID) {    // is this array not the default array?
               for (var i=0, obj; obj = mediaArray[mediaType][i]; i++) {
                  images.push({src:"http://www.trippert.com/"+obj.object,caption:obj.caption});
               }
            }
          }
             
          if (images.length > 0) {
            YAHOO.photobox.box = new YAHOO.widget.PhotoBox("media-window", {
          effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V ,duration:0.35}],
          fixedcenter: true, constraintoviewport: true, underlay:"none", close:true, visible:false, draggable:true, modal:true, photos:images, width:"640px", height:"500px"}   
             );
             YAHOO.photobox.box.render();
          }

          thanks
          -matt

          On 8/2/06, Steven Peterson <peterson@...> wrote:

          Matt,


          Resizing the image isn't enough. You need to resize the body of the Panel as well in order to get the header and footer to stretch. The header and footer size will equal the physical width of your Panel, and modifying the image size will not alter that. Try adjusting the size of the Panel body and see if that resolves your issue.

           

          Thanks!

          Steven Peterson

          Web Developer, Platform Engineering

          Yahoo!

           

           

           

          From: ydn-javascript@yahoogroups.com [mailto:ydn- javascript@yahoogroups.com] On Behalf Of Matt
          Sent: Tuesday, August 01, 2006 12:25 AM
          To: ydn-javascript@yahoogroups.com
          Subject: [ydn-javascript] Footer/Header doesn't align with edge of panel

           

          Hi,

          I'm using the PhotoBox example to create an image panel. I'm running
          in to a problem where the hd/ft don't span the entire panel. I've been
          through the container, PhotoBox, and PanelEffect, but haven't figured
          out how to modify the header/footer to expand the entire panel. I've
          modified PhotoBox.js to resize the image to fit the panel, without
          distorting the image, but the rest of the code is untouched.

          YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
          var photos = args[0];

          if (photos) {
          this.images = new Array();

          if (! (photos instanceof Array)) {
          photos = [photos];
          }

          this.currentImage = 0;

          if (photos.length == 1) {
          this.footer.style.display = "none";
          }

          for (var p=0;p<photos.length;p++) {
          var photo = photos[p];
          var img = new Image();
          img.src = photo.src;
          img.title = photo.caption;
          img.id = this.id + "_img"

          // RESIZE THE PHOTOS IN THE PHOTO WINDOW HERE!
          if (img.width > img.height) {
          img.width = 615;

          if (img.height > 445) {
          img.height = 445;
          }
          } else {
          img.height = 445;

          if (img.width > 615) {
          img.width = 615;
          }
          }

          this.images[this.images.length] = img;
          }

          this.setImage(0);
          }

          }

          what am i doing wrong?

          thanks
          -matt


        • Steven Peterson
          The .hd and .ft classes have fixed widths in photobox.css, which is probably why this is happening. If you adjust those, you should be able to get them to
          Message 4 of 4 , Aug 2 2:23 PM
          • 0 Attachment

            The .hd and .ft classes have fixed widths in photobox.css, which is probably why this is happening. If you adjust those, you should be able to get them to resize appropriately.

             

            Steven Peterson

            Web Developer, Platform Engineering

            Yahoo!

             

             

             

            From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of matt snider
            Sent: Wednesday, August 02, 2006 1:41 PM
            To: ydn-javascript@yahoogroups.com
            Subject: Re: [ydn-javascript] Footer/Header doesn't align with edge of panel

             

            Steve/anyone,

            Hm... I left out of my first message that i do initialize the panel with a userConfig that contains the appropriate width and height. If i adjust these values, the window resizes appropriately, but the header/footer width remains fixed. Any other thoughts on where things might be going wrong?

            this is my code that initializes the photobox

            var images = [];

            for (var mediaType in mediaArray) {    // loop through each media type       
              if (mediaArray[mediaType][0].mediaID) {    // is this array not the default array?
                 for (var i=0, obj; obj = mediaArray[mediaType][i]; i++) {
                    images.push({src:"http://www.trippert.com/"+obj.object,caption:obj.caption});
                 }
              }
            }
               
            if (images.length > 0) {
              YAHOO.photobox.box = new YAHOO.widget.PhotoBox("media-window", {
            effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V ,duration:0.35}],
            fixedcenter: true, constraintoviewport: true, underlay:"none", close:true, visible:false, draggable:true, modal:true, photos:images, width:"640px", height:"500px"}   
               );
               YAHOO.photobox.box.render();
            }

            thanks
            -matt

            On 8/2/06, Steven Peterson <peterson@...> wrote:

            Matt,


            Resizing the image isn't enough. You need to resize the body of the Panel as well in order to get the header and footer to stretch. The header and footer size will equal the physical width of your Panel, and modifying the image size will not alter that. Try adjusting the size of the Panel body and see if that resolves your issue.

             

            Thanks!

            Steven Peterson

            Web Developer, Platform Engineering

            Yahoo!

             

             

             

            From: ydn-javascript@yahoogroups.com [mailto:ydn- javascript@yahoogroups.com] On Behalf Of Matt
            Sent: Tuesday, August 01, 2006 12:25 AM
            To: ydn-javascript@yahoogroups.com
            Subject: [ydn-javascript] Footer/Header doesn't align with edge of panel

             

            Hi,

            I'm using the PhotoBox example to create an image panel. I'm running
            in to a problem where the hd/ft don't span the entire panel. I've been
            through the container, PhotoBox, and PanelEffect, but haven't figured
            out how to modify the header/footer to expand the entire panel. I've
            modified PhotoBox.js to resize the image to fit the panel, without
            distorting the image, but the rest of the code is untouched.

            YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
            var photos = args[0];

            if (photos) {
            this.images = new Array();

            if (! (photos instanceof Array)) {
            photos = [photos];
            }

            this.currentImage = 0;

            if (photos.length == 1) {
            this.footer.style.display = "none";
            }

            for (var p=0;p<photos.length;p++) {
            var photo = photos[p];
            var img = new Image();
            img.src = photo.src;
            img.title = photo.caption;
            img.id = this.id + "_img"

            // RESIZE THE PHOTOS IN THE PHOTO WINDOW HERE!
            if (img.width > img.height) {
            img.width = 615;

            if (img.height > 445) {
            img.height = 445;
            }
            } else {
            img.height = 445;

            if (img.width > 615) {
            img.width = 615;
            }
            }

            this.images[this.images.length] = img;
            }

            this.setImage(0);
            }

            }

            what am i doing wrong?

            thanks
            -matt

             

          Your message has been successfully submitted and would be delivered to recipients shortly.