Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I had a friend ask about this and I wasn't sure so I thought I'd test your metal.

What would be the best route for applying a scrolling marquee to a page that is list driven? Perhaps the better question would be: What Jquery code syntax would enable a scrolling marquee using a list?

share|improve this question
    
givainc.com/labs/marquee_jquery_plugin.htm –  motoxer4533 Nov 21 '11 at 19:21
add comment

migrated from stackoverflow.com Nov 21 '11 at 19:36

This question came from our site for professional and enthusiast programmers.

3 Answers

up vote 6 down vote accepted

I would use SPServices to fetch the data and emit the desired markup needed to make the marquee work.

Edit: very easy with SPServices and the givainc plugin referenced in the question comments.

<script type="text/javascript"> 
  $(document).ready(function (){
   var emptyResults = "<li>There are no current announcements.</li>";
   var toShow = false;
   $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Announcements",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Body' /><FieldRef Name='Modified' /></ViewFields>",
    CAMLQuery: "<Query><OrderBy><FieldRef Name='Created' /></OrderBy>" +
               "<Where><Or><Geq><FieldRef Name='Expires' /><Value Type='DateTime'>" +
               "<Today /></Value></Geq><IsNull><FieldRef Name='Expires' /></IsNull></Or></Where></Query>",
    completefunc: function (xData, Status) {
     var itemCount = $(xData.responseXML).find("[nodeName='rs:data']").attr("ItemCount");
     if(itemCount > 0){
      toShow = true;
       $(xData.responseXML).find("[nodeName='z:row']").each(function() {
        var bodyHtml = "<li>" + $(this).attr("ows_Body");+ "</li>";
        $("#marquee").append(bodyHtml);
       });
      }
     else { 
        $("#marquee").append(emptyResults);
     }
     }
   });
    if (toShow == true) {
     $("#marquee").marquee();
    }
  }); 
</script>

<ul id="marquee" class="marquee" />
share|improve this answer
1  
i tried using your solution on Content Editor webpart, but no luck. Nothing is coming up. Do i need to have or configure anything else aprt from your script? Thanks for help. –  user9630 Jul 23 '12 at 14:02
add comment

Personally I would:

  1. Find a jQuery marquee plugin that you like

  2. Create webpart that uses a ListView that is populated with the List Data you care about in the structure that the plugin requires.

  3. Use your plugin

This method implies that you would use the standard Object Model in the code behind, but I am sure that you could replace step 2 with something that uses the Client Object Model if you prefer.

If you are looking for the exact code to do what you want SO isn't the place.

share|improve this answer
add comment

I am not advertising it as the best solution, but you can do that with a calculated column and a script. There's a live demo here:

http://pathtosharepoint.com/Lists/TasksVisualization/AllItems.aspx

Scrolling can be achieved directly with a html marquee tag, without the need for a library like jQuery. However, you might want to check browser compatibility before using it.

This technique is explained in several articles on my blog: http://blog.pathtosharepoint.com/category/the-html-calculated-column/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.