Scrolling Marquee

I'm using SP 2007 in both environments.

I found the following code that implements  a scrolling announcement.  I tried it on my vm and it works perfectly.

When I apply it to the client's dev site, the announcements don't show.  I don't get any errors and in fact, when I add alerts, they all pop up with all the necessary values.  So, the values are there but it's just not scrolling or even showing.   Any ideas?  Thanks!

<script type="text/javascript" src="../jquery-1.8.2.min.js" ></script>
<script type="text/javascript" src="../jquery.SPServices-0.7.2.min.js" ></script>
<script type="text/javascript" src="../jquery.marquee.min.js" ></script>
<link type="text/css" href="../jquery.marquee.min.css" rel="stylesheet" media="all" /> 
<style>
ul.marquee {
	border:none!important;
	background:#dbdbdb!important;
	width:770px!important;
	float:left!important;
	height:20px!important;
	}
ul.marquee li{
	font-family:arial!important;
	font-size:small!important;
	color:#4f5152!important;
	}
</style>
<script type="text/javascript"> 
  $(document).ready(function (){

   var emptyResults = "<li>There are no current alerts.</li>";
   var toShow = false;
var fieldsToRead= "<ViewFields>" +
                        "<FieldRef Name='Title' /><FieldRef Name='Body' />" +
                   "</ViewFields>";
                   
var query = "<Query>" +
                  "<OrderBy><FieldRef Name='Order' /></OrderBy>" +
    	      "<Where><Or><Geq><FieldRef Name='Expires' /><Value Type='DateTime'>" +
               "<Today /></Value></Geq><IsNull><FieldRef Name='Expires' />" +
               "</IsNull></Or>" +
              "</Where>" +
           "</Query>";         
                    
   $().SPServices({
	operation: "GetListItems",
    async: false,
    listName: "Announcements",
    CAMLViewFields:fieldsToRead,
    CAMLQuery: query,
    completefunc: function (xData, Status) {
	alert(xData.responseXML.xml);
    var itemCount = $(xData.responseXML).SPFilterNode('rs:data').attr("ItemCount");
		 if(itemCount > 0){
		  toShow = true;
		  alert("Show Marquee");
		   $(xData.responseXML).SPFilterNode('z:row').each(function() {

			var bodyHtml = "<li>" + $(this).attr("ows_Body");+ "</li>";
			$("#marquee").append(bodyHtml);
			
			alert(bodyHtml);
		   });
		  }
		 else { 
			$("#marquee").append(emptyResults);
		 }
	 }
   });
	if (toShow == true) {
	alert("#marquee.marquee");
  	 $("#marquee").marquee();
	}
	}); 
</script>

<ul id="marquee" class="marquee" />

Open in new window

LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
So you are getting bodyHtml?
Do you have a link to the site?
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Yes
Unfortunately, it's on an intranet
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
I'll create it on my sp 2010 site and see if I can duplicate the issue
0
Newly released Acronis True Image 2019

In announcing the release of the 15th Anniversary Edition of Acronis True Image 2019, the company revealed that its artificial intelligence-based anti-ransomware technology – stopped more than 200,000 ransomware attacks on 150,000 customers last year.

GaryCommented:
This is only a suggestion and I don't know if it will make a difference but change the async to true and move the marquee init code after
alert(bodyHtml);
0
Rainer JeschorCommented:
Hi,
there is a script error where you add the ows_body attribute. Please remove the ;
directly following - because now you generate non-valid HTML as the li end tag will be skipped.
HTH
Rainer
0
Rainer JeschorCommented:
Hi,
which marquee plugin did you use?

I tried it with this one:
http://www.givainc.com/labs/marquee_jquery_plugin.htm

