Adding a scrolling list of messages to SharePoint

 

Tested in SP2010, SP2013, Office 365 2013 and should work in SP2007.

I have not offered up a cool SharePoint trick for a while… so here's one that takes a list and turns it into a scrolling "marquee" list like this one:

Release B.2 of the CRM system has been released!

Bugs have been found in B.2, please revert to B.1!

The "Dealing with procrastination" meeting has been rescheduled

Get Started with Microsoft SharePoint Foundation!

This uses the <MARQUEE> tag that may not work in every browser. But according to this page it works in at least these browsers: Chrome 1+, Firefox 7+, Internet Explorer 2, Opera 6+ and Safari 1+.

The code to do this was copied from one of my older tricks "SharePoint: Convert a Links list to a Dropdown list" with only two updates: change the dropdown list to a MARQUEE and to delay load the code so it will also work in SharePoint 2013.

The example below uses an Announcements list, but should work with any list as long as the view displays the "Title (linked to item with edit menu)" column.

How to get the ID of the web part…

The web part's ID has a name something like WebPartWPQ3. To find it:

1. Use the browser's View, View Source or View Page Source option to display the HTML of the page
2. Search for a slash followed by the name of the web part:  "/Announcements"
3. Either read down from what you found looking for something like 'id="WebPartWPQ3"' (the number may be different)  Note: you are not looking for WebPartTitleWPQ3 or other similar names!
4. Copy everything inside of the quotes, including any extra spaces or periods! Note that 2010 will include the list's name and the list's description while 2007 will only have the list's name.
     summary="Announcements Use this list to track upcoming events, status updates or other team news."

Steps:

1. Create your Announcements list and add your announcements
2. Add the announcement list’s web part to the page
3. Find the name of the web part (see "How to get the ID of the web part" above)
4. Create a Notepad file:
   1. Copy and paste the JavaScript code from below
   2. Edit the JavaScript to change the line with var LinkList = document.getElementById("WebPartWPQ5") and change "WebPartWPQ5" to your web part name found in step 3 above
   3. Customize the <marquee> tag to set any desired options (see: http://msdn.microsoft.com/en-us/library/aa259539(v=VS.60).aspx)
5. Upload the Notepad file to a library ("Site Assets" is a good choice)
6. Right-click the newly uploaded file and select Copy Shortcut (to get the URL to the file)
7. Add a Content Editor Web Part (CEWP) to the page with the announcements web part, just under the announcements web part
8. Modify the CEWP and
   1. set its title to whatever you like ("Site News!") (or set its Chrome to none to hide the title)
   2. paste the URL you copied in step 6 into the Content List box
   3. Click OK
9. Save the page and test it!

Notes:

• You can customize the <marquee> tag by changing its attributes or wrap it other HTML such as a DIV with a border or background.
• <marquee> may not work in every browser, but will fall back to list a list of links if it is not supported.
• There are four lines that start with "MyMarquee.innerHTML", but only one of them is not commented out ("//"). You can uncomment any one of these:
  • text only
  • text with hyperlinks
  • text with hyperlinks that open in a new window
  • text with hyperlinks that open in a SP 2010 style dialog box

 

The Code:

<!-- the MARQUEE tag for the items -->
<!-- customize as needed! –>

<marquee id="TTN_marquee" direction="up" height=48 scrollamount="1"></marquee>


<script type="text/javascript">
// CEWP trick from techtrainingnotes.blogspot.com! 
// http://techtrainingnotes.blogspot.com/2013/05/adding-scrolling-list-of-messages-to.html

// Change the web part name here!!! 
var TTNLinkListName = "WebPartWPQ3";



function TTNgetSPversion()
{  // returns 12 for 2007, 14 for 2010 and 15 for 2013
  var SPversion = "12"; 
  try { SPversion = SP.ClientSchemaVersions.currentVersion.substring(0,2) } 
  catch (e) {}
  return SPversion;
}

function TTNinEditMode()
{
    var editmode="";
    // test for wiki page mode
    try { editmode = document.getElementById("_wikiPageMode").value } 
    catch (e) {}
    if (editmode=="")
    {
      // test for web part page mode
      try { editmode=document.getElementById("MSOSPWebPartManager_DisplayModeName").value } 
      catch (e) {}
    }
    if (editmode=="Edit" || editmode=="Design")
      return true;
    else
      return false;
}

function TTNlist2marquee()
{
  var TTNLinkList = document.getElementById(TTNLinkListName);
  var spVersion = TTNgetSPversion();
  var editmode = TTNinEditMode();

  // hide the list, but only if not in edit mode
  if (TTNLinkList)
  {

    // are we in edit mode?
    var displaymode = "";
    if ( !editmode )
    {
       displaymode = "none";
    }

    // hide the list web part (based on SP version)
    if ( spVersion = 12 ) 
    {
      // 2007 code here
      TTNLinkList.parentNode.parentNode.parentNode.style.display=displaymode;
    }
    else
    {
      // 2010 and 2013 code here
      TTNLinkList.style.display=displaymode;
    }  

    
    //Copy all of the links from the list to the MARQUEE
    var MyMarquee = document.getElementById("TTN_marquee");

    var links = TTNLinkList.getElementsByTagName("A"); // find all of the links
    for ( i=0; i<links.length; i++ ) 
    {
      if (links[i].onfocus)
      {
        if (links[i].onfocus.toString().indexOf("OnLink(this)") > -1)
          { 
            // text only version of the marquee (no links)
            //MyMarquee.innerHTML += links[i].innerHTML + "<br>"; 

            // version with hyperlinks
            MyMarquee.innerHTML += "<a href='" + links[i].href + "'>" + links[i].innerHTML + "</a><br><br>";

            // open the link in a new window
            //MyMarquee.innerHTML += "<a href='" + links[i].href + "' target='newwin'>" + links[i].innerHTML + "</a><br><br>";

            // open the link in a SP 2010 dialog box
            //MyMarquee.innerHTML += "<a href='JavaScript:var options=SP.UI.$create_DialogOptions();options.url=\"" + links[i].href + "&IsDlg=1\";options.height = 400;void(SP.UI.ModalDialog.showModalDialog(options))'>" + links[i].innerHTML + "</a><br><br>";

          }
      }
    }
  }
  else
  {
    alert("Marquee list named '" + TTNLinkListName + "' not found");
  }

}

try {
  // for 2010 and 2013
  ExecuteOrDelayUntilScriptLoaded( TTNlist2marquee, "sp.js" );
}
catch (e) {
  // for 2007
  _spBodyOnLoadFunctionNames.push('TTNlist2marquee');
}

</script>

.