Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

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

Avatar of Gary
Gary
Flag of Ireland image

So you are getting bodyHtml?
Do you have a link to the site?
Avatar of Isaac

ASKER

Yes
Unfortunately, it's on an intranet
Avatar of Isaac

ASKER

I'll create it on my sp 2010 site and see if I can duplicate the issue
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);
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
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
Avatar of Isaac

ASKER

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.
User generated image

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

Probably because of you margin-top.
Avatar of Isaac

ASKER

is it wrong?  I've tried different values.
Can you provide a live link to the page?
Avatar of Isaac

ASKER

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?
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial