Umer Pasha Blogs

www.umerpasha.com

jQuery to change size of the Promoted Links in Sharepoint 2013

Sharepoint 2013 comes with standard Metro UI links app called “Promoted Links”. I will not go into how to set them up as you can google it and find various resources for that.

I was trying to put in two strips of promoted links and also wanted the second strip to be smaller than the first giving it a feel of a sub-menu. Coincidentally, there is no out of the box way of doing that. The images seemed to be scaled to 150px fixed.

So I added in a little bit of jQuery to resize them.

Here is the code that goes into a content editor webpart on the same page. Please change the path to your jQuery library reference. Change the image size you want. Change the WPQ number of the promoted link. You can find it by using developer tools on your browser hitting F12. Look for “promotedlinksbody_WPQ” :

<!--JQuery script to make promoted links any size. Also shifts to 2nd row if more than specified tiles. Author: Umer Pasha , Date: 3/15/2013-->

<script type="text/javascript" src="/scripts/jquery/jquery-1.8.1.min.js"></script>


<script language="javascript">
$(document).ready(function () {
 
// Update this value to the number of links you want to show per row
var numberOfLinksPerRow = 10;

// Set Image Size 
var ImageSize = "76";

// in case we have multiple promoted links on page, name the WPQ here
var promotedlinksbody_WPQ = "4";
 
// local variables
var pre = "<tr><td><div class='ms-promlink-body' id='promlink_row_";
var post = "'></div></td></tr>";
var numberOfLinksInCurrentRow = numberOfLinksPerRow;
var currentRow = 1;
// find the number of promoted links we're displaying

var numberOfPromotedLinks = $('#promotedlinksbody_WPQ' + promotedlinksbody_WPQ + ' > .ms-tileview-tile-root').length;
//var numberOfPromotedLinks = $('.ms-promlink-body > .ms-tileview-tile-root').length;

  // if we have more links then we want in a row, let's continue
  if (numberOfPromotedLinks > numberOfLinksPerRow) {
    // we don't need the header anymore, no cycling through links
    $('.ms-promlink-root > .ms-promlink-header').empty();
    // let's iterate through all the links after the maximum displayed link
    for (i = numberOfLinksPerRow + 1; i <= numberOfPromotedLinks; i++) {


      // if we're reached the maximum number of links to show per row, add a new row
      // this happens the first time, with the values set initially
      if (numberOfLinksInCurrentRow == numberOfLinksPerRow) {
        // i just want the 2nd row to
        currentRow++;

 
        // create a new row of links
        $('.ms-promlink-root > table > tbody:last').append(pre + currentRow + post);
        // reset the number of links for the current row
        numberOfLinksInCurrentRow = 0


    }
    

    // move the Nth (numberOfLinksPerRow + 1) div to the current table row
    $('.ms-promlink-body > .ms-tileview-tile-root:nth-child(' + (numberOfLinksPerRow + 1) + ')').appendTo($('#promlink_row_' + currentRow));
    // increment the number of links in the current row
    numberOfLinksInCurrentRow++;

  }
}


	// Set the size of main promoted links body
	var ControlID='promotedlinksbody_WPQ';
	ControlID=ControlID + promotedlinksbody_WPQ;
	$("#" + ControlID).height(ImageSize);
	
	// iterate through each link and set the size
    for (i = 1; i <= numberOfPromotedLinks; i++) {
        
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_1';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
		
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_2';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);

		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_7';
    	$("#" + ControlID).width(ImageSize);
		
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_4';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
    	
    	
		ControlID='Tile_WPQ' + promotedlinksbody_WPQ + '_' + i ;
		ControlID= ControlID + '_4';
    	$("#" + ControlID).width(ImageSize);
    	$("#" + ControlID).height(ImageSize);
    	//$("#" + ControlID).top(ImageSize);

	}

	ControlID="promotedlinksheader_WPQ" + promotedlinksbody_WPQ;
	$("#" + ControlID).hide();


});

</script>

Image

 

I am putting the javascript above in a .js file and putting the link to the .js file in a content editor. The content editor is on the same page as the promoted links.

smallPL1

These are the paths to the online vector icons I am using:

http://modernuiicons.com/icons/svg/appbar.reply.calendar.svg
http://modernuiicons.com/icons/svg/appbar.money.svg
http://modernuiicons.com/icons/svg/appbar.man.suitcase.svg
http://modernuiicons.com/icons/svg/appbar.calendar.14.svg
http://modernuiicons.com/icons/svg/appbar.calendar.svg
http://modernuiicons.com/icons/svg/appbar.places.svg

Here is the link to the .js file. Please rename to .js:   Link

 

73 Comments »

jQuery append, prepend, before, after functions for inserting rows in HTML table

I have been using jQuery extensively for the past couple of years or so. Mostly to add visual effects to my own site at http://www.umerpasha.com.

Unfortunately, due to shortcomings of Microsoft Sharepoint that my client uses as a portal builder, a lot of patchwork needs to be done on forms using jQuery as well. Mostly, it works well for cross-browser compatibility so I hardly check for cross-browser compatibility when working with Sharepoint/jQuery mostly because the portal is on an intranet and IE is the preferred browser for sharepoint anyway. In this particular case, they needed certain pages for public viewing pertaining to a show/event.

I have been using jQuery to insert rows at will between sharepoint edit forms to put in labels and headings and to change the look and feel of the form if required. I have always used append and prepend jQuery functions to do that.

So to add a heading “About You” after a certain textbox I will put in:
var str = ‘<tr><td width=”190″ class=”ms-formlabel” noWrap=”nowrap” vAlign=”top” ><FONT Color=”Red”>ABOUT YOU</FONT></td><td width=”400″ class=”ms-formbody” vAlign=”top”><span dir=”none”><input type=”hidden” name=”lblAboutYou” title=”lblAboutYou” class=”ms-long” id=”lblAboutYou”  /></td></tr>’;
$(‘input[title=StudentID]’).parent().parent().parent().append(str);

To add a heading after a certain textbox I will use “append” the same way.

So it turns out what “append” does is, APPEND (duh!) the HTML text WITHIN the TR tag. So in the following example, if I want to add a TR with id=3, i used to write the above code to insert row 3, finding row 2 and appending it.

<TR id=1>…</TR>
<TR id=2>…</TR>
<TR id=4>…</TR>

Turns out, this is WRONG! What is needed is this:
<TR id=1>…</TR>
<TR id=2>…</TR>
<TR id=3>…</TR>
<TR id=4>…</TR>

What actually happens is this:

<TR id=1>…</TR>
<TR id=2>… … … .. .  <TR id=3>…</TR>  </TR>
<TR id=4>…</TR>

 

As you can see, the new row is BETWEEN the TR tags of row 2. I never noticed this because of….. drumroll please….. IE!!! (Isn’t it always the case?????)

1. IE forgives you for having a totally blasphemous structure like above! It treats TR 3 as a separate row.

2. If you turn on “Inspect” tool (using F12) in IE, it freakin’ does not show you the ending tags!!!

So because of those 2 reasons I never got to know what monster i was creating!

So I create the page using the above wrong code and it messes up in firefox and chrome big time. No fault of jQuery though. Append is doing what it should…. APPENDING it!

So if you are in such a rut…. use jQuery functions “AFTER” and “BEFORE”.

Here is the correct code using the same str variable value as above and reaching the parent TR:

$(‘input[title=Name]’).parent().parent().parent().parent().after(str);

<TR id=1>…</TR>
<TR id=2>…</TR>
<TR id=3>…</TR>
<TR id=4>…</TR>

Leave a comment »