Scrolling Marquee

Isaac
Isaac used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014

Commented:
So you are getting bodyHtml?
Do you have a link to the site?
IsaacSharePoint Client Side Developer

Author

Commented:
Yes
Unfortunately, it's on an intranet
IsaacSharePoint Client Side Developer

Author

Commented:
I'll create it on my sp 2010 site and see if I can duplicate the issue
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Expert of the Year 2014
Top Expert 2014

Commented:
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);
Most Valuable Expert 2013
Awarded 2012

Commented:
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
Most Valuable Expert 2013
Awarded 2012

Commented:
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
IsaacSharePoint Client Side Developer

Author

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

Expert of the Year 2014
Top Expert 2014

Commented:
Probably because of you margin-top.
IsaacSharePoint Client Side Developer

Author

Commented:
is it wrong?  I've tried different values.
Expert of the Year 2014
Top Expert 2014

Commented:
Can you provide a live link to the page?
IsaacSharePoint Client Side Developer

Author

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?
Most Valuable Expert 2013
Awarded 2012
Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial