Isaac
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!
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" />
ASKER
Yes
Unfortunately, it's on an intranet
Unfortunately, it's on an intranet
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);
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
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:
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
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" />
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
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.
Here's the code:
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" />
Probably because of you margin-top.
ASKER
is it wrong? I've tried different values.
Can you provide a live link to the page?
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?
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Do you have a link to the site?