Simple Page Refresh Options

Unobtrusive auto page refresh options

by akmiecik

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.0rc/js/bootstrap-switch.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.0rc/css/bootstrap2/bootstrap-switch.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.0/js/toastr.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css">
<h3>Click the icon to show the options box. Click the "Close" button or press Escape to hide it again</h3>


<h3>Each time an option is set, I'd just make an AJAX call to the server to update that user's setting. End result for the user is "instant" saving without even having to actually click a save button. Their settings would be loaded on every page that had this module - in short, the settings would be sitewide and unique to each user (for every page that included the module). </h3>

<h4>If you are viewing this in JSFiddle's full screen mode, their bar along the top of the screen pushes the button down. But on a normal page, it would always be there in the bottom right. It can also easily be made to hide the majority of the button, leaving only a small tip or something showing. Then when the user mouses over the tip, it restores to full sight like you see it now</h4>

<div id="refreshoptions">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <span id="helpicon" class="fa-stack">
                <i class="fa fa-circle fa-stack-2x"></i>
                <i class="fa fa-info fa-stack-1x"></i>
                </span>Page Auto Refresh Settings</div>
    ...

CSS

#refreshoptions {
    visibility: hidden;
    text-align: center;
}
#refreshoptions, #tinybutton {
    position: fixed !important;
    bottom: 0em;
    right: 1em;
    z-index: 1050;
}
#refreshoptions i.fa-info{
    color:#428bca;
}

#refreshoptions span.fa-stack{
    margin-right: 5px;
}
#refreshoptions .panel-heading{
    
    padding: 10px 10px !important;
}
#refreshoptions .popover-title{
    font-weight: bolder;
    font-size: medium;
}
#tinybutton i {
    cursor: pointer;
    color: white;
    padding: 5px;
    background: green;
}
div.popover {
    color: #428bca;
}
#refreshminutes {
    cursor: default !important;
}
#refreshminutes:focus {
    cursor: text !important;
}

JavaScript

jQuery.noConflict();
jQuery(document).ready(function(){
var menuID = jQuery('#rmp-menu-item-138');

findA = menuID.find('a');
findA.click(function(event)
{var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,%27%27);f.href=g+(g.match(/\?/)?%27&%27:%27?%27)+%27forceReload=%27+(new Date().valueOf())}}})()
});
});
});