SharePoint 2013 - Creating Tiles (Box) looks Links

SharePoint 2013 - Creating Tiles (Box) looks Links

SharePoint 2013 support new features such as Tiles to represent the brief description on the Tiles(Box) and links associated to it. This will give a glossy look to the site landing page or other use.

Example:

To achieve this:

1. Make sure you have enabled the "Getting Started"" features in the site features.
2. Add new APP and search for "Promoted Links" App and create a new list with this template.
3. Add the new items to list and specify the Image URL and Linsk for it with a short description to show in tile and give the order and save. 
4. Add this App Part to show up in any page and set the Tiles View as default.

For tiles images, you can use the http://thenounproject.com/

Happy Browsing!
Relax..

 

SharePoint 2013/2010 - Basic Static Tabs

SharePoint 2013/2010 - Basic Static Tabs

In order to display webparts or iFrame in tabs, paste the code in content editor and link the files.

<link href="/css/tabcontent.css" rel="stylesheet" type="text/css"/>
<script src="/js/tabcontent.js" type="text/javascript"></script>

<ul class="tabs" data-persist="true">
   <li class="selected">
      <a href="#view1" targetid="view1" targetid="view1">Tab1 </a></li>
   <li>
      <a href="#view2" targetid="view2" targetid="view2">Tab 2</a></li>
 
</ul>
<div class="tabcontents">
   <div id="view1" style="display: block">content 1 </div>
   <div id="view2" style="display: none">content 2 </div>

</div>

CSS and JS file


Happy Browsing!
Relax..

SharePoint 2013/2010 - To show waiting screen/image while loading in background.

SharePoint 2013/2010 - To show waiting screen/image while loading in background.

Pre-Setup: Please download and link the source file to jquery-1.10.2.js. Link to approprite bg imane abd loader image. Set the mail JavaScript in the master page for reuse of the code.

<script src="jquery-1.10.2.js"></script>
<style>
#loading { display:none; position:fixed; left:0; top:100; width:98%; height:100%;            background-image:url("/bg.png"); }
</style>

<script type="text/javascript" language="javascript">
function block_screen() {
   $("#loading").show();
document.getElementById('contentRow').style.display = 'block';
}
function unblock_screen() {
 $("#loading").hide();
document.getElementById('contentRow').style.display = 'block';
}
</script>
<div id="loading" > 
 <div id="loadingImage" style="position:fixed; left:450px; top:400px;"> 
<img  src="loader.gif" /> </div>
</div>


/*To Block Screen and Show waiting gif*/

<script type="text/javascript" language="javascript">
block_screen();
</script>


/*To Unblock Screen*/
<script type="text/javascript" language="javascript">
unblock_screen()
</script>

Happy Browsing!
Relax..