Bistesh Blog

Tuesday, June 16, 2015

SharePoint - HTML / JavaScript Banner - Static Sliding Images

This will give you a basic static image sliding code which you can apply on your home page. This will have images and link to any URL which is predefined in the HTML file. An easy and free approach for the rotating banner or images or div that can be used to decorate the home pages of your website. It has been tested and works in latest versions of all browsers. I'm using the frames and JQuery library defined to support this model. These JQuery are free to download as is available from internet.

For dynamic sliding images , please refer this article.

Click Here to Get the Source Code with JS and CSS files. Check for more (external).

Happy Browsing!
Relax..

Thursday, March 12, 2015

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:

Make sure you have enabled the "Getting Started"" features in the site features.
Add new APP and search for "Promoted Links" App and create a new list with this template.
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.
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..

Saturday, February 14, 2015

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..