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, 2020 by rinsights Bronze (890 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, 2020 by Zachary Platinum Sawtooth Software, Inc. (207,300 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, 2020 by Rahul Mittal Gold (11,860 points)
...