Archive for myfreeforum.org Before posting please check the "stickies" in the support forums.
Please ask questions in real English and not "txt". You will get a better response.
Please do not ask support questions via PMs.
 

The free forums are now under new ownership, a full announcement will be made shortly

       myfreeforum.org Forum Index -> Portal components
Zudane

Karma - lytebox

I have the lytebox on my forum, and I was hoping to be able to get it to load the addrating page onto it...

It loads great, which I love... but the problem is that when you click the "rate" button I think it's just refreshing the page into the addrate page.

Is there any way to be able to make it so you can click "rate" and it submits the button and then closes the window?

Some relevant pages:

Karma in viewtopic_body
Spoiler:

Code:
<!-- BEGIN custom_fields -->
               <!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Karma" -->
<img src="ranks/blue_bar/rank{postrow.custom_fields.PROFILE_FIELD_VALUE}.png"><br />
               <!-- ENDIF -->
               <!-- END custom_fields -->
<a href="javascript:void(0)" onclick="window.open('addrating.php?userid={postrow.POSTER_ID}&amp;component=KARMA', '_addrating', 'resizable=yes,width=400,height=200')">Rate User</a><br />



Karma in viewtopic_body loading in lytebox (lyteframe for iframe)
Spoiler:

Code:
<!-- BEGIN custom_fields -->
               <!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "Karma" -->
<img src="ranks/blue_bar/rank{postrow.custom_fields.PROFILE_FIELD_VALUE}.png"><br />
               <!-- ENDIF -->
               <!-- END custom_fields -->
<a href="addrating.php?userid={postrow.POSTER_ID}&component=KARMA" rel="lyteframe">Rate User</a><br />



lytebox.js (VERY long)
Spoiler:

Code:
//***********************************************************************************************************************************/
//   LyteBox v3.22
//
//    Author: Markus F. Hay
//  Website: http://www.dolem.com/lytebox
//      Date: October 2, 2007
//   License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):
//            * Firefox: 2.0.0.7, 1.5.0.12
//            * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2
//            * Opera: 9.23
//
// Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62
//            * v3.22 (10/02/07)
//            * v3.21 (09/30/07)
//            * v3.20 (07/12/07)
//            * v3.10 (05/28/07)
//            * v3.00 (05/15/07)
//            * v2.02 (11/13/06)
//
//   Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more
//          information please visit http://huddletogether.com/projects/lightbox2/
//***********************************************************************************************************************************/
Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }
Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }

