Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Thanks. Can you share how the footer javascript code would look like to show the message?

asked Sep 1 by rinsights Bronze (740 points)

2 Answers

0 votes
Please try adding this code either to a single page or to the global survey settings:

<script>
$(document).ready(function(){
    // Parameters
    var message = 'Please rotate your device.';
    var cutoffWidth = 800;
    
    // Run
    var overlay = $('<div id="orientationOverlay"></div>');
    $(overlay).append('<div id="orientationModel"><span>' + message + '</span></div>');
    $('body').append(overlay);
    
    var refreshOrientationOverlay = function() {
        var width = $(window).width();
        var height = $(window).height();
        $(overlay).toggle(width < cutoffWidth && width < height);
    }
    
    $(window).on('resize', refreshOrientationOverlay);
    $(window).on('refreshOrientationOverlay', refreshOrientationOverlay);
    refreshOrientationOverlay();
})
</script>

<style>
#orientationOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

#orientationModel {
    text-align: center;
    margin: auto;
    margin-top: 100px;
    padding: 8px;
    background-color: white;
    border: 1px solid #afafaf;
    border-radius: 8px;
    max-width: 80%;
}
</style>


You can update line 4 with the message to show, and line 5 with the cutoff width at which users will no longer be shown the message.
answered Sep 1 by Zachary Platinum Sawtooth Software, Inc. (153,100 points)
0 votes
Please use below code:

<style>
.addmessage {
    top: 0px;
    background: white;
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    padding-top: 200px;
}
</style>
<script>
setInterval(function(){
var width=$(window).width();
var height=$(window).height();
/* Change 1000 with the maximum width you want to have landscape mode*/
if(width<height && width<=1000){
  $("body").append("<div class='addmessage'>Please rotate your device.</div>");
}
},100);
</script>
answered Sep 2 by Rahul Mittal Gold (10,535 points)
...