and used the following code:
<script type="text/javascript" src="/Assets/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="/Assets/jquery.SPServices-0.7.2.min.js" ></script>
<script type="text/javascript" src="/Assets/jquery.marquee.min.js" ></script>
<link type="text/css" href="/Assets/jquery.marquee.min.css" rel="stylesheet" media="all" /> 
<style>
ul.marquee {
	border:none!important;
	background:#dbdbdb!important;
	width:770px!important;
	float:left!important;
	height:20px!important;
	}
ul.marquee li{
	font-family:arial!important;
	font-size:small!important;
	color:#4f5152!important;
	}
</style>
<script type="text/javascript"> 
  $(document).ready(function (){

   var emptyResults = "<li>There are no current alerts.</li>";
   var toShow = false;
var fieldsToRead= "<ViewFields>" +
                        "<FieldRef Name='Title' /><FieldRef Name='Body' />" +
                   "</ViewFields>";
                   
var query = "<Query>" +
                  "<OrderBy><FieldRef Name='Order' /></OrderBy>" +
    	      "<Where><Or><Geq><FieldRef Name='Expires' /><Value Type='DateTime'>" +
               "<Today /></Value></Geq><IsNull><FieldRef Name='Expires' />" +
               "</IsNull></Or>" +
              "</Where>" +
           "</Query>";         
                    
   $().SPServices({
	operation: "GetListItems",
    async: false,
    listName: "Announcements",
    CAMLViewFields:fieldsToRead,
    CAMLQuery: query,
    completefunc: function (xData, Status) {
	//alert(xData.responseXML.xml);
    var itemCount = $(xData.responseXML).SPFilterNode('rs:data').attr("ItemCount");
		 if(itemCount > 0){
		  toShow = true;
		  //alert("Show Marquee");
		   $(xData.responseXML).SPFilterNode('z:row').each(function() {

			var bodyHtml = "<li>" + $(this).attr("ows_Body") + "</li>";
			$("#marquee").append(bodyHtml);
			
			//alert(bodyHtml);
		   });
		  }
		 else { 
			$("#marquee").append(emptyResults);
		 }
	 }
   });
	if (toShow == true) {
	//alert("#marquee.marquee");
  	 $("#marquee").marquee();
	}
	}); 
</script>
<ul id="marquee" class="marquee" />
                                  

Open in new window


Can you ensure that all JS libraries have been loaded and that e.g. jQuery and SPServices are only referenced / loaded once on that page?
(e.g. using IEDevTools)

HTH
Rainer
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
I finally got it to work but as you can see from the image below, my announcement is not alligned horizontally with the announcement.  It is about half-inch higher than the announcement.  I tried margin-top to push it down but that did not work.  Any ideas.
marquee

Here's the code:
<span style="font-weight:bold;height:20px;font-size:small;font-family:arial;color:#000066;margin-left:18px;margin-top:9px!important">Announcements:</span><ul id="marquee" class="marquee" />

Open in new window

0
GaryCommented:
Probably because of you margin-top.
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
is it wrong?  I've tried different values.
0
GaryCommented:
Can you provide a live link to the page?
0
IsaacSharePoint Client Side DeveloperAuthor Commented:
Hi GaryC123,

I do not have a SP 2007 site so I recreated it on a SP 2010 site and I get a different problem.
There is a big gap between the words and the marquee.

http://isaac.issharepoint.com/examples/WebPartPages/scrolling.aspx

Any ideas?
0
Rainer JeschorCommented:
Hi,

OK, the gap on top comes from the class UL.marquee LI from within the jquery.marquee.min.css which sets a padding-top: 3px

Then the gap between your span containing "Announcments" and the marquee is due to the CSS property "float: right" of the class "UL.marquee" inside your page. As the container div uses 100% width, the UL just 770px and due to the float settings, the marquee takes 770px from the right leaving the gap to the left. Just resize the window and you can see that its getting closer and closer to your span.

You could easily play around with the stylings using IE10 and the IEDevToolbar (F12) - where you can overwrite and even disable/reconfigure single styles or complete classes.

HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.