WORLD CLOCK FOR O365 SHAREPOINT AND SHAREPOINT

By -
  For JS and CSS files please share your E-mail id in comments.

 <!doctype html>
<html>
    <head>
        <title>punditsClocksGMT</title>
      

      
        <script type="text/javascript" src=".../jquery-1.3.2.min.js"></script>
        <script src="../js/punditsClocksGMT.js"></script>
        <script src="../jquery.rotate.js"></script>
        <link rel="stylesheet" href="../js/punditsClocksGMT.css">
       
        <style>
            body { font-family: Arial, sans-serif; }
        </style>
        <script>
            $(document).ready(function(){
                $('#clock_sing').jClocksGMT({offset: '+8', seconds:true});
                $('#clock_Tokyo').jClocksGMT({offset: '+9'});
                $('#clock_Shanghai').jClocksGMT({offset: '+8'});
                $('#clock_india').jClocksGMT({offset: '+5.5'});
                $('#clock_Frankfurt').jClocksGMT({offset: '+2'});
                $('#clock_California').jClocksGMT({offset: '-7'});
            });
        </script>
    </head>
    <body>
   
   
    <div style="margin:0 auto;">
        <div id="clock_sing" class="clock_container">
           
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="../images/clock_hour.png" /></div>
                <div class="rotatingWrapper"><img class="min" src="../images/clock_min.png" /></div>
                <div class="rotatingWrapper"><img class="sec" src="../images/clock_sec.png" /></div>
                <img class="clock" src=".../images/clock_face.png" />
            </div>
           
            <div class="lbl">Singapore</div>
           
            <div class="digital">
                <span class="day_gmt"></span></br><span class="date_gmt"></span></br><span class="hr"></span><span class="minute"></span><span class="period"></span>            </div>
        </div>
        <div id="clock_Tokyo" class="clock_container">
          
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="../images/clock_hour.png" /></div>
                <div class="rotatingWrapper"><img class="min" src="../images/clock_min.png" /></div>
                <div class="rotatingWrapper"><img class="sec" src="../images/clock_sec.png" /></div>
                <img class="clock" src="../images/clock_face.png" />
            </div>
             <div class="lbl">Tokyo</div>
            <div class="digital">
               <span class="day_gmt"></span></br><span class="date_gmt"></span></br><span class="hr"></span><span class="minute"></span><span class="period"></span>            </div>
        </div>
<div id="clock_Shanghai" class="clock_container">
          
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="../images/clock_hour.png" /></div>
                <div class="rotatingWrapper"><img class="min" src="../images/clock_min.png" /></div>
                <div class="rotatingWrapper"><img class="sec" src="../images/clock_sec.png" /></div>
                <img class="clock" src="../images/clock_face.png" />
            </div>
             <div class="lbl">Shanghai</div>
            <div class="digital">
               <span class="day_gmt"></span></br><span class="date_gmt"></span></br><span class="hr"></span><span class="minute"></span><span class="period"></span>
            </div>
        </div>
<div id="clock_india" class="clock_container">
          
            <div class="clockHolder">
              <div class="rotatingWrapper"><img class="hour" src="../images/clock_hour.png" /></div>
                <div class="rotatingWrapper"><img class="min" src="../images/clock_min.png" /></div>
                <div class="rotatingWrapper"><img class="sec" src="../images/clock_sec.png" /></div>
                <img class="clock" src="../images/clock_face.png" />
            </div>
             <div class="lbl">New Delhi</div>
            <div class="digital">
                <span class="day_gmt"></span></br><span class="date_gmt"></span></br><span class="hr"></span><span class="minute"></span><span class="period"></span>            </div>
        </div>

       
        <div id="clock_Frankfurt" class="clock_container">
           
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="../images/clock_hour.png" /></div>
                <div class="rotatingWrapper"><img class="min" src="../images/clock_min.png" /></div>
                <div class="rotatingWrapper"><img class="sec" src="../images/clock_sec.png" /></div>
                <img class="clock" src="../images/clock_face.png" />
            </div>
            <div class="lbl">Frankfurt</div>
            <div class="digital">
                <span class="day_gmt"></span></br><span class="date_gmt"></span></br><span class="hr"></span><span class="minute"></span><span class="period"></span>            </div>
        </div>
       
        <div id="clock_California" class="clock_container">
          
            <div class="clockHolder">
                <div class="rotatingWrapper"><img class="hour" src="../images/clock_hour.png" /></div>
                <div class="rotatingWrapper"><img class="min" src="../images/clock_min.png" /></div>
                <div class="rotatingWrapper"><img class="sec" src="../images/clock_sec.png" /></div>
                <img class="clock" src="../images/clock_face.png" />
            </div>
             <div class="lbl">California</div>
            <div class="digital">
                <span class="day_gmt"></span></br><span class="date_gmt"></span></br><span class="hr"></span><span class="minute"></span><span class="period"></span>            </div>
        </div>
        </div>
    </body>
</html>


   

Comments

  1. Unknown29 September 2015 at 02:48

    Very helpful post.....
    I also implement digital clock with the help of this post

    Thanks Karan

    ReplyDelete
  2. Unknown9 July 2019 at 04:37

    Nice!! please send me the js and css file. Thanks

    ReplyDelete
  3. Narendra26 August 2020 at 02:39

    please send me the js and css file. Thanks

    ReplyDelete

Post a Comment

Popular posts from this blog

Add attachment filed column in SharePoint custom list forms through SharePoint designer 2013

By -
Image
Open the Custom Form (either it is edit or new item) in the SharePoint Designer 2010/2013. Identify the place and paste the following code in SPD.  <tr>      <td rowspan="2" width="190px" valign="top" height="50px">         <H3>            Upload Evidence         </H3>      </td>      <td valign="bottom" height="15" id="attachmentsOnClient">         <span dir="ltr">            <input type="file" name="fileupload0" id="onetidIOFile" size="56" title="Name" />         </span>      </td>   </tr>   <tr>   <td colspan="4">      <input id="attachOKbutton" type="BUTTON" onclick='OkAttach()' value="Upload" style="width: 12.8em; height: 2em"/>     ...
Read more

Get all column values based on a distinct column value from SharePoint list through rest api and json filters

By -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $( document ).ready(function() { CreateNew(); }); function CreateNew() {     var listName = "UserProfile";         $.ajax({         url:_spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Location,UserTitle,PageAccessed",         type: "GET",         headers: {             "accept": "application/json;odata=verbose",         },         success: function (data) {             //alert(JSON.stringify(data.d.results));             var lookup = {}; var items = data.d.results; //var result = []; var divhtml='<ul>'; for (var item, i ...
Read more

Sharepoint 2013 interview Questions..

By -
Important sharepoint interview Questions..... 1.What are Managed Accounts? 2.Migration from 2010 to 2013 3.Search Service App config and database. 4.Can a content be spread to 2 servers ? 5.What if I change server name after installtion of SP? 6.How to confiugre FBA? 7.What to do if Solution got stuck in deployment ? 8.Multiples Web Applications timer job causing performance issue 9.Web application with separate application pools. 10.Shredded Storage ? 11.How to install trust cerificates? 12.Take backup only Site Collection ? 13.Export list with content types ? 14.What is Managed Metadata Service and how to export ? 15.Content Authoring ? 16.How to combine sharepoint uls logs? 17.How many environments were there which you have worked on ? 18.To deploy solution which jobs needs to be started ? 19.How do you deploy designer workflow to production ? 20.I have deployed a solution with timer job having some modifications, changed code not working ? 21.How to export co...
Read more