none
use marquee in announcement list in sharepoint 2010

    Question

  • Hi ,

    i need to create a list called news and alerts. so i select announcement list for it. i want to use scroll the contents of my announcement. so we can use marquee for that.

    but i need proper steps and your guidance because i m beginner for the css and all. and one more thing how can i put my list within the content editor.

    Please reply ASAP, because its my high priority requirement.

    Thanks in Advance...

    Wednesday, December 04, 2013 7:58 AM

Answers

  • There are multiple ways of doing it, like using content query webpart, jquery  and rest service. Following links should help you in acheiving what you want.

    http://www.sharepointbinder.com/1/post/2012/02/scrolling-marquees.html

    http://spmarquee.codeplex.com/

    http://www.kwizcom.com/sharepoint-add-ons/list-marquee-web-part/download/ - Free ware check out if this suits your requirement

    Hope this helps


    Raghavendra Shanbhag | Blog: www.SharePointColumn.com
    Please click "Propose As Answer " if a post solves your problem or "Vote As Helpful" if a post has been useful to you.
    Disclaimer: This posting is provided "AS IS" with no warranties.

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 9:47 AM
    Wednesday, December 04, 2013 8:49 AM
  • Hello,

    Use belwo jquery for marqee. Follow below steps:

    1. Adda content editor webpart on your page and upload jquery ref's in any library of your site.

    2. Copy and paste below jquery in CEWP and change the jquery ref path in script. Also change the list and column name as per your configuration.

    http://sharepoint.stackexchange.com/questions/23775/list-driven-scrolling-marquee

    https://www.nothingbutsharepoint.com/sites/eusp/pages/sharepoint-content-sliders-cousin-the-marquee.aspx

    Let us know your result


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 9:47 AM
    Wednesday, December 04, 2013 9:03 AM
    Moderator
  • Hello,

    You really do not need to use visual studio here, even designer is not required either. What you only need to do, open notepad and copy /paste the script and modify it. Later you can copy/paste whole script in CEWP html source.

    Here is link to download SPService:

    http://spservices.codeplex.com/


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 10:17 AM
    Wednesday, December 04, 2013 9:58 AM
    Moderator
  • Here is the full script:

    <script src="/sites/FormSolution/Style%20Library/JavaScript/jquery-1.4.2.min.js" type="text/javascript"></script>
    
    <script src="/sites/FormSolution/Style%20Library/JavaScript/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
    
    <script src="/sites/FormSolution/Style%20Library/JavaScript/jquery.marquee.min.js" type="text/javascript"></script>
    
    <link href="/sites/FormSolution/Style%20Library/JavaScript/jquery.marquee.min.css" rel="stylesheet" media = "all" type="text/css"/>
    
    <script type="text/javascript">
    
    $(document).ready(function (){
      var emptyResults = "<li>There are no current alerts.</li>";
      var toShow = false;
       $().SPServices({
       operation: "GetListItems",
       async: false,
       listName: "TestAnnounce",
       CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Body' /></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_Title");+ "</li>";
          $("#marquee").append(bodyHtml);
         });
        }
       else {
        $("#marquee").append(emptyResults);
       }
      }
      });
    if (toShow == true) {
      $("#marquee").marquee();
      }
    });</script><ul class="marquee" id="marquee"/>

    Download "jquery.marquee.min.js" and "jquery.marquee.min.css" from below link

    http://www.jqueryscript.net/animation/Text-Scrolling-Plugin-for-jQuery-Marquee.html

    Then download "jquery-1.4.2.min.js" from here and you already have link to download "jquery.SPServices-0.7.2.min.js".

    Now upload all four files in site style library and change the URL in script. Also you need to change your Announcement list name (i have used "TestAnnounce" name in this script)


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 12:53 PM
    Wednesday, December 04, 2013 11:37 AM
    Moderator
  • Hello Vivek,

    Which "jquery.marquee.min.js" file you are using? I seen this problem with marqee.min file and if you search on bing, you will get multiple version of this file. Better download updated JS from below location and update then it should work. I have tested in my site and working good.

    http://pirateeric.sharepointspace.com/Resources/jquery.marquee.min.js


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    Thursday, December 05, 2013 5:55 AM
    Moderator
  • >because box size is so small so how to increase

    You need to update "jquery.marquee.min.css" file to increase width. By default it is 500px so make it more bigger in CSS and update in site.

    >remove duplicate entry from it.

    Because you ahev modified your query many times that's why duplicate entries are added in script. When you actually goes down you will see lots of jquery stuff after closing final </script> tag. So change it to "<ul class="marquee" id="marquee"/>" only and remove others.

    >its showing only title field content

    Change this line

    var bodyHtml = "<li>" + $(this).attr("ows_Title");+ "</li>";

    To

    var bodyHtml = "<li>" + $(this).attr("ows_Body");+ "</li>";

    You can also put any column instead of Body in above line. Should start with ows_columnname.

    Let me know still have any question


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Thursday, December 05, 2013 10:54 AM
    Thursday, December 05, 2013 9:29 AM
    Moderator