function LyteBox() {
   /*** Start Global Configuration ***/
      this.theme            = 'grey';   // themes: grey (default), red, green, blue, gold
      this.hideFlash         = true;      // controls whether or not Flash objects should be hidden
      this.outerBorder      = true;      // controls whether to show the outer grey (or theme) border
      this.resizeSpeed      = 8;      // controls the speed of the image resizing (1=slowest and 10=fastest)
      this.maxOpacity         = 80;      // higher opacity = darker overlay, lower opacity = lighter overlay
      this.navType         = 1;      // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
      this.autoResize         = true;      // controls whether or not images should be resized if larger than the browser window dimensions
      this.doAnimations      = true;      // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
      
      this.borderSize         = 12;      // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
   /*** End Global Configuration ***/
   
   /*** Configure Slideshow Options ***/
      this.slideInterval      = 4000;      // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
      this.showNavigation      = true;      // true to display Next/Prev buttons/text during slideshow, false to hide
      this.showClose         = true;      // true to display the Close button, false to hide
      this.showDetails      = true;      // true to display image details (caption, count), false to hide
      this.showPlayPause      = true;      // true to display pause/play buttons next to close button, false to hide
      this.autoEnd         = true;      // true to automatically close Lytebox after the last image is reached, false to keep open
      this.pauseOnNextClick   = false;   // true to pause the slideshow when the "Next" button is clicked
        this.pauseOnPrevClick    = true;      // true to pause the slideshow when the "Prev" button is clicked
   /*** End Slideshow Configuration ***/
   
   if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
   if(this.resizeSpeed < 1) { resizeSpeed = 1; }
   this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
   this.resizeWTimerArray      = new Array();
   this.resizeWTimerCount      = 0;
   this.resizeHTimerArray      = new Array();
   this.resizeHTimerCount      = 0;
   this.showContentTimerArray   = new Array();
   this.showContentTimerCount   = 0;
   this.overlayTimerArray      = new Array();
   this.overlayTimerCount      = 0;
   this.imageTimerArray      = new Array();
   this.imageTimerCount      = 0;
   this.timerIDArray         = new Array();
   this.timerIDCount         = 0;
   this.slideshowIDArray      = new Array();
   this.slideshowIDCount      = 0;
   this.imageArray    = new Array();
   this.activeImage = null;
   this.slideArray    = new Array();
   this.activeSlide = null;
   this.frameArray    = new Array();
   this.activeFrame = null;
   this.checkFrame();
   this.isSlideshow = false;
   this.isLyteframe = false;
   /*@cc_on
      /*@if (@_jscript)
         this.ie = (document.all && !window.opera) ? true : false;
      /*@else @*/
         this.ie = false;
      /*@end
   @*/
   this.ie7 = (this.ie && window.XMLHttpRequest);   
   this.initialize();
}
LyteBox.prototype.initialize = function() {
   this.updateLyteboxItems();
   var objBody = this.doc.getElementsByTagName("body").item(0);   
   if (this.doc.getElementById('lbOverlay')) {
      objBody.removeChild(this.doc.getElementById("lbOverlay"));
      objBody.removeChild(this.doc.getElementById("lbMain"));
   }
   var objOverlay = this.doc.createElement("div");
      objOverlay.setAttribute('id','lbOverlay');
      objOverlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      if ((this.ie && !this.ie7) || (this.ie7 && this.doc.compatMode == 'BackCompat')) {
         objOverlay.style.position = 'absolute';
      }
      objOverlay.style.display = 'none';
      objBody.appendChild(objOverlay);
   var objLytebox = this.doc.createElement("div");
      objLytebox.setAttribute('id','lbMain');
      objLytebox.style.display = 'none';
      objBody.appendChild(objLytebox);
   var objOuterContainer = this.doc.createElement("div");
      objOuterContainer.setAttribute('id','lbOuterContainer');
      objOuterContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objLytebox.appendChild(objOuterContainer);
   var objIframeContainer = this.doc.createElement("div");
      objIframeContainer.setAttribute('id','lbIframeContainer');
      objIframeContainer.style.display = 'none';
      objOuterContainer.appendChild(objIframeContainer);
   var objIframe = this.doc.createElement("iframe");
      objIframe.setAttribute('id','lbIframe');
      objIframe.setAttribute('name','lbIframe');
      objIframe.style.display = 'none';
      objIframeContainer.appendChild(objIframe);
   var objImageContainer = this.doc.createElement("div");
      objImageContainer.setAttribute('id','lbImageContainer');
      objOuterContainer.appendChild(objImageContainer);
   var objLyteboxImage = this.doc.createElement("img");
      objLyteboxImage.setAttribute('id','lbImage');
      objImageContainer.appendChild(objLyteboxImage);
   var objLoading = this.doc.createElement("div");
      objLoading.setAttribute('id','lbLoading');
      objOuterContainer.appendChild(objLoading);
   var objDetailsContainer = this.doc.createElement("div");
      objDetailsContainer.setAttribute('id','lbDetailsContainer');
      objDetailsContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objLytebox.appendChild(objDetailsContainer);
   var objDetailsData =this.doc.createElement("div");
      objDetailsData.setAttribute('id','lbDetailsData');
      objDetailsData.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objDetailsContainer.appendChild(objDetailsData);
   var objDetails = this.doc.createElement("div");
      objDetails.setAttribute('id','lbDetails');
      objDetailsData.appendChild(objDetails);
   var objCaption = this.doc.createElement("span");
      objCaption.setAttribute('id','lbCaption');
      objDetails.appendChild(objCaption);
   var objHoverNav = this.doc.createElement("div");
      objHoverNav.setAttribute('id','lbHoverNav');
      objImageContainer.appendChild(objHoverNav);
   var objBottomNav = this.doc.createElement("div");
      objBottomNav.setAttribute('id','lbBottomNav');
      objDetailsData.appendChild(objBottomNav);
   var objPrev = this.doc.createElement("a");
      objPrev.setAttribute('id','lbPrev');
      objPrev.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objPrev.setAttribute('href','#');
      objHoverNav.appendChild(objPrev);
   var objNext = this.doc.createElement("a");
      objNext.setAttribute('id','lbNext');
      objNext.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objNext.setAttribute('href','#');
      objHoverNav.appendChild(objNext);
   var objNumberDisplay = this.doc.createElement("span");
      objNumberDisplay.setAttribute('id','lbNumberDisplay');
      objDetails.appendChild(objNumberDisplay);
   var objNavDisplay = this.doc.createElement("span");
      objNavDisplay.setAttribute('id','lbNavDisplay');
      objNavDisplay.style.display = 'none';
      objDetails.appendChild(objNavDisplay);
   var objClose = this.doc.createElement("a");
      objClose.setAttribute('id','lbClose');
      objClose.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objClose.setAttribute('href','#');
      objBottomNav.appendChild(objClose);
   var objPause = this.doc.createElement("a");
      objPause.setAttribute('id','lbPause');
      objPause.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objPause.setAttribute('href','#');
      objPause.style.display = 'none';
      objBottomNav.appendChild(objPause);
   var objPlay = this.doc.createElement("a");
      objPlay.setAttribute('id','lbPlay');
      objPlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
      objPlay.setAttribute('href','#');
      objPlay.style.display = 'none';
      objBottomNav.appendChild(objPlay);
};
LyteBox.prototype.updateLyteboxItems = function() {   
   var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
   for (var i = 0; i < anchors.length; i++) {
      var anchor = anchors[i];
      var relAttribute = String(anchor.getAttribute('rel'));
      if (anchor.getAttribute('href')) {
         if (relAttribute.toLowerCase().match('lytebox')) {
            anchor.onclick = function () { myLytebox.start(this, false, false); return false; }
         } else if (relAttribute.toLowerCase().match('lyteshow')) {
            anchor.onclick = function () { myLytebox.start(this, true, false); return false; }
         } else if (relAttribute.toLowerCase().match('lyteframe')) {
            anchor.onclick = function () { myLytebox.start(this, false, true); return false; }
         }
      }
   }
};
LyteBox.prototype.start = function(imageLink, doSlide, doFrame) {
   if (this.ie && !this.ie7) {   this.toggleSelects('hide');   }
   if (this.hideFlash) { this.toggleFlash('hide'); }
   this.isLyteframe = (doFrame ? true : false);
   var pageSize   = this.getPageSize();
   var objOverlay   = this.doc.getElementById('lbOverlay');
   var objBody      = this.doc.getElementsByTagName("body").item(0);
   objOverlay.style.height = pageSize[1] + "px";
   objOverlay.style.display = '';
   this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity));
   var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
   if (this.isLyteframe) {
      this.frameArray = [];
      this.frameNum = 0;
      if ((imageLink.getAttribute('rel') == 'lyteframe')) {
         var rev = imageLink.getAttribute('rev');
         this.frameArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));
      } else {
         if (imageLink.getAttribute('rel').indexOf('lyteframe') != -1) {
            for (var i = 0; i < anchors.length; i++) {
               var anchor = anchors[i];
               if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
                  var rev = anchor.getAttribute('rev');
                  this.frameArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));
               }
            }
            this.frameArray.removeDuplicates();
            while(this.frameArray[this.frameNum][0] != imageLink.getAttribute('href')) { this.frameNum++; }
         }
      }
   } else {
      this.imageArray = [];
      this.imageNum = 0;
      this.slideArray = [];
      this.slideNum = 0;
      if ((imageLink.getAttribute('rel') == 'lytebox')) {
         this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
      } else {
         if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) {
            for (var i = 0; i < anchors.length; i++) {
               var anchor = anchors[i];
               if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
                  this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
               }
            }
            this.imageArray.removeDuplicates();
            while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; }
         }
         if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) {
            for (var i = 0; i < anchors.length; i++) {
               var anchor = anchors[i];
               if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
                  this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
               }
            }
            this.slideArray.removeDuplicates();
            while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; }
         }
      }
   }
   var object = this.doc.getElementById('lbMain');
      object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";
      object.style.display = '';
   if (!this.outerBorder) {
      this.doc.getElementById('lbOuterContainer').style.border = 'none';
      this.doc.getElementById('lbDetailsContainer').style.border = 'none';
   } else {
      this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
      this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
   }
   this.doc.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; }
   this.doc.getElementById('lbMain').onclick = function(e) {
      var e = e;
      if (!e) {
         if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
            e = window.parent.window.event;
         } else {
            e = window.event;
         }
      }
      var id = (e.target ? e.target.id : e.srcElement.id);
      if (id == 'lbMain') { myLytebox.end(); return false; }
   }
   this.doc.getElementById('lbClose').onclick = function() { myLytebox.end(); return false; }
   this.doc.getElementById('lbPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }
   this.doc.getElementById('lbPlay').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }   
   this.isSlideshow = doSlide;
   this.isPaused = (this.slideNum != 0 ? true : false);
   if (this.isSlideshow && this.showPlayPause && this.isPaused) {
      this.doc.getElementById('lbPlay').style.display = '';
      this.doc.getElementById('lbPause').style.display = 'none';
   }
   if (this.isLyteframe) {
      this.changeContent(this.frameNum);
   } else {
      if (this.isSlideshow) {
         this.changeContent(this.slideNum);
      } else {
         this.changeContent(this.imageNum);
      }
   }
};
LyteBox.prototype.changeContent = function(imageNum) {
   if (this.isSlideshow) {
      for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
   }
   this.activeImage = this.activeSlide = this.activeFrame = imageNum;
   if (!this.outerBorder) {
      this.doc.getElementById('lbOuterContainer').style.border = 'none';
      this.doc.getElementById('lbDetailsContainer').style.border = 'none';
   } else {
      this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
      this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
   }
   this.doc.getElementById('lbLoading').style.display = '';
   this.doc.getElementById('lbImage').style.display = 'none';
   this.doc.getElementById('lbIframe').style.display = 'none';
   this.doc.getElementById('lbPrev').style.display = 'none';
   this.doc.getElementById('lbNext').style.display = 'none';
   this.doc.getElementById('lbIframeContainer').style.display = 'none';
   this.doc.getElementById('lbDetailsContainer').style.display = 'none';
   this.doc.getElementById('lbNumberDisplay').style.display = 'none';
   if (this.navType == 2 || this.isLyteframe) {
      object = this.doc.getElementById('lbNavDisplay');
      object.innerHTML = '&nbsp;&nbsp;&nbsp;<span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next &raquo;</a>';
      object.style.display = 'none';
   }
   if (this.isLyteframe) {
      var iframe = myLytebox.doc.getElementById('lbIframe');
      var styles = this.frameArray[this.activeFrame][2];
      var aStyles = styles.split(';');
      for (var i = 0; i < aStyles.length; i++) {
         if (aStyles[i].indexOf('width:') >= 0) {
            var w = aStyles[i].replace('width:', '');
            iframe.width = w.trim();
         } else if (aStyles[i].indexOf('height:') >= 0) {
            var h = aStyles[i].replace('height:', '');
            iframe.height = h.trim();
         } else if (aStyles[i].indexOf('scrolling:') >= 0) {
            var s = aStyles[i].replace('scrolling:', '');
            iframe.scrolling = s.trim();
         } else if (aStyles[i].indexOf('border:') >= 0) {
            // Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)
            //var b = aStyles[i].replace('border:', '');
            //iframe.style.border = b.trim();
         }
      }
      this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));
   } else {
      imgPreloader = new Image();
      imgPreloader.onload = function() {
         var imageWidth = imgPreloader.width;
         var imageHeight = imgPreloader.height;
         if (myLytebox.autoResize) {
            var pagesize = myLytebox.getPageSize();
            var x = pagesize[2] - 150;
            var y = pagesize[3] - 150;
            if (imageWidth > x) {
               imageHeight = Math.round(imageHeight * (x / imageWidth));
               imageWidth = x;
               if (imageHeight > y) {
                  imageWidth = Math.round(imageWidth * (y / imageHeight));
                  imageHeight = y;
               }
            } else if (imageHeight > y) {
               imageWidth = Math.round(imageWidth * (y / imageHeight));
               imageHeight = y;
               if (imageWidth > x) {
                  imageHeight = Math.round(imageHeight * (x / imageWidth));
                  imageWidth = x;
               }
            }
         }
         var lbImage = myLytebox.doc.getElementById('lbImage')
         lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);
         lbImage.width = imageWidth;
         lbImage.height = imageHeight;
         myLytebox.resizeContainer(imageWidth, imageHeight);
         imgPreloader.onload = function() {};
      }
      imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
   }
};
LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {
   this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth;
   this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight;
   this.xScale = ((imgWidth  + (this.borderSize * 2)) / this.wCur) * 100;
   this.yScale = ((imgHeight  + (this.borderSize * 2)) / this.hCur) * 100;
   var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;
   var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;
   if (!(hDiff == 0)) {
      this.hDone = false;
      this.resizeH('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));
   } else {
      this.hDone = true;
   }
   if (!(wDiff == 0)) {
      this.wDone = false;
      this.resizeW('lbOuterContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));
   } else {
      this.wDone = true;
   }
   if ((hDiff == 0) && (wDiff == 0)) {
      if (this.ie){ this.pause(250); } else { this.pause(100); }
   }
   this.doc.getElementById('lbPrev').style.height = imgHeight + "px";
   this.doc.getElementById('lbNext').style.height = imgHeight + "px";
   this.doc.getElementById('lbDetailsContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";
   this.showContent();
};
LyteBox.prototype.showContent = function() {
   if (this.wDone && this.hDone) {
      for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }
      if (this.outerBorder) {
         this.doc.getElementById('lbOuterContainer').style.borderBottom = 'none';
      }
      this.doc.getElementById('lbLoading').style.display = 'none';
      if (this.isLyteframe) {
         this.doc.getElementById('lbIframe').style.display = '';
         this.appear('lbIframe', (this.doAnimations ? 0 : 100));
      } else {
         this.doc.getElementById('lbImage').style.display = '';
         this.appear('lbImage', (this.doAnimations ? 0 : 100));
         this.preloadNeighborImages();
      }
      if (this.isSlideshow) {
         if(this.activeSlide == (this.slideArray.length - 1)) {
            if (this.autoEnd) {
               this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);
            }
         } else {
            if (!this.isPaused) {
               this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
            }
         }
         this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navType == 1 ? '' : 'none');
         this.doc.getElementById('lbClose').style.display = (this.showClose ? '' : 'none');
         this.doc.getElementById('lbDetails').style.display = (this.showDetails ? '' : 'none');
         this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.isPaused ? '' : 'none');
         this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.isPaused ? 'none' : '');
         this.doc.getElementById('lbNavDisplay').style.display = (this.showNavigation && this.navType == 2 ? '' : 'none');
      } else {
         this.doc.getElementById('lbHoverNav').style.display = (this.navType == 1 && !this.isLyteframe ? '' : 'none');
         if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {
            this.doc.getElementById('lbNavDisplay').style.display = '';
         } else {
            this.doc.getElementById('lbNavDisplay').style.display = 'none';
         }
         this.doc.getElementById('lbClose').style.display = '';
         this.doc.getElementById('lbDetails').style.display = '';
         this.doc.getElementById('lbPause').style.display = 'none';
         this.doc.getElementById('lbPlay').style.display = 'none';
      }
      this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');
      this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');
      try {
         this.doc.getElementById('lbIframe').src = this.frameArray[this.activeFrame][0];
      } catch(e) { }
   } else {
      this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200);
   }
};
LyteBox.prototype.updateDetails = function() {
   var object = this.doc.getElementById('lbCaption');
   var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));
   object.style.display = '';
   object.innerHTML = (sTitle == null ? '' : sTitle);
   this.updateNav();
   this.doc.getElementById('lbDetailsContainer').style.display = '';
   object = this.doc.getElementById('lbNumberDisplay');
   if (this.isSlideshow && this.slideArray.length > 1) {
      object.style.display = '';
      object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;
      this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none');
   } else if (this.imageArray.length > 1 && !this.isLyteframe) {
      object.style.display = '';
      object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;
      this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 ? '' : 'none');
   } else if (this.frameArray.length > 1 && this.isLyteframe) {
      object.style.display = '';
      object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;
      this.doc.getElementById('lbNavDisplay').style.display = '';
   } else {
      this.doc.getElementById('lbNavDisplay').style.display = 'none';
   }
   this.appear('lbDetailsContainer', (this.doAnimations ? 0 : 100));
};
LyteBox.prototype.updateNav = function() {
   if (this.isSlideshow) {
      if (this.activeSlide != 0) {
         var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
            object.style.display = '';
            object.onclick = function() {
               if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
               myLytebox.changeContent(myLytebox.activeSlide - 1); return false;
            }
      } else {
         if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
      }
      if (this.activeSlide != (this.slideArray.length - 1)) {
         var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
            object.style.display = '';
            object.onclick = function() {
               if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
               myLytebox.changeContent(myLytebox.activeSlide + 1); return false;
            }
      } else {
         if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
      }
   } else if (this.isLyteframe) {
      if(this.activeFrame != 0) {
         var object = this.doc.getElementById('lbPrev2');
            object.style.display = '';
            object.onclick = function() {
               myLytebox.changeContent(myLytebox.activeFrame - 1); return false;
            }
      } else {
         this.doc.getElementById('lbPrev2_Off').style.display = '';
      }
      if(this.activeFrame != (this.frameArray.length - 1)) {
         var object = this.doc.getElementById('lbNext2');
            object.style.display = '';
            object.onclick = function() {
               myLytebox.changeContent(myLytebox.activeFrame + 1); return false;
            }
      } else {
         this.doc.getElementById('lbNext2_Off').style.display = '';
      }      
   } else {
      if(this.activeImage != 0) {
         var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
            object.style.display = '';
            object.onclick = function() {
               myLytebox.changeContent(myLytebox.activeImage - 1); return false;
            }
      } else {
         if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
      }
      if(this.activeImage != (this.imageArray.length - 1)) {
         var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
            object.style.display = '';
            object.onclick = function() {
               myLytebox.changeContent(myLytebox.activeImage + 1); return false;
            }
      } else {
         if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
      }
   }
   this.enableKeyboardNav();
};
LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };
LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };
LyteBox.prototype.keyboardAction = function(e) {
   var keycode = key = escape = null;
   keycode   = (e == null) ? event.keyCode : e.which;
   key      = String.fromCharCode(keycode).toLowerCase();
   escape  = (e == null) ? 27 : e.DOM_VK_ESCAPE;
   if ((key == 'x') || (key == 'c') || (keycode == escape)) {
      myLytebox.end();
   } else if ((key == 'p') || (keycode == 37)) {
      if (myLytebox.isSlideshow) {
         if(myLytebox.activeSlide != 0) {
            myLytebox.disableKeyboardNav();
            myLytebox.changeContent(myLytebox.activeSlide - 1);
         }
      } else if (myLytebox.isLyteframe) {
         if(myLytebox.activeFrame != 0) {
            myLytebox.disableKeyboardNav();
            myLytebox.changeContent(myLytebox.activeFrame - 1);
         }
      } else {
         if(myLytebox.activeImage != 0) {
            myLytebox.disableKeyboardNav();
            myLytebox.changeContent(myLytebox.activeImage - 1);
         }
      }
   } else if ((key == 'n') || (keycode == 39)) {
      if (myLytebox.isSlideshow) {
         if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) {
            myLytebox.disableKeyboardNav();
            myLytebox.changeContent(myLytebox.activeSlide + 1);
         }
      } else if (myLytebox.isLyteframe) {
         if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) {
            myLytebox.disableKeyboardNav();
            myLytebox.changeContent(myLytebox.activeFrame + 1);
         }
      } else {
         if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) {
            myLytebox.disableKeyboardNav();
            myLytebox.changeContent(myLytebox.activeImage + 1);
         }
      }
   }
};
LyteBox.prototype.preloadNeighborImages = function() {
   if (this.isSlideshow) {
      if ((this.slideArray.length - 1) > this.activeSlide) {
         preloadNextImage = new Image();
         preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];
      }
      if(this.activeSlide > 0) {
         preloadPrevImage = new Image();
         preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];
      }
   } else {
      if ((this.imageArray.length - 1) > this.activeImage) {
         preloadNextImage = new Image();
         preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
      }
      if(this.activeImage > 0) {
         preloadPrevImage = new Image();
         preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
      }
   }
};
LyteBox.prototype.togglePlayPause = function(hideID, showID) {
   if (this.isSlideshow && hideID == "lbPause") {
      for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
   }
   this.doc.getElementById(hideID).style.display = 'none';
   this.doc.getElementById(showID).style.display = '';
   if (hideID == "lbPlay") {
      this.isPaused = false;
      if (this.activeSlide == (this.slideArray.length - 1)) {
         this.end();
      } else {
         this.changeContent(this.activeSlide + 1);
      }
   } else {
      this.isPaused = true;
   }
};
LyteBox.prototype.end = function(caller) {
   var closeClick = (caller == 'slideshow' ? false : true);
   if (this.isSlideshow && this.isPaused && !closeClick) { return; }
   this.disableKeyboardNav();
   this.doc.getElementById('lbMain').style.display = 'none';
   this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0));
   this.toggleSelects('visible');
   if (this.hideFlash) { this.toggleFlash('visible'); }
   if (this.isSlideshow) {
      for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
   }
   if (this.isLyteframe) {
       this.initialize();
   }
};
LyteBox.prototype.checkFrame = function() {
   if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
      this.isFrame = true;
      this.lytebox = "window.parent." + window.name + ".myLytebox";
      this.doc = parent.document;
   } else {
      this.isFrame = false;
      this.lytebox = "myLytebox";
      this.doc = document;
   }
};
LyteBox.prototype.getPixelRate = function(cur, img) {
   var diff = (img > cur) ? img - cur : cur - img;
   if (diff >= 0 && diff <= 100) { return 10; }
   if (diff > 100 && diff <= 200) { return 15; }
   if (diff > 200 && diff <= 300) { return 20; }
   if (diff > 300 && diff <= 400) { return 25; }
   if (diff > 400 && diff <= 500) { return 30; }
   if (diff > 500 && diff <= 600) { return 35; }
   if (diff > 600 && diff <= 700) { return 40; }
   if (diff > 700) { return 45; }
};
LyteBox.prototype.appear = function(id, opacity) {
   var object = this.doc.getElementById(id).style;
   object.opacity = (opacity / 100);
   object.MozOpacity = (opacity / 100);
   object.KhtmlOpacity = (opacity / 100);
   object.filter = "alpha(opacity=" + (opacity + 10) + ")";
   if (opacity == 100 && (id == 'lbImage' || id == 'lbIframe')) {
      try { object.removeAttribute("filter"); } catch(e) {}   /* Fix added for IE Alpha Opacity Filter bug. */
      this.updateDetails();
   } else if (opacity >= this.maxOpacity && id == 'lbOverlay') {
      for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }
      return;
   } else if (opacity >= 100 && id == 'lbDetailsContainer') {
      try { object.removeAttribute("filter"); } catch(e) {}   /* Fix added for IE Alpha Opacity Filter bug. */
      for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }
      this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";
   } else {
      if (id == 'lbOverlay') {
         this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1);
      } else {
         this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1);
      }
   }
};
LyteBox.prototype.fade = function(id, opacity) {
   var object = this.doc.getElementById(id).style;
   object.opacity = (opacity / 100);
   object.MozOpacity = (opacity / 100);
   object.KhtmlOpacity = (opacity / 100);
   object.filter = "alpha(opacity=" + opacity + ")";
   if (opacity <= 0) {
      try {
         object.display = 'none';
      } catch(err) { }
   } else if (id == 'lbOverlay') {
      this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1);
   } else {
      this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1);
   }
};
LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) {
   if (!this.hDone) {
      this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100);
      return;
   }
   var object = this.doc.getElementById(id);
   var timer = speed ? speed : (this.resizeDuration/2);
   var newW = (this.doAnimations ? curW : maxW);
   object.style.width = (newW) + "px";
   if (newW < maxW) {
      newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;
   } else if (newW > maxW) {
      newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;
   }
   this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);
   if (parseInt(object.style.width) == maxW) {
      this.wDone = true;
      for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }
   }
};
LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {
   var timer = speed ? speed : (this.resizeDuration/2);
   var object = this.doc.getElementById(id);
   var newH = (this.doAnimations ? curH : maxH);
   object.style.height = (newH) + "px";
   if (newH < maxH) {
      newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;
   } else if (newH > maxH) {
      newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;
   }
   this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);
   if (parseInt(object.style.height) == maxH) {
      this.hDone = true;
      for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }
   }
};
LyteBox.prototype.getPageScroll = function() {
   if (self.pageYOffset) {
      return this.isFrame ? parent.pageYOffset : self.pageYOffset;
   } else if (this.doc.documentElement && this.doc.documentElement.scrollTop){
      return this.doc.documentElement.scrollTop;
   } else if (document.body) {
      return this.doc.body.scrollTop;
   }
};
LyteBox.prototype.getPageSize = function() {   
   var xScroll, yScroll, windowWidth, windowHeight;
   if (window.innerHeight && window.scrollMaxY) {
      xScroll = this.doc.scrollWidth;
      yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);
   } else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){
      xScroll = this.doc.body.scrollWidth;
      yScroll = this.doc.body.scrollHeight;
   } else {
      xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;
      yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;
      xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;
      yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;
   }
   if (self.innerHeight) {
      windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;
      windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;
   } else if (document.documentElement && document.documentElement.clientHeight) {
      windowWidth = this.doc.documentElement.clientWidth;
      windowHeight = this.doc.documentElement.clientHeight;
   } else if (document.body) {
      windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;
      windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;
      windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;
      windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;
   }
   var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
   var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;
   return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
};
LyteBox.prototype.toggleFlash = function(state) {
   var objects = this.doc.getElementsByTagName("object");
   for (var i = 0; i < objects.length; i++) {
      objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
   }
   var embeds = this.doc.getElementsByTagName("embed");
   for (var i = 0; i < embeds.length; i++) {
      embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
   }
   if (this.isFrame) {
      for (var i = 0; i < parent.frames.length; i++) {
         try {
            objects = parent.frames[i].window.document.getElementsByTagName("object");
            for (var j = 0; j < objects.length; j++) {
               objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
            }
         } catch(e) { }
         try {
            embeds = parent.frames[i].window.document.getElementsByTagName("embed");
            for (var j = 0; j < embeds.length; j++) {
               embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
            }
         } catch(e) { }
      }
   }
};
LyteBox.prototype.toggleSelects = function(state) {
   var selects = this.doc.getElementsByTagName("select");
   for (var i = 0; i < selects.length; i++ ) {
      selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
   }
   if (this.isFrame) {
      for (var i = 0; i < parent.frames.length; i++) {
         try {
            selects = parent.frames[i].window.document.getElementsByTagName("select");
            for (var j = 0; j < selects.length; j++) {
               selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
            }
         } catch(e) { }
      }
   }
};
LyteBox.prototype.pause = function(numberMillis) {
   var now = new Date();
   var exitTime = now.getTime() + numberMillis;
   while (true) {
      now = new Date();
      if (now.getTime() > exitTime) { return; }
   }
};
if (window.addEventListener) {
   window.addEventListener("load",initLytebox,false);
} else if (window.attachEvent) {
   window.attachEvent("onload",initLytebox);
} else {
   window.onload = function() {initLytebox();}
}
function initLytebox() { myLytebox = new LyteBox(); }



