Vertical Scrolling WebPart

15.07.2010 Updated the code for the file “VerticalScrollingWebPart.js” to try to fix the overflow issue in IE6.

24.06.2010 The code for the file “VerticalScrollingWebPart.js” is updated. I actually forgot to update it as i made some adjustments in the CEWP code… I hope the overflow issue is fixed with this update.

I got this request from Charlie:

…a solution that I can use as a dashboard web part to vertically scroll the most recent “top 10” items from a 2nd list?

Example: I need to be able to grab the most recently items marked as “Completed” or “Sold” from a list and be able to show 2-3 fields in the scroller.

Click here for a crude example – the scrolling is not so choppy – this is only a animated gif to give you a hint of how the solution works.

The scrolling action pauses when hovered with the mouse.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.4.2.min. Update the script “src” if you use another version.

The sourcecode for the file “VerticalScrollingWebPart.js” is provided below.

Add this code to a CEWP where you want the scrollable contents to appear:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/VerticalScrollingWebPart.js"></script>
<script type="text/javascript">
init_fillScrollableDiv({'listGuid':'A4B4E15A-C5B0-47BC-A08B-739CD48FE58A',
	'listBaseUrl':'/test/English',
	'listViewGuid':'5BD378F4-25D5-4880-9C5B-1667FE43978D',											
	'viewFields':['Title','MultiLine'],
	'viewFieldsStyle':['font-weight:bold','padding:0 0 0 5'],	
	'divID':'myScrollableDiv',
	'divHeight':'250px',
	'divWidth':'500px',	
	'speed':4,
	'linkBack':true});
</script>

Read here how to find the FieldInternalNames for your fields and the “listGuid” or “listViewGuid” for your list.

Parameters explained:

  • listGuid: GUID of the source-list
  • listBaseUrl: Relative URL to site/subsite. If root site use only two quotes representing a blank string – like this: “”.
  • listViewGuid: GUID of the view to use from the source-list – if left empty it uses the default view.
  • viewFields: Array of FieldInternalNames to use in the scrolling webpart.
  • viewFieldsStyle: Array of styles to match the array of FieldInternalNames above.
  • divID: The ID of the scrollable DIV. Can be anything as long as it is unique on the page.
  • divHeight: The hight of the scrollable area.
  • divWidth: The width of the scrollable area.
  • speed: A number representing the scroll speed.
  • linkBack: If set to true it adds a link to open the item clicked on.

The sourcecode for the file “VerticalScrollingWebPart.js”:

/* Pulls items from a list view and presents them as a Vertical Scrolling Web Part
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * https://spjsblog.com
 * Copyright (c) 2009-2010 Alexander Bautz (Licensed under the MIT X11 License)
 * v1.2
 * LastMod: 14.07.2010
 	- LastChange: 23.12.2014 - fixed a jQuery incompatibility issue for newer jQuery versions. Please note that the code is still old and not the best of quality.
 * ---------------------------------------------
 * Include reference to:
 *  jquery - http://jquery.com
 *	VerticalScrollingWebPart.js (this file)
 * ---------------------------------------------
*/

function init_fillScrollableDiv(obj){
	// Build the div
	var myDivBuffer = [];
	myDivBuffer.push("<div style='vertical-align:top;position:relative;overflow:hidden;cursor:default;height:"+obj.divHeight+";width:"+obj.divWidth+"'>");
	myDivBuffer.push("<div id='"+obj.divID+"' style='position:relative'></div>");
	myDivBuffer.push("</div>");
	myDivContainer=myDivBuffer.join('');	
	document.write(myDivContainer);
	$(document).ready(function(){
		fillScrollableDiv(obj)
	});
}

