Floating Images and Messages

Owned by Ray Pearce (Unlicensed)
Last updated: Jan 12, 2015
2 min read

You may want to float a message to the user or create a simple image display that focuses the user's attention on what is being displayed. Whilst there are a number of freely available scripts that can be integrated within an answerSpace, the following is one of the simplest ways to do this that we've found.

It relies on jQuery (which is part of the BlinkMobile Platform) and does not requires heavy customisation of associated CSS files.

 

This file is a simple Javascript file that allows you to 'float' a piece of content above the main Interaction by simply loading the script into the answerSpace upon startup and then creating a message Interaction.

  • Load the Javascript into the answerSpace using 'Manage Assets':

  • Then make sure that the answerSpace loads this script using the Advanced pane in 'answerSpace Setup':

  • Then create the required Message Interaction. Here's what this would look like:

 And here's that code

<!-- http://buckwilson.me/lightboxme/ -->
<div id="pageElement" style="display:none; background-color:white; border-radius:17px; padding:20px; width:200px; height:200px; box-shadow: 0px 0px 15px 5px #333;">This is a message contained in a DIV that will float above a darkened background.<br />
<br />
<span id="closeLB">Close</span>
<br />
</div>
<span id="openLB">Open up a lightbox</span>

<script>
$('#openLB').click(function(e) {
    $('#pageElement').lightbox_me({
        centered: true, 
        onLoad: function() { 
            /*$('#sign_up').find('input:first').focus()*/

            }
        });
    e.preventDefault();
});
    
$('#closeLB').click(function(e) {
    $('#pageElement').trigger('close');
});

</script>