locked
Problem with Image Carousel in CEWP. RRS feed

  • Question

  • I found an image carousel script and am currently using it in our SharePoint Portal.  The script works perfectly except for one thing. When the page first loads up for a brief second the screen width is expanded out, after which it returns to normal.  I noticed that it also does this when you open the page for editing, but when you are in edit mode it will stay expanded.  I tried to contact the designer but no luck.  Does anyone know why this is happening and how to fix it?

    I was unable to attach the script, but can e-mail the txt file.

    Thank you and I greatly appreciate any help that can be provided!

    Scott

    Monday, May 21, 2012 5:16 PM

All replies

  • Does this routine depend on a list web part to get the image list that is then hidden by the JavaScipt? If so, then the list is being displayed for a fraction of a second and then is hidden. You might add some CSS to hide the web part.


    Mike Smith TechTrainingNotes.blogspot.com

    Tuesday, May 22, 2012 2:33 AM
  • Hi Mike,

    No, the images are located within a SharePoint Picture library.  The script.txt file is located within a central list of other script that I use and I reference its URL within a CEWP.  The first part of the script is all HTML with a small section of Java at the end to define the physical aspects within the site.  Other then the two issues I explained previously it wroks great! Is there anyway I can upload a copy of the script file? 

    Thank you,

    Scott

    Wednesday, May 23, 2012 8:19 PM
  • Depending on the length... you can paste it in a message here using the "Insert Code Block" button.

    Mike Smith TechTrainingNotes.blogspot.com

    Thursday, May 24, 2012 1:23 AM
  • Mike, its pasted below!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" >
    /*
         This script downloaded from www.JavaScriptBank.com
         Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
    */
    /* Text and/or Image Crawler Script ©2009 John Davenport Scheuer
       as first seen in http://www.dynamicdrive.com/forums/
       username: jscheuer1 - This Notice Must Remain for Legal Use
       */
    ///////////////// DO NOT EDIT /////////////////
    function marqueeInit(config){
     if(!document.createElement) return;
     marqueeInit.ar.push(config);
     marqueeInit.run(config.uniqueid);
    }
    (function(){
     if(!document.createElement) return;
     marqueeInit.ar = [];
     document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
     '#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
     var c = 0, tTRE = [new RegExp('^\\s*$'), new RegExp('^\\s*'), new RegExp('\\s*$')],
     req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
      style: { //default style object for marquee containers without configured style
    	'margin': '0 auto'
      },
      direction: 'left',
      inc: 5, //default speed - pixel increment for each iteration of a marquee's movement
      mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
     }, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
     
     /*@cc_on @*/
     /*@if(@_jscript_version >= 5)
     ie = true;
     try{document.documentMode = 2000}catch(e){};
     iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
     if(iever < 6)
      oldie = 1;
     if(iever < 5.5){
      Array.prototype.push = function(el){this[this.length] = el;};
      ie5 = true;
      dash = new RegExp('(-(.))');
      String.prototype.encamel = function(s, m){
       s = this;
       while((m = s.match(dash)))
        s = s.replace(m[1], m[2].toUpperCase());
       return s;
      };
     }
     @end @*/
     if(!ie5){
      dash = new RegExp('-(.)', 'g');
      function toHump(a, b){return b.toUpperCase();};
      String.prototype.encamel = function(){return this.replace(dash, toHump);};
     }
     if(ie && iever < 8){
      marqueeInit.table = [];
      window.attachEvent('onload', function(){
       marqueeInit.OK = true;
       for(var i = 0; i < marqueeInit.table.length; ++i)
       marqueeInit.run(marqueeInit.table[i]);
      });
     }
     
     function intable(el){
      while((el = el.parentNode))
       if(el.tagName && el.tagName.toLowerCase() === 'table')
        return true;
       return false;
     };
     marqueeInit.run = function(id){
       if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
        marqueeInit.table.push(id);
        return;
       }
       if(!document.getElementById(id))
        setTimeout(function(){marqueeInit.run(id);}, 300);
       else
        new Marq(c++, document.getElementById(id));
     }
     function trimTags(tag){
      var r = [], i = 0, e;
      while((e = tag.firstChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
       tag.removeChild(e);
      while((e = tag.lastChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
       tag.removeChild(e);
      if((e = tag.firstChild) && e.nodeType == 3)
       e.nodeValue = e.nodeValue.replace(tTRE[1], '');
      if((e = tag.lastChild) && e.nodeType == 3)
       e.nodeValue = e.nodeValue.replace(tTRE[2], '');
      while((e = tag.firstChild))
       r[i++] = tag.removeChild(e);
      return r;
     }
     function Marq(c, tag){
      var p, u, s, a, ims, ic, i, marqContent, cObj = this;
      this.mq = marqueeInit.ar[c];
      for (p in defaultconfig)
       if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
        this.mq[p] = defaultconfig[p];
      this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
      if(!tag.getElementsByTagName('img')[0])
       this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
      else
       this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
      u = this.mq.style.width.split(/\d/);
      this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
      marqContent = trimTags(tag);
      tag.className = tag.id = '';
      tag.removeAttribute('class', 0);
      tag.removeAttribute('id', 0);
      if(ie)
       tag.removeAttribute('className', 0);
      tag.appendChild(tag.cloneNode(false));
      tag.className = ['marquee', c].join('');
      tag.style.overflow = 'hidden';
      this.c = tag.firstChild;
      this.c.appendChild(this.c.cloneNode(false));
      this.c.style.visibility = 'hidden';
      a = [[req1, this.c.style], [this.mq.style, this.c.style]];
      for (i = a.length - 1; i > -1; --i)
       for (p in a[i][0])
        if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
         a[i][1][p.encamel()] = a[i][0][p];
      this.m = this.c.firstChild;
      if(this.mq.mouse == 'pause'){
       this.c.onmouseout = function(){cObj.mq.stopped = false;};
      }
      this.m.style.position = 'absolute';
      this.m.style.left = '-10000000px';
      this.m.style.whiteSpace = 'nowrap';
      if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
      if(!this.mq.noAddedSpace)
       this.m.appendChild(document.createTextNode('\xa0'));
      for(i = 0; marqContent[i]; ++i)
       this.m.appendChild(marqContent[i]);
      if(ie5) this.m = this.c.firstChild;
      ims = this.m.getElementsByTagName('img');
      if(ims.length){
       for(ic = 0, i = 0; i < ims.length; ++i){
        ims[i].style.display = 'inline';
        ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
        if(typeof ims[i].complete == 'boolean' && ims[i].complete && !window.opera)
         ic++;
        else {
         ims[i].onload = function(){
           if(++ic == ims.length)
            cObj.setup();
          };
        }
         if(ic == ims.length)
          this.setup();
       }
      }
       else this.setup()
     }
      Marq.prototype.setup = function(){
      if(this.mq.setup) return;
      this.mq.setup = this;
      var s, cObj = this;
      if(this.c.style.height === 'auto')
       this.c.style.height = this.m.offsetHeight + 4 + 'px';
      this.c.appendChild(this.m.cloneNode(true));
      this.m = [this.m, this.m.nextSibling];
      if(this.mq.mouse == 'cursor driven'){
       this.r = this.mq.neutral || 16;
       this.sinc = this.mq.inc;
       this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
       if(this.mq.moveatleast){
        this.mq.inc = this.mq.moveatleast;
        if(this.mq.savedirection){
         if(this.mq.savedirection == 'reverse'){
          this.c.onmouseout = function(e){
           if(cObj.contains(e)) return;
           cObj.mq.inc = cObj.mq.moveatleast;
           cObj.mq.direction = cObj.mq.direction == 'right'? 'left' : 'right';};     
         } else {
          this.mq.savedirection = this.mq.direction;
          this.c.onmouseout = function(e){
           if(cObj.contains(e)) return;
           cObj.mq.inc = cObj.mq.moveatleast;
           cObj.mq.direction = cObj.mq.savedirection;};     
        }
        } else
         this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
       }
       else
        this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
      }
      this.w = this.m[0].offsetWidth;
      this.m[0].style.left = 0;
      this.c.id = 'marq_kill_marg_bord';
      this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
      this.c.id = '';
      this.c.removeAttribute('id', 0);
      this.m[1].style.left = this.w + 'px';
      s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
      while(this.c.offsetWidth > this.w - s)
       this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
      this.c.style.visibility = 'visible';
      this.runit();
      }
      
     Marq.prototype.slowdeath = function(){
      var cObj = this;
      if(this.mq.inc){
       this.mq.inc -= 1;
       this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
      }
     }
     Marq.prototype.runit = function(){
      var cObj = this, d = this.mq.direction == 'right'? 1 : -1;
      if(this.mq.stopped || this.mq.stopMarquee){
       setTimeout(function(){cObj.runit();}, 300);
       return;
      }
      if(this.mq.mouse != 'cursor driven')
       this.mq.inc = Math.max(1, this.mq.inc);
      if(d * parseInt(this.m[0].style.left) >= this.w)
       this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
      if(d * parseInt(this.m[1].style.left) >= this.w)
       this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
      this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
      this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
      setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
     }
     Marq.prototype.directspeed = function(e){
      e = e || window.event;
      if(this.timer) clearTimeout(this.timer);
      var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX == 'number'?
       e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
      lb = (w - this.r) / 2, rb = (w + this.r) / 2;
      while((c = c.offsetParent)) mp -= c.offsetLeft;
      this.mq.direction = mp > rb? 'left' : 'right';
      this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
     }
     Marq.prototype.contains = function(e){
      if(e && e.relatedTarget){var c = e.relatedTarget; if(c == this.c) return true;
       while ((c = c.parentNode)) if(c == this.c) return true;}
      return false;
     }
     function resize(){
      for(var s, m, i = 0; i < marqueeInit.ar.length; ++i){
       if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
        m = marqueeInit.ar[i].setup;
        s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
        m.c.style.width = m.mq.style.width;
        m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
        while(m.c.offsetWidth > m.w - s)
         m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
       }
      }
     }
     if (window.addEventListener)
      window.addEventListener('resize', resize, false);
     else if (window.attachEvent)
      window.attachEvent('onresize', resize);
    })();
    </script>
    </head>
    <body>
    <div class="marquee" id="mycrawler2" align="center">
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/Photo1_jpg.jpg" alt="EODCM TREISCH RECEIVES ARMY COMMENDATION MEDAL" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo2_jpg.jpg" alt="EO2 OSTRANDER RECEIVES NAVY ACHIEVEMENT MEDAL" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo3_jpg.jpg" alt="EOD1 CHIME AWARDED MTS" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo4_jpg.jpg" alt="EODCS SCHRACK RECEIVES ARMY COMMENDATION MEDAL" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo5_jpg.jpg" alt="MR. STEVEN JOYCE AWARDED JCOY AWARD" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo6_jpg.jpg" alt="MS. SUE PIKE AWARDED SCOY AWARD" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo7_jpg.jpg" alt="EOD1 THIBEAULT MASTER EOD PINNING" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo8_jpg.jpg" alt="LT CRAIG RECEIVES NAVY COMMENDATION MEDAL" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo9_jpg.jpg" alt="CM2 NORTON RECEIVES NAVY APPRECIATION MEDAL" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo10_jpg.jpg" alt="EOD1 COTE RECEIVES NAVY ACHIEVEMENT MEDAL" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo11_jpg.jpg" alt="EOD1 COTE AWARDED SSOQ" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo12_jpg.jpg" alt="EODC ROTHERHAM AWARDED SIOQ" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo13_jpg.jpg" alt="EOD1 SHEARMAN AWARDED JIOQ" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo14_jpg.jpg" alt="CWO3 OLIVERA APPOINTMENT TO LIEUTENANT" />
    <img src="https://www.portal.navy.mil/necc/eod/groupone/eodteuone/Images1/Command%20Photos/_t/photo15_jpg.jpg" alt="PR1 MALDONADO REENLISTMENT" />
    </div>
    <script type="text/javascript">
    marqueeInit({
    	uniqueid: 'mycrawler2',
    	style: {
    		'padding': '0px',
    		'width': '650px',
    		'height': '160px'
    	},
    	inc: 1, //speed - pixel increment for each iteration of this marquee's movement
    	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    	moveatleast: 1,
    	neutral: 150,
    	savedirection: true
    });
    </script>
    </body>
    </html>

    Thursday, May 24, 2012 9:09 PM