Help with Text and Image Crawler v1.5

[Danger]

1) Script Title: Text and Image Crawler v1.5


2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

3) Describe problem: I am using the Image scroller within SharePoint 2007, it works perfectly except one issue, when you first go to the page, the screen width will spread out for a brief second, then it goes back to normal. Also when you edit the page, it will do the same thing but stay spread out until you exit page edit. I am using the script in a CEWP which may have something to do with it. I absolutely love the script, John did a great job! If you could help me figure out why its doing it, I would greatly appreciate it!

Thank you,

Scott

[jscheuer1]

That's supposed to be prevented by giving the crawler division a class of "marquee":

<div class="marquee" id="mycrawler">
crawler contents go here
</div>

Works great on a regular HTML page. I have no idea why it wouldn't in your environment as I have no experience with SharePoint. But make sure you have that class name there. Without it, regardless of the environment, there will be exactly the problem you describe.

[Danger]

John,

I have that in it, here is a copy of your script exactly as I am using it in a CEWP. (I took out the scrolling message bar, sorry I could not get it to slow down).

<script type="text/javascript" src="/necc/eod/groupone/eodteuone/jQuery/crawler.js">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/


<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 8, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>



<div class="marquee" id="mycrawler2" align="center">
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/Photo1.jpg" alt="EODCM TREISCH RECEIVES ARMY COMMENDATION MEDAL" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo2.jpg" alt="EO2 OSTRANDER RECEIVES NAVY ACHIEVEMENT MEDAL" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo3.jpg" alt="EOD1 CHIME AWARDED MTS" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo4.jpg" alt="EODCS SCHRACK RECEIVES ARMY COMMENDATION MEDAL" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo5.jpg" alt="MR. STEVEN JOYCE AWARDED JCOY AWARD" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo6.jpg" alt="MS. SUE PIKE AWARDED SCOY AWARD" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo7.jpg" alt="EOD1 THIBEAULT MASTER EOD PINNING" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo8.jpg" alt="LT CRAIG RECEIVES NAVY COMMENDATION MEDAL" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo9.jpg" alt="CM2 NORTON RECEIVES NAVY APPRECIATION MEDAL" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo10.jpg" alt="EOD1 COTE RECEIVES NAVY ACHIEVEMENT MEDAL" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo11.jpg" alt="EOD1 COTE AWARDED SSOQ" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo12.jpg" alt="EODC ROTHERHAM AWARDED SIOQ" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo13.jpg" alt="EOD1 SHEARMAN AWARDED JIOQ" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo14.jpg" alt="CWO3 OLIVERA APPOINTMENT TO LIEUTENANT" />
<img src="/necc/eod/groupone/eodteuone/Images1/Command%20Photos/photo15.jpg" alt="PR1 MALDONADO REENLISTMENT" />
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '0px',
'width': '1000px',
'height': '224px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
</script>

Thank you, I appreciate any help you can provide, as I said I love your script and definately wnat to use it in our site.

Scott

[jscheuer1]

Get rid of:

<script type="text/javascript">
 marqueeInit({
 uniqueid: 'mycrawler',
 style: {
 'padding': '5px',
 'width': '450px',
 'background': 'lightyellow',
 'border': '1px solid #CC3300'
 },
 inc: 8, //speed - pixel increment for each iteration of this marquee's movement
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
 moveatleast: 4,
 neutral: 150,
 savedirection: true
 });

At best it's ignored because it's part of the external script tag. It could be causing problems though.

Also get rid of align="center" for the marquee div:

<div class="marquee" id="mycrawler2" align="center">

Use 'margin': '0 auto' in the style object instead (requires a standards invoking DOCTYPE as the very first thing on the page for IE and probably for other Microsoft products):

<script type="text/javascript">
 marqueeInit({
 uniqueid: 'mycrawler2',
 style: {
 'padding': '0px',
 'width': '1000px',
 'margin': '0 auto',
 'height': '224px'
 },
 inc: 5, //speed - pixel increment for each iteration of this marquee's movement
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
 moveatleast: 2,
 neutral: 150,
 savedirection: true,
 random: true
 });
 </script>

That actually could be the problem, as styling the marquee div at all will often cause problems. That's what the style object is for, to allow styling without disrupting the script.

Other than that, I'm not sure. If you can put it up as a live HTML page somewhere and demonstrate the problem, I can probably troubleshoot it further.

The browser (or whatever you're using to view this with) cache may need to be cleared and/or the page refreshed to see changes.

[Danger]

Hi John,

Sorry for all the problems, I did what you suggested, but the issue is still there? I'm using this in a SharePoint CEWP as a .txt file. I'm not sure why its doing it either... Unfortunately the site I have it on is a military site that requires a login so I would not be able to give you access. I do have a short video I made of the issue that I can send you.
I can try using SharePoint Designer and place the script into the Master Homepage, the only issue is that no one else would be able to update the pictures or script except me and by using a CEWP it makes it easy for other to update.

Thank you John, I appreciate all the help.

Scott

[jscheuer1]

I'm not asking for access to the site. I was asking you to put up a demo of the page as ordinary HTML somewhere to see if the problem is in the script and/or markup or in fact due to the Sharepoint presentation.

[Danger]

John,

I'm sorry, I'm not sure how to exactly do that with a SharePoint master page? Would you be able to point me in th eright direction?

Thank you,

Scott

[jscheuer1]

I'm not either. If it can be viewed in the browser, do that and use the browser's 'view source' to see what the HTML code is. Copy that and make it your page. Edit it so that the images, styles and scripts are accessible locally, upload it and the images, styles and scripts to a publicly accessible server.

You don't even have to do the whole page, just the crawler.

If not, attach the text and I'll see what I can do with it.