All replies

  • There are multiple ways of doing it, like using content query webpart, jquery  and rest service. Following links should help you in acheiving what you want.

    http://www.sharepointbinder.com/1/post/2012/02/scrolling-marquees.html

    http://spmarquee.codeplex.com/

    http://www.kwizcom.com/sharepoint-add-ons/list-marquee-web-part/download/ - Free ware check out if this suits your requirement

    Hope this helps


    Raghavendra Shanbhag | Blog: www.SharePointColumn.com
    Please click "Propose As Answer " if a post solves your problem or "Vote As Helpful" if a post has been useful to you.
    Disclaimer: This posting is provided "AS IS" with no warranties.

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 9:47 AM
    Wednesday, December 04, 2013 8:49 AM
  • Hello,

    Use belwo jquery for marqee. Follow below steps:

    1. Adda content editor webpart on your page and upload jquery ref's in any library of your site.

    2. Copy and paste below jquery in CEWP and change the jquery ref path in script. Also change the list and column name as per your configuration.

    http://sharepoint.stackexchange.com/questions/23775/list-driven-scrolling-marquee

    https://www.nothingbutsharepoint.com/sites/eusp/pages/sharepoint-content-sliders-cousin-the-marquee.aspx

    Let us know your result


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 9:47 AM
    Wednesday, December 04, 2013 9:03 AM
    Moderator
  • Hi Hemendra and Raghvendra

    Thanks for ur quick response.

    Let me know the limitation which i have.

    i dont have a access to write a code in visual studio and also i m not access any servive like spservice

    i can only do this using designer.

    so what exactly i can do for meet this requirement.

    and where and how to add these j query and all. dont be frustrate...i am new on this...:)

    Please give me a way according my limitations.

    thanks

     

    Wednesday, December 04, 2013 9:51 AM
  • Hello,

    You really do not need to use visual studio here, even designer is not required either. What you only need to do, open notepad and copy /paste the script and modify it. Later you can copy/paste whole script in CEWP html source.

    Here is link to download SPService:

    http://spservices.codeplex.com/


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 10:17 AM
    Wednesday, December 04, 2013 9:58 AM
    Moderator
  • Hi Hemendra,

    i have add your j query script in CEWP.

    <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" />

    but i am not getting anything. so what next to do..and where and how to change the reference path. 

    Thanks

    Wednesday, December 04, 2013 10:16 AM
  • Here is the full script:

    <script src="/sites/FormSolution/Style%20Library/JavaScript/jquery-1.4.2.min.js" type="text/javascript"></script>
    
    <script src="/sites/FormSolution/Style%20Library/JavaScript/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
    
    <script src="/sites/FormSolution/Style%20Library/JavaScript/jquery.marquee.min.js" type="text/javascript"></script>
    
    <link href="/sites/FormSolution/Style%20Library/JavaScript/jquery.marquee.min.css" rel="stylesheet" media = "all" type="text/css"/>
    
    <script type="text/javascript">
    
    $(document).ready(function (){
      var emptyResults = "<li>There are no current alerts.</li>";
      var toShow = false;
       $().SPServices({
       operation: "GetListItems",
       async: false,
       listName: "TestAnnounce",
       CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Body' /></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_Title");+ "</li>";
          $("#marquee").append(bodyHtml);
         });
        }
       else {
        $("#marquee").append(emptyResults);
       }
      }
      });
    if (toShow == true) {
      $("#marquee").marquee();
      }
    });</script><ul class="marquee" id="marquee"/>

    Download "jquery.marquee.min.js" and "jquery.marquee.min.css" from below link

    http://www.jqueryscript.net/animation/Text-Scrolling-Plugin-for-jQuery-Marquee.html

    Then download "jquery-1.4.2.min.js" from here and you already have link to download "jquery.SPServices-0.7.2.min.js".

    Now upload all four files in site style library and change the URL in script. Also you need to change your Announcement list name (i have used "TestAnnounce" name in this script)


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Wednesday, December 04, 2013 12:53 PM
    Wednesday, December 04, 2013 11:37 AM
    Moderator
  • Hi hemendra

    thanks for your patience 

    I have follow ur procedure completely and download and give the reference of this below scripts

    Site/Style%20Library/jquery.marquee.min.css
    Site/Style%20Library/jquery.marquee.min.js
    Site/Style%20Library/jquery.SPServices-0.7.2.min.js
    Site/Style%20Library/jquery-1.4.2.js

    and add the complete html script in CEWP. but when i save it . its showing only one box.

    i dont know where i missed something. i have doubt on css file. find below css which i used.

     ul.marquee{display:block;padding:0;margin:0;list-style:none;line-height:1;;overflow:hidden;width:500px;height:22px;background-color:#f2f2ff;border:1px solid #08084d;}ul.marquee li{;top:-999em;left:0;display:block;white-space:nowrap;font:14px Arial,Helvetica,sans-serif;padding:3px 5px;}

    please take a look on it.

    Thanks

    Wednesday, December 04, 2013 12:58 PM
  • Hello Vivek,

    Which "jquery.marquee.min.js" file you are using? I seen this problem with marqee.min file and if you search on bing, you will get multiple version of this file. Better download updated JS from below location and update then it should work. I have tested in my site and working good.

    http://pirateeric.sharepointspace.com/Resources/jquery.marquee.min.js


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    Thursday, December 05, 2013 5:55 AM
    Moderator
  • Hi Hemendra,

    Thanks for follow up.  its working fine.

    but i have couple of  questions, its showing only title field content and how to display body content. and second is its showing 1 entry in two times so why its showing in this manner and also how to expand the box .

    because box size is so small so how to increase and how to remove duplicate entry from it.

    Thanks a lot.. 

    Thursday, December 05, 2013 9:17 AM
  • >because box size is so small so how to increase

    You need to update "jquery.marquee.min.css" file to increase width. By default it is 500px so make it more bigger in CSS and update in site.

    >remove duplicate entry from it.

    Because you ahev modified your query many times that's why duplicate entries are added in script. When you actually goes down you will see lots of jquery stuff after closing final </script> tag. So change it to "<ul class="marquee" id="marquee"/>" only and remove others.

    >its showing only title field content

    Change this line

    var bodyHtml = "<li>" + $(this).attr("ows_Title");+ "</li>";

    To

    var bodyHtml = "<li>" + $(this).attr("ows_Body");+ "</li>";

    You can also put any column instead of Body in above line. Should start with ows_columnname.

    Let me know still have any question


    Hemendra:Yesterday is just a memory,Tomorrow we may never see
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    • Marked as answer by Vivek S Tomar Thursday, December 05, 2013 10:54 AM
    Thursday, December 05, 2013 9:29 AM
    Moderator
  • Hi Hemendra

    Thanks thanks a lot..

    all things working fine..if getting any error contact you..:)

    again thanks..

    Thursday, December 05, 2013 10:54 AM
  • Hi hemendra,

    all things are working fine but i want one thing that right now all contents scroll from top to bottom but i need bottom to top so how can i change the direction. i know that how to change but in jquery i dont know to change the direction . so please can u guide me accordingly.

    and also i couldnt find that where is speed of content in this script so please help.

    Thanks 

    Friday, December 06, 2013 6:07 AM