cms_Karma.tpl

Spoiler:

Code:

<script>
if ("{S_STATE}"=="rate")
{
   //document.write("here");
}
else if ("{S_STATE}"=="error")
{
   document.write("Error: {S_ERROR}");
}
else
{
   
   window.close();
   
}

</script>
<title>Rate This User</title>
<form action="{S_RATING_ACTION}" method="post" target="_top"  ">


<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center">
 
  <tr>
   <td class="row1"><table border="0" cellpadding="3" cellspacing="1" width="100%">
      
        
      
        <tr>
        <td>Rate user: {USERNAME}<td>
        </tr>
        <td>Previous Karma: {PREV_RATING}</td>
       </tr>
      <tr>
      <td>
      {RATINGS}
      </td>
      </tr>
      <tr>
      <td>
      <input type="submit" name="rate" class="mainoption" value="rate">
      </td>
      </tr>
      
      </table></td>
  </tr>
</table>

</form>

myff admin

I'd add debugging to :

Code:

<script>
if ("{S_STATE}"=="rate")
{
   //document.write("here");
}
else if ("{S_STATE}"=="error")
{
   document.write("Error: {S_ERROR}");
}
else
{
  
   window.close();
  
}

</script>


Some alert statements so you can see what is coming through is S_STATE. I'd also add onSumit javascript to the forms submission button, that could add a timer to kill the window.

       myfreeforum.org Forum Index -> Portal components
Page 1 of 1
Create your own free forum | Buy a domain to use with your forum