Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

How i can popup an image that display for 5 second as slogan/announcement after opening my sharepoint site welcome page

As Example: http://www.lebanese-forces.com

regards,

Hass

share|improve this question
    
I tried the code is working, but only when i am signed in the sharepoint 2013 Any ideas? –  user21307 Dec 10 '13 at 7:11

2 Answers 2

Hass,

You can use SP.UI.ModalDialog class from javascript and use _spBodyOnLoadFunctionNames to call it on Page Load, you will need to create a page and add image on it...

<script language="javascript" type='text/javascript'>
 _spBodyOnLoadFunctionNames.push('showPopup'); 

  function showPopup() {
     var options = {
        title: "My Dialog Title",
        width: 400,
        height: 600,
        url: "/_layouts/DialogPage.aspx" };

    SP.UI.ModalDialog.showModalDialog(options);
  }
</script>

Then for closing pop up after 5 seconds, you can write JavaScript on the DialogPage.aspx like:

 <script language="javascript" type='text/javascript'>

   function closePopup() {
     window.frameElement.commitPopup();
   }

   window.setTimeout("closePopup();", 5000);

   </script>
share|improve this answer
    
Dear Arsalan, </br> i cerated the page "Popup.aspx "and added inside " \14\TEMPLATE\LAYOUTS\Popup.apsx " and about the fisrt script i added ionto the masterpage on <head> section... help me since the page is not appear as welcome page!!! –  HASS Nov 28 '12 at 6:53
    
@hass you need to add the script on the page you want it to appear i.e. Welcome page... and not on the Master Page! –  Arsalan Adam Khatri Nov 28 '12 at 8:48

A better way would be to do it is in-page for sharepoint with JavaScript, redirect pages won't play that well.

You need to make a custom webpart at the least maybe a template. If you are already using a custom template on your site that may be easier.

Example in practice of the below code.

In your web part you need to do something akin to the following (I have chosen this code to be a lightweight solution which will require minimal code and very little browser/device power)

// Using JQuery - Add this to your template/webpart above the javascript
<style>
    #welcome_message {
        height: 300px;
        width: 300px;
        top: 50%;
        left: 50%;
        margin-left: -140px;
        margin-top: -140px;
        background-color: white;
        padding: 10px;
        position: absolute;
    }
    #blackout_curtain {
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        border: 0;
        height: 100%;
        width: 100%;
        background-color: black;
        position: absolute;
    }
</style>

<div id="blackout_curtain"></div>
<div id="welcome_message">Yo whats-up!</div>

<script>
    $('document').ready(function(){  
        // Remove if user wants to on click
        $('#welcome_message,#blackout_curtain').bind('click', function() {
                        $('#welcome_message').hide();
                        $('#blackout_curtain').hide();
                    });
        $('#welcome_message').delay(5000).queue(function(x) {
            $(this).fadeOut('slow');
            $('#blackout_curtain').fadeOut('slow');
            x();
        });
    });
</script>

If you are using SharePoint 2013 you can add this in the head, but if you don't care about validation (You're using 2010 it can go in the body :P)

<noscript>
    <style>
       #welcome_message, #blackout_curtain { display: none!important; }
    </style>
</noscript>

This all gives a nice lightweight solution, that is cross browser and looks really sexy.

share|improve this answer
    
Thank you all for the script and i tryed the JQuery code and its working fine but on each load the popup appear !!. i need to popup image appear on the welcome page not on each loading ?? –  HASS Nov 27 '12 at 11:37
    
Did you add it to the master page? It should only be on the one page, so a layout file or a web part. If you want it only once every so often, then you would have to set a cookie with the javascript and set the timeout to be the amount of time until the person sees it again. Which you would need to do in either mine or Arsalan's solution. It might be nice to only display it once a day etc. I feel that would add to the usability also. Storing cookies in JS is easy, good examples on w3c schools. –  Hugh Wood Nov 27 '12 at 11:46
    
thanks for your quick reply but you can help me more since i am trying to add the script to open the popup image once... –  HASS Nov 27 '12 at 13:31
    
Is that once forever, or once every day? Once per login? –  Hugh Wood Nov 27 '12 at 13:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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