SharePoint - To Play Video from Video Library with carousel

SharePoint - To Play Video from Video Library with carousel

Include this below scripts and update the video library as required in a content editor webpart.

<script type="text/javascript">
    function ShowPlayer(PlayerId) {
        var elm = document.getElementById(PlayerId);
        elm.style.display = 'block';
    }
    function HidePlayer(PlayerId) {
        var elm = document.getElementById(PlayerId);
        elm.style.display = 'none';
    }
  </script>

<div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div style="width:176px;height:104px;background-image:url('/film1.jpg');
                cursor:hand;"
                onclick="ShowPlayer('divp');
                playerp.controls.Play()" >
                <div id="divp" style="display:none;">
                <object classid='objPlayerID'
                id='playerp'
                width='174'
                height='104'
                standby='Please wait while the video is loaded...'>
                <param name='url' value='/film1.wmv' />
                <param name='src' value='/film1.wmv' />
                <param name='TransparentAtStart' value='0' />
                <param name='AutoStart' value='0' />
                <param name='CurrentMarker' value='0' />
                <param name='Balance' value='0' />
                <param name='CurrentPosition' value='0' />
                <param name='showcontrols' value='false' />
                <param name='enablecontextmenu' value='false' />
                <param name='fullscreen' value='False' />
                <param name='mute' value='false' />
                <param name='PlayCount' value='1' />
                <param name='rate' value='1.0' />
                <param name='uimode' value='none' />
                <param name='volume' value='100' />
                <embed type='application/x-mplayer2'
                pluginspace = 'http://www.microsoft.com/Windows/MediaPlayer/'
                name='playerp' ShowStatusBar='0' EnableContextMenu='0' autostart='0'
                width = '174' height = '129' loop='false'
                transparentatstart='true' src='/film1.wmv' />
                </object>
               
                </div>
        </div>

        <div style="text-align:left;">
                <img alt="" src=" /video_play.gif "
                title="Play" style="width: 82px;cursor:hand;height: 17px;padding-top:5px;"
                onclick="ShowPlayer('divp');playerp.controls.Play()" />
                <img alt="" src="/stop.png "
                title="Stop" style="width: 23px;cursor:hand;height: 17px;padding-top:5px;"
                onclick="HidePlayer('divp');playerp.controls.pause()";playerp.controls.stop(); />
                </div>
    </div>


Please update the source file, video locations, images for play, stop respectively to work correctly

Happy Browsing!
Relax..

SharePoint - To make Calculated Column as Hyperlink with URL parameters

SharePoint - To make Calculated Column as Hyperlink with URL parameters

 Steps to add a hyperlink column/field in the list with query string parameters.

1. Add a calculated field in the list and name it.  Select the calculated field type and in the calculation box, use the URL to compose the address string.
 Example :
 ="<a href='https://myserver/sites/team1?ProjectName="&Title&"'>"&Title&"</a>"

This will add the URL with server name and then add the query string parameter as title of that list item.

2. Select the Calculated field type as "Number".  Please do not select Single line of text. Number will give you the expected result as Hyperlink. (Decimals as Automatic.)

3. Save the field.

This will give the Hyper link the list column with query string parameter from other columns in that list.

Happy Browsing!
Relax..

SharePoint - HTML / JavaScript Banner - Static Sliding Images

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

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

SharePoint 2013/2010 - To set any column as link to item.

SharePoint 2013/2010 - To set any column as link to item.

In order to set the any column present in the list to link the item, by using the SharePoint designer, we can set this.

1. Open the list in the SharePoint Designer, and create a new view.

2. Open the newly created view and find <ViewFields> tag in it.

3. Add the bewlow tag to any column that you want to make as it as link to item.

4. LinkToItem="TRUE"  or linkToItem="TRUE" (use one which works in your allowed clienttemplates.js) and save it.

Other Field Types:

LinkToItem="TRUE"  => To display link to item.
LinkToItemAllowed="TRUE"   => display more option (...) to column .
Filterable="FALSE"   => To disable Column Filtering.

Sortable="FALSE" => To disable Column Sorting.

Happy Browsing!
Relax..