function fillScrollableDiv(info){
	wsBaseUrl = info.listBaseUrl + '/_vti_bin/';
	info.animBegin = 0;
	info.animPart = 0;
	// Query the list for items	
	var res = queryItemsByViewName(info.listGuid,info.listViewGuid,info.viewFields.concat('ID','FileDirRef'));
	if(res.count==-1)alert("An error occured - check the parameters \"listGuid\", \"listBaseUrl\" and \"listViewGuid\".");
	var finalBuffer = [];
	var path = '';
	$.each(res.items,function(i,item){
		var partBuffer = [];
		if(path==''){
			var pathRaw = item['FileDirRef'];
			path = "/"+pathRaw.substring(pathRaw.indexOf(';#')+2);
		}	
		$.each(info.viewFields,function(idx,fin){
			var style = '';
			var thisVal = (item[fin]==null)?'':item[fin];
			if(thisVal.indexOf(';#')>-1){
				thisVal = thisVal.substring(thisVal.indexOf(';#')+2);
			}			
			if(info.viewFieldsStyle[idx]!=undefined){
				style = " style='"+info.viewFieldsStyle[idx]+"'";
			}
			partBuffer.push("<tr><td"+style+">"+thisVal+"</td></tr>");	
		});		
		finalBuffer.push("<hr style='height:1px;color:black' />");
		if(info.linkBack){
			finalBuffer.push("<table title='Go to item' style='cursor:pointer' ");
			finalBuffer.push("onclick='javascript:location.href=\""+path+"/DispForm.aspx?ID="+item['ID']+"&Source="+location.href+"\"' ");
			finalBuffer.push("cellspacing='0' cellpadding='0'>"+partBuffer.join('')+"</table>");
		}else{
			finalBuffer.push("<table cellspacing='0' cellpadding='0'>"+partBuffer.join('')+"</table>");
		}	
	});
	var myContents = finalBuffer.join('');
	// Update the content in the scrollable div
	$("#"+info.divID).html(myContents)
		.mouseenter(function(){			
			var now = new Date();
			info.animPart += (now-info.animBegin);		
			$(this).stop();
		})
		.mouseleave(function(){		
			$(this).stop();
			var partScr = parseInt($(this).css('top'));
			scrollMyDiv(partScr,info);
		});
	// Call scroll function
	scrollMyDiv('',info);
}

function scrollMyDiv(scroll,info){
	info.animBegin = new Date();
	var myDiv = $("#"+info.divID);
	var ch = myDiv.height();
	var chpHeight = myDiv.parent().height();	
	if(scroll==''){
		var scroll=chpHeight;
	}
	var duration = (ch*(info.speed*10))-info.animPart;
	myDiv.css({'top':scroll}).animate({"top":-ch},duration,'linear',function(){
		info.animPart = 0;
		scrollMyDiv('',info);
	});
}

// http://www.steveworkman.com/html5-2/javascript/2011/improving-javascript-xml-node-finding-performance-by-2000/
$.fn.filterNode = function(name) {
	return this.find('*').filter(function() {
		return this.nodeName === name;
	});
};

// Function to pull items from view
function queryItemsByViewName(listName, viewName, viewFields, pagingInfo){
	var content = buildQueryContentByViewName(listName, viewName, viewFields, pagingInfo);
	var result = {count:-1, nextPagingInfo:'', items:[]};
	wrapSoapRequest(wsBaseUrl + 'lists.asmx', 'http://schemas.microsoft.com/sharepoint/soap/GetListItems', content, function(data){
		result.count = parseInt($(data).filterNode("rs:data").attr('ItemCount'),10);
		result.nextPagingInfo = $(data).filterNode("rs:data").attr('ListItemCollectionPositionNext');
		$(data).filterNode('z:row').each(function(idx, itemData){
			var fieldValObj = {}
			$.each(viewFields,function(i,field){
				var value = $(itemData).attr('ows_' + field);
				if(value == undefined) value = null;
				fieldValObj[field]=value;
			});	
			result.items.push(fieldValObj);		
		});
	});
	return result;
}

function buildQueryContentByViewName(listName, viewName, viewFields, pagingInfo){
	var result = [];
	result.push('<GetListItems xmlns="http://schemas.microsoft.com/sharepoint/soap/">');
	result.push('<listName>' + listName + '</listName>');
	result.push('<viewName>' + viewName + '</viewName>');
	if(viewFields != null && viewFields.length > 0){
		result.push('<viewFields><ViewFields xmlns="">');
		$.each(viewFields, function(idx, field){
			result.push('<FieldRef Name="' + field + '"/>');
		});
		result.push('</ViewFields></viewFields>');
	}
	result.push('<queryOptions><QueryOptions xmlns=""><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns>');
	if(pagingInfo != undefined && pagingInfo != null && pagingInfo != '')
		result.push('<Paging ListItemCollectionPositionNext="' + pagingInfo.replace(/&/g, '&') + '" />');
	result.push('</QueryOptions></queryOptions>');
	result.push('</GetListItems>');
	return result.join('');
}

