I found the following, and I love it: http://isotope.metafizzy.co/

I'd love to make this into a menu for my landing page - what should I learn to figure out how would I go about doing this? Is it even possible?

4 Answers 4


Here's my example for you.

You need to place on the page:

  1. isotope's css style link on the page
  2. jquery script link on the page
  3. isotope's script link on the page
  4. HTML with your menu data
  5. isotope's sturtup script op the page
  6. and adjust it for you isotope's HTML

And here's the result: enter image description here

Please note that you have to deal with conflict between isotope's styles and default SharePoint styles. I've highlighted an example - here SharePoint overrides isotope's margin-bottom with the 10px settings. I have disabled this override in browser debugger for this screenshot.


I partially agree with all of the above answers. However, there are a few things I would do to navigate this path while mitigating the risks.

  1. Be careful with needless masterpage customizations. - Instead you can use a Content editor web part to inject your custom code into your landing page. I cannot emphasize strongly enough how important having this kind of customization be a part of user side content was for our company. Even if you could do it on the server side or with Master page customizations, I would not recommend it for this kind of use-once tool.

  2. If I cannot talk you out of doing it all with code, then at least use a Delegate control and a feature to place it on the page. (Customizing MySite template)

  3. Better solution would likely to put the jquery files and Isotope.js in a doc library and then call them with a script tag in a Content editor web part. good writeup: http://blogs.msdn.com/b/sharepointdev/archive/2011/04/14/using-the-javascript-object-model-in-a-content-editor-web-part.aspx

  4. When using jquery like this you also want to guard the $_ object after you have it all set up. So, almost all of the jquery code you will run into will initialize jquery then maybe extend it. The problem will not show up until someone sees what you have done with jQuery and get all excited about another jQuery doo-dad they saw and implement it on the same page. We had an instance where on a single page jQuery was initialized 3 different times. Here is a write-up of how to do cleaner jQuery in SharePoint: http://www.antaressolutions.com.au/blog/Lists/Posts/Post.aspx?ID=11

  5. Have fun, once you get the hang of jQuery on a CEWP you will start seeing many uses for it to solve many requests you are reluctant to add to your code base. Also, you will want to read up on how to use js for client side code in SharePoint. MS has written a bunch of useful code for js to work with.

  • Take an upvote. Those are very good points! Aug 29, 2013 at 13:04

Sure you can make something like that with SharePoint, you would need to go with JQuery with predefined links, or play with Client Side Object Model to get the links dynamically from a navigation store, such as a SharePoint List or Managed Metadata Term Set as in SP 2013.

As for trying this, you can have a test machine on: http://cloudshare.com, it will give you a trial machine with 8GB RAM, I suggest you try to do the task with an empty page, with content editor webpart and JQuery, when you succeed doing that, you can make it inside a page layout where the navigation is inside the PlaceHolderMain inside your master page.

The end result would be a page layout where you'll have a div for the navigation inside the ContentPlaceHolderMain and the values are returned in client side object model using JavaScript.


There is no reason why you cannot use the Isotope.js script in SharePoint 2013.

First you will need to add jQuery to SharePoint. To do this you will need to customize the MasterPage. Then using a similar method you will need to add the Isotope jQuery plugin. Modify the page to add the required <div id="container"></div> I would use AJAX to add the individual items inside that.

Here is a video regarding jQuery and SharePoint 2013

Using JavaScript and jQuery in SharePoint 2013

Now if your question is regarding the creation of a plugin of the same sort as Isotope, then you are out of luck. If it were me, I would be more than willing to purchase I license so as not to have to go through the trouble.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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