function wrapSoapRequest(webserviceUrl,requestHeader,soapBody,successFunc){
	var xmlWrap = [];
		xmlWrap.push("<?xml version='1.0' encoding='utf-8'?>");
		xmlWrap.push("<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>");
		xmlWrap.push("<soap:Body>");
		xmlWrap.push(soapBody);
		xmlWrap.push("</soap:Body>");
		xmlWrap.push("</soap:Envelope>");
		xmlWrap = xmlWrap.join('');
	$.ajax({
		async:false,
		type:"POST",
		url:webserviceUrl,
		contentType:"text/xml; charset=utf-8",
		processData:false,
		data:xmlWrap,
		dataType:"xml",
		beforeSend:function(xhr){
			xhr.setRequestHeader('SOAPAction',requestHeader);
		},
		success:successFunc
	});
}

Save as “VerticalScrollingWebPart.js” – mind the file extension – and upload to the scriplibrary as shown above.

Ask if anything is unclear!
Alexander

117 Comments on “Vertical Scrolling WebPart”

  1. Hi Alexander:
    This is really cool. The scrolling text is exceeding the parameters of the CEWP though. Is there a way to keep it within a CEWP border?

    Charlie Epes
    Buffalo, NY

  2. I got the same issue with the overflow. In edit mode is scrolls between the CEWP. Out of edit mode it overflows. This gives me an idea. I have been working on creating a banner type display, no scrolling. This script is very smooth no jumping or bouncing which is what I am looking for in my banner. I would like to just have it display at top of page, no scroll. Going ot try disable scroll.

    thanks

    1. This is a bit strange. I have tested it in IE6, IE7, IE8 and in Firefox 3.6.3, and it works as expected here.

      Could you test it in Firefox?

      Alexander

    2. Hi Alexander:
      Mine is still doing the same drifting outside the CEWP borders. I reinstalled it on another page but no success.

      Charlie Epes

    4. Hi Alexander – am using IE6 (IE6.0.2900.2180) and have the same behaviour as Larry and Charlie. Some other info – There is no noticable change in the appearance if different values are put in the divHeight or divWidth, and even if you remove the line “‘divID’:’myScrollableDiv’,” from the CEWP, then there is again no change in the appearance / behaviour.

      Cheers

      Jim

    5. Hi Jim,
      That clarified it! – the code is updated – see comment in the top of the post. Please test it and report back.

      Alexander

  6. Hi Alexander:
    Another great feature!!

    I just noticed that when I drill down to the List item from the scrolling webpart, and then I close the item, the view goes back to the scrolling web part, not to the List itself. Very nice!

    Charlie

  7. Hi,
    Thanks for a great post.
    I still get the overflow issue on IE Version:7.0.5730.13.
    It works fine on firefox for me.
    any inputs. thanks

    1. Hi,
      Please verify that you have the newest version if the code (v1.1).

      If so, are there any other scripts on that page? – does the solution work in another page?

      Alexander

  9. If I use a URL field, I get “https://sp.company.com/site/link1.aspx, this is the text in the url”. Is there a way to get just the link text, or a URL that can be clicked instead of going to the list item? Or an option to choose?

    Otherwise works great! Many thanks…

  10. Alexander,

    I am having the same issue as “abc123”. It looks and works perfectly in firefox, but I have the overflow issue on IE6.

    I am pretty sure I am using the newset version of the code, as I downloaded it from the above link today.

    Do you know ho to fix this issue? I really like this scrolling announcement – and it will work perfect for our site – however, we use IE6 at my company at this time.

    I am looking forward to your response.

    – Rex

  11. Alexander,

    Just wanted to let you know what version of IE6 we are running here (6.0.2900.5512).

    I am really hoping to fix this overflow issue to where it is contained in the webpart zone very quickly, if possible.

    Thank you very much for your assistance.

    – Rex

    1. Hi,
      Do you have the same behavior as “abc123” using it in a publishing site?

      I do not have access to publishing site and cannot give you a fix without being able so “see” the problem…

      Alexander

  12. Alexander,

    I am fairly new to SP – so I am unsure if the site I am designing is a Publishing Site or not. Our SharePoint Admin is at a different site, and he setup the base site for me and gave me full control over the site for me to design. Is there a simple way for me to see if it is a Publishing site or not?

    I took some screenshots that I can email you showing what it is currently doing, if that may help.

    My CEWP has the chrome set to ‘Title & Border’. The announcement is scrolling just fine – however when it gets to the top of the CEWP is continues to scroll over the Title and the rest of the page, then it starts back over underneath the CEWP and scrolls over the bottom border then back thru the CEWP it is placed in – and back over the top of the Title – covering up the Title text and other content on the page, including the navigation bar at the top of the page.

    Please let me know where I should email the screenshots if you would like to see them.

    Thank you for your help. We really like this scrolling announcement, and are hoping we can get this fixed to be able to use it.

    1. Email me the screenshots and i can try to find what’s causing this behavior.

      I have tested it in IE 6 without problems, and maybe the screenshots can give me a some information to help understand what’s wrong.

      Alexander

  16. Hey Alexander,

    First off thanks for the tutorial. Just having a few issues with jquery throwing exceptions.

    Below isthe code i put into the CEWP. My Javascript document list is at the root of my site and the List im trying to read is stored in a directory called Lists.

    Can you see what im doing wrong?

    init_fillScrollableDiv({‘listGuid’:’9571B549-7929-4303-9BF9-E19ED516BE0D’,
    ‘listBaseUrl’:u002fListsu002fDailyu002520Bulletin’,
    ‘listViewGuid’:D304EA31-AEAB-4C3B-A005-4EB05D9997DA’,
    ‘viewFields’:[‘Title’],
    ‘viewFieldsStyle’:[‘font-weight:bold’,’padding:0 0 0 5′],
    ‘divID’:’myScrollableDiv’,
    ‘divHeight’:’250px’,
    ‘divWidth’:’500px’,
    ‘speed’:4,
    ‘linkBack’:true});

    Thanks in advance
    Courtney

    1. Errors are now fixed, however im still not seeing anything display. Does the div need to be placed prior to the above code? or does it get added programatically?

      Any help would be greatly appriciated

      Thanks
      Courtney.

  17. Scratch that, errors were being hidden. Im now hitting this error

    alert(“An error occured – check the parameters “listGuid”, “listBaseUrl” and “listViewGuid”.”);

    However i have stepped though all of this and they are all getting passed the correct values. So what cause cause this error if it not the base vars passed in
    ?

    Here is my new CEWP code.

    init_fillScrollableDiv({‘listGuid’:’FA9C7FA9-0FA5-4638-AABB-A9F1879DF975′,
    ‘listBaseUrl’:’/Lists/test’,
    ‘listViewGuid’:’2C02B134-2B87-40F5-9302-BD3F6AF2CC8C’,
    ‘viewFields’:[‘Title’],
    ‘viewFieldsStyle’:[‘font-weight:bold’,’padding:0 0 0 5′],
    ‘divID’:’myScrollableDiv’,
    ‘divHeight’:’100px’,
    ‘divWidth’:’300px’,
    ‘speed’:4,
    ‘linkBack’:true});

    1. Hi,
      Glad you figured it out. For other readers, the error was the “listBaseUrl”. It is just “” if the site is not in a managed path.

      Alexander

  19. Many thanks for this posting!! Is there a problem or something I need to be aware of with other scripts running on the page? When I tested it on a “blank” page (with no other scripts), it works perfectly. When I incorporated into a page with other scripts, it seems that all scripts have stopped running. Thoughts?

    Thanks again for the posting!

  20. Dude, your instructions worked perfect.

    I got it going on my Blog site to display the 5 latest Posts.

    Had to change VerticalScrollingWebPart.js Line 59 from DispForm.ASPX to Post.ASPX and it worked a treat.

    Thanks a bunch 😉

  21. I am always hacking your code. For this one i am using it as an outage notice. I was trying to display this in several SP sites and a webpage, not hosted on SP. During testing it displayed on each page with no hitches. when I rolled out the webpage and open it with it’s absolute URL I get the error from line 36. The only thing I can think of is the web page is in a frame set hosted on another box. therefore when looking for the list under the framset it cant find it. I am still trying to figure it out, but if you have any suggestions it would help. would make it much easier to manage the notice from one place.

  22. Thanks for sharing this.

    I got it working. Instructions are great. I do have a question.

    I have 3 columns I am displaying from a list. Can I display the columns horizontially instead of vertically? And remove the sperating lines that scroll?

    Also can a background image be added?

    1. Hi,
      It is possible, but will require the code to be altered.

      You must look at the code where the HTML is constructed and modify it according to your needs.

      Alexander

  23. Hi Alex, I love your site. Good work.

    I’m actually new to this. I would greatly appreciate your help in figuring out how to do this for a vertical scrolling headlines or announcements in Sharepoint. I tried to read other post you put up but its still not to clear about where to place what.

    My simple goal is to Add a Web Part and Create Content Editor Web Part. Within this I would like to post my latest announcements in a Vertical Scrolling format. I would just like a step by step tutorial which explains what you did.

    Thank you!

  24. Alexander,

    I was able to apply a background image and just kept the text in a vertical manner so it scrolls to the left of the image. I also found the horizontal line and changed that.

    I am lost on how/where to change text style. I see the viewFieldsStyle but cant figure how to apply font size or color.

    2. Hi,
      You will have to insert alerts in the code or use some tool to inspect the code to be able to locate the exact spot. As your code is now modified i cannot point it out exactly. If you get the style to apply to the first column i will guess that you are very close…

      Alexander

  25. Need a little help. This is exactly what I was looking for. I configured it and it looks great. The only problem is that when I sign out and try to navigate to the page when the web part lives, I get the following message from webpage.
    “An error ocurred – check the parameters “listGuid”, “listBASEUrl” and “listViewGuid.”

    When I click OK, the web part is empty. If I log back in, everything is fine. Thanks for the help.

  26. Great! That did the trick. I appreciate the fast response. Now my next question. I am trying to see if I can get this to work with other items, such as press releases. I am able to get the list to scroll, but clicking on the item will not take me to the press release page. Can this work with published pages? Thanks again.

    1. Hi,
      Look at line 59. The link is constructed there. I do not have access to a site with the publishing features enable and cannot help you with this, sorry.

      Alexander

  28. I think I figured it out. The view I was using (articles from last week) had no content so it presented an error. When I removed the view guid it was fine and used the entire list. Any idea on how to change the code to look at the view first and if it is empty use the full list? Thanks again for the nice code.

  29. Alexander,

    Great work! I love this feature; I am revamping a public-facing portal for a client and they wanted the announcements to scroll like this. The previous feature was just a text file in a marquee tag, which would have been an admin nightmare for them once I complete the project. The list-based scroll was the perfect solution!

    I had a similar problem to Mike’s, as I received the same error on the public-facing portal but not the author portal. I commented out line 155 as you suggested and it fixed the problem for me. I also change the link back to false, but I don’t think that would make a difference either way.

    Thanks for the code, and please continue sharing your knowledge. Your site is awesome!!

    1. Alexander,

      As it turns out, it seems that the link back option does cause the error on the public portal, but I don’t need it so it’s not an issue for me. However, I can’t get the web part to render at all on the public portal using Firefox; any ideas why that might be?

  31. I have implemented this and it works great. Except the large white space before the first hr starts and after it scrolls through the list of 5 items. I can’t find where that white space is coming from? Please help, basically it looks like this:

    Item 1
    _________

    Item 2
    _________

    Item 1
    _________

    Item 2

    _________

    1. My comments didn’t display as it was typed. There is a gap between the first Item 2 and the second Item 1 that I want to close completely so it’s a smooth scroll without gaps.

  32. can this be modified to be placed on a non SP page, and still display the data from the list? I have been able to make it work if the page is in the same domain. but I would like to display an outage notice on differnt platforms, but cant seem to get this to display on a differnt server.

    2. Thanks Alexander. I refeused to take no as an answer. I was able to get this to work on an HTML page(non SP). the catch is the page has to reside on the domain. Not the same site, but the same domain. Once I removed it off the domain it failed to work. I started to research this some. I had a similar issue with Christophe’s Cross site list view script. He had mentioned something about javascript and its issues with cross domain.

      Just wanted to let you know I got it to work, sort of. If you have any ideas where I can figure out the cross domain stuff please share. Other wise have a great day.

    1. Hi,
      Due to multiple requests for a horizontal layout, i will make this happen…

      It will take a few days until it is published so stay tuned…

      Alexander

    2. Thanks. Would it be possible to include e.g. pictures in the scroll? I’m thinking about a list with text and picture references so that finally some teaser text next to a picture would be scrolled horizontally or vertically. Clicking on the text or a “more” would bring you to the list entry.

      Chris

    3. Yes, picture and hyperlink columns are recognized and displayed properly. It took a while longer than i expected, but it is nearly ready – just some touch-ups left.

      Alexander

  34. Hi Alex,
    This is a great solution you have here. Is there anyway to make it so the end user can add a new item to the list without making a seperate link? In other words is there a way to make a button or link at the top that doesn’t scroll to “Add a new item” ?

    Thanks,
    Nick

  35. Thanks for the quick reply. That would be great. One last thought I had…is there anyway to make this work in the format of a list view? Meaning can it be a view of columns in the list that scrolls rather than straight text?

  38. Hi Alex,
    First I would liek to say thank you for some great enhancements to this solution. It is definitley proving useful for me.
    I noticed that in the previous version I was able to set the container width using % instead of px (to allow for different screen resolutions), however, in the new version when I use 100% it seems to throw off the boarder and bottom menu alignment. Is there anyting I can do to fix this?

    P.S. there is no issue when setting the width in pixels.

    1. Sorry for the extra reply. I commented out the border style which seems to resolve the problem.

      Is there a parameter I can set so that when someone moves the mouse back off of the web part it automatically resumes scrolling without having to click the “play button” again?

    4. Sorry to be a pain. In the original version it had the ability to click on the actual scrolling item to go to the item (DispForm.aspx). I realize in the new version you can click the magnifying glass icon to enter the item, but is there anyway to get back the original functionality as well? I’m finding from my users that they are inclined to click right were they are when they hove over the item to stop the scrolling.

  39. Hello,
    I have a issue with sharepoint 2010. The webpart does’nt scroll. I get GUID from source code :
    ctx.listName = “{C5C8E45D-9833-48D6-8A1D-A570C1CD789C}”;
    ctx.view = “{B6953DC1-252A-49C2-B69A-5FF66B009B42}”;
    ctx.listUrlDir = “/Lists/Manifestation”;
    ctx.HttpPath = “http://XXXX/_vti_bin/owssvr.dll?CS=65001”;
    ctx.HttpRoot = “http://XXXX”;
    ctx.imagesPath = “/_layouts/images/”;
    ctx.PortalUrl = “”;

    I put ‘listGuid’:’C5C8E45….’ , ‘listViewGuid’:’B6953DC….’, ‘listBaseUrl’:”.
    I don’t change ‘viewFields’:[‘Title’,’MultiLine’],

    Someone can help me?
    Thanks,
    DjeDJe_zr7

  40. Hi Alex,

    Great post .. this works fine with IE and Firefox, but fails in Safari. Please let me know if there is a work around to make it work in Safari.

    Thanks

  41. Hi,
    I need scrolling thing to announcement webpart list, I fallowed all the steps but it is not working.. I think I am making mistakes in entering L
    istGuid, listBaseUrl,listViewGuid,
    viewFields:
    divID: The ID of the scrollable DIV. Can be anything as long as it is unique on the page.
    divHeight: The hight of the scrollable area.
    divWidth: The width of the scrollable area.
    speed: A number representing the scroll speed.
    linkBack: If set to true it adds a link to open the item clicked on.

    where can I find those details..

    Thanks in Advance,
    Lakshmi

    1. The article does describe the steps to implement this, which step is it you do not understand? In general, the only thing necessary to change is “listGuid”, “listBaseUrl”, “listViewGuid” and “viewFields”.

      Alexander

  42. Thanks alexander..
    Its working fine in IE and firefox.. but it is not working in chrome.. Any suggestions to fix this?

    Thanks
    Lakshmi

  43. Hi… The same works fine in IE and fire fox, But doen’t work with Chrome I debuggeg client side cript I couldnt find any error..
    Can any one help me aboute this..
    Any idea what might be the problem?

    1. Hi Nagalakshmi,

      Replace that function (I corrected to CHROME, OPERA, and SAFARI):

      // Function to pull items from view
      function queryItemsByViewName(listName, viewName, viewFields, pagingInfo){
      var content = buildQueryContentByViewName(listName, viewName, viewFields, pagingInfo);
      var result = {count:-1, nextPagingInfo:”, items:[]};

      wrapSoapRequest(wsBaseUrl + ‘lists.asmx’, ‘http://schemas.microsoft.com/sharepoint/soap/GetListItems’, content, function(data){
      /*
      result.count = $(‘rs\\:data’, data).attr(‘ItemCount’);*/
      result.count = $(data).find(“[nodeName=’rs:data’]”).attr(‘ItemCount’);
      /*
      result.nextPagingInfo = $(‘rs\\:data’, data).attr(‘ListItemCollectionPositionNext’);*/
      result.nextPagingInfo = $(data).find(“[nodeName=’rs:data’]”).attr(‘ListItemCollectionPositionNext’);

      /*
      $(“z\\:row”, data).each(function(idx, itemData){*/
      $(data).find(“[nodeName=’z:row’]”).each(function(idx, itemData){
      var fieldValObj = {}
      $.each(viewFields,function(i,field){
      var value = $(itemData).attr(‘ows_’ + field);
      if(value == undefined) value = null;
      fieldValObj[field]=value;
      });
      result.items.push(fieldValObj);
      });
      });
      return result;
      }

      I now is late…

  45. Hi,

    Is there any chance at all that you could actually post a video of you completing these steps!?!?!

    I know its an unusal request and I am obviously a minority because everyone seems to understand it without a problem.

    Is there anyone here who can post the video from start to finish on youtube.

    I cannot describe to you how grateful I would be. Please help the helpless lol

  46. Have you looked at the one i linked to above?

    I can’t see a link to a video?

    I think i have a problem with referencing the URL to the files.

  48. I even tried your method of how to debug a script.

    I also tried entering the script through “Edit HTML”, but I get the following message: “the html source you entered may have been modified”

  49. I finally got it working, best feeling in the world.

    THANK-YOU, excellent.

    ———————————–

    Advice for newbies:

    http://sympmarc.com/2011/03/29/adding-script-into-a-content-editor-web-part-cewp-in-sharepoint-2010/

    save your script in a .js file upload it to a directory and then edit your content editor and put the link to the .js file in the content link.

    check out the article on troubleshooting a script here:

    https://spjsblog.com/2010/04/02/how-to-troubleshoot-when-the-scripts-does-not-work/
    ————————————-

    Advice for experts:

    PLEASE when explaining things, do not over-estimate newbies e.g. please put “content editor web part” instead of “CEWP”.

    Please include screenshots and things.

  50. Alex, I need your help. I know the link is constructed in line 59. My list consists of 2 columns: “Title” and “link”. Link is a hyperlink column type. Is it possible to edit linke 59 so that it takes me to the link? i.e. it needs to point to the link column of the item.

    Possible?

    1. Hi,
      I’m glad you figured it out.

      What i meant with the “link above” was the solution “Slideshow for SharePoint”.

      To have the link point to the “value” in the field “link”, try replacing line 59 with this:

      finalBuffer.push("onclick='javascript:location.href=""+item['link'].split(', ')[0]+"&Source="+location.href+""' ");

      You must also change line 35 like this:

      var res = queryItemsByViewName(info.listGuid,info.listViewGuid,info.viewFields.concat('ID','FileDirRef','link'));

      This is not tested and might need a little tweaking – test it and let me know.

      Alexander

  51. Hi,

    It did not work Alex.

    However, I managed to get it working by…..

    1.) Going to my list and creating a column called “Link” (normal text field, NOT a hyperlink field).

    2.) Populate the list, make sure your “Link” column contans hyperlinks that start with http://www. and not just www.

    3.) Replace line 59 (In verticalscrollingwebpart.js) with:

    finalBuffer.push(“onclick=’javascript:location.href=””+item[‘Link’]+””‘ “);

  52. The VerticalScrollingWebpart is behaving differently in 2010 for me… I still get the scrolling but the majority of the list is displayed staticly under the web part. Any suggestions?

  53. Alexander,

    How do I get this to auto-update upon change to the list i.e. The list view pointed to by the scrolling webpart shows only open items. When the Item changes to closed it is no longer in the view that the scrolling webpart points to, but the webpart does not update. A manual page refresh is necessary to get the item out of the scroll.

    Thanks

    1. Try wrapping the function call like this:

      setInterval(function(){
init_fillScrollableDiv({'listGuid':'A4B4E15A-C5B0-47BC-A08B-739CD48FE58A',
	'listBaseUrl':'/test/English',
	'listViewGuid':'5BD378F4-25D5-4880-9C5B-1667FE43978D',
	'viewFields':['Title','MultiLine'],
	'viewFieldsStyle':['font-weight:bold','padding:0 0 0 5'],
	'divID':'myScrollableDiv',
	'divHeight':'250px',
	'divWidth':'500px',
	'speed':4,
	'linkBack':true});
},10000);

      This will reload the dataset every 10000 milliseconds (10 sec). I have not tested it, but I guess it should work.

      Alexander

  54. Thanks, works beautifully. I was wondering whether there’s any code I can add to have the scroll pause for a few seconds on each list item automatically, so the scroll speed could be faster, but each item display for a little also.
    Also I seem to be getting a large chunk of white space between the last and first item of the list each time. Can I reduce this?
    Otherwise, works beautifully, thanks!

  56. Hi Alex,
    I’m having an overflow issue on IE8. I know there were issues with this in your earlier solution on IE6. Is there a more recent fix?

    2. I apologize for any confusion. I was subscribed to both solutions and posted this in the wrong one. My issue is actually taking place on the solution you refered to in your reply above.

  58. I’m having trouble with this. All of the parameters are set correctly, and it looks like something is trying to happen, but getting an error asking to check the guids and base URL.

    I will say however that I am trying to show the scrolling content from an External List that is pulling from a View of a database, and notice there is a Method tag near the RefField tag of the listview.

    Can you help me with this, or suggest a work around? I want to be able to dyisplay scrolling external data in a CEWP.

    Thanks,

  59. I used the code, I debug it, I see the results(returned with expected values) but I get the following error later:

    SCRIPT28: Out of stack space
    jquery-1.4.2.min.js, line 22 character 282

    what should be that error?

  60. I believe I have followed all of the steps listed on this site correctly and still cannot get the content to scroll through my announcements list. Below is the code that is entered into the CEWP. All that returns is the CEWP title with no data scrolling or visible at all. Can you please tell me what I’m doing wrong.

    init_fillScrollableDiv({‘listGuid’:’569C9349-5487-4710-8B04-71CA25677896′,
    ‘listBaseUrl’:’/units/89mp’,
    ‘listViewGuid’:’0D6A92AF-D759-4B99-B94A-4AF82C360FE2′,
    ‘viewFields’:[‘Title’],
    ‘viewFieldsStyle’:[‘font-weight:bold’,’padding:0 0 0 5′],
    ‘divID’:’Chaplain_Announcements’,
    ‘divHeight’:’250px’,
    ‘divWidth’:’500px’,
    ‘speed’:4,
    ‘linkBack’:true});

  61. Hello
    I’ve been trying to get this webpart to work for 2 days now and have had no luck. Will this not work in 2010 sharepoint content editor? Please let me know

  62. I know there is a newer version of the code on a separate post. But that download is blocked on my firewall. I am trying to get this version to work. I want to scroll through a list. I am getting “An error has occurred…” like I am not pointing to the correct List or View, or perhaps have a bad Base URL. But I have followed the directions several times and I know I have the correct info here. After I get the “Error has occurred…” I get “Stack Overflow at 42.” I am using SP 2010 and IE 8.

    ‘listGuid’:’85CE2500-A60F-41C9-BB52-0BA46E53D13F’,

    ‘listBaseUrl’:’/sites/ITConnect’,

    ‘listViewGuid’:’A041A352-A80C-49D1-B251-BF5FB26BB942′,

    ‘viewFields’:[‘Title’,’Body’],

  63. I’m having trouble getting this to work. I don’t get any error message. Any help would be appreciated.

    init_fillScrollableDiv({‘listGuid’:’1D42C531-6C1B-4DB5-AF5F-E5E2D1CDBC01′,
    ‘listBaseUrl’:’/dept/hr/awards/Awards-of-Excellence’,
    ‘listViewGuid’:’A877922E-362D-453E-802B-8799E473F601′,
    ‘viewFields’:[‘Name’,’Position_x0020_Title’],
    ‘viewFieldsStyle’:[‘font-weight:bold’,’padding:0 0 0 5′],
    ‘divID’:’myScrollableDiv’,
    ‘divHeight’:’250px’,
    ‘divWidth’:’500px’,
    ‘speed’:4,
    ‘linkBack’:true});

  64. Hi,
    I suspect the line:

    ‘listBaseUrl’:'/dept/hr/awards/Awards-of-Excellence’,

    should be like this:

    'listBaseUrl':'/dept/hr/awards',

    It may also be due to wrong type of quotes when you copied the code – go over and manually rewrite all quotes.

    Alexander

  65. Hi Alex,

    I am going nuts here. I have rewritten all of the quotes which solved some issues, but when debugging the code it still bombs out at this line in the fillScrollableDiv(info) function:

    $.each(res.items,function(i,item){

    Res is undefined after the SOAP call. Both the Res.count and the resutls.count before that are returning “undefined” right before it hits this line in the code, making me think that there is something wrong with the SOAP call.

    I have confirmed multiple times that the List ID (both with and without the {} ) and the BaseURL are correct, and even followed the complete link to the lists.asmx page to verify that that file existed

    init_fillScrollableDiv({‘listGuid’:'{3C31AE5F-3A23-472C-8CFB-54B187B1E703}’,
    ‘listBaseUrl’:’/teamsites/ITDSE/CoP’,
    ‘listViewGuid’:”,
    ‘viewFields’:[‘Title’],
    ‘viewFieldsStyle’:[‘font-weight:bold’,’padding:0 0 0 5′],
    ‘divID’:’myScrollableDiv’,
    ‘divHeight’:’250px’,
    ‘divWidth’:’500px’,
    ‘speed’:’4′,
    ‘linkBack’:true});

    Any and all help would be greatly appricicated.

      1. Thanks for the reply Alex,

        No luck. I have tried with three differenet versions of jQuery including 1.4.2.min that you have shown in your example.

        Are there any strange characters that might have been copied over wrong (other than the quotes)?
        Are there any permissions that need to be set at the Site Collection level?

      2. Hi,
        Are you sure you have corrected all the quotes? The ones from your function call in the comment from June 25 don’t look right.

        Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.