Usability and Inline Management Controls

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Consider a blog that when logged in to, displays things like edit icons next in the corner of posts and in widget blocks. They're nice for the blog editors, but do nothing but distract everyone else.

When a page is generated dynamically every time it's loaded it's easy to control whether those icons are displayed or not, you just don't print them if the user isn't logged in. What about a system that uses static HTML caches extensively though ?

I can rewrite requests so that something gets a chance to see if the user is logged in and generate a fresh page for them, but those checks kinda defeat the purpose of the caches. So, I'm going to go with using javascript to display the management controls since the backend checks permissions anyways so I can keep using the cached pages.

Now it comes down to how I should go about determining whether the controls are to be displayed.

One option is to have the user load a to-be-cached tiny javascript in the background that hits a lightweight privilege checking script. That could defeat the purpose of using JS, and possibly cause every visitor to be presented with HTTP login screens if done half-assed though.

Another option, and the one I'm leaning towards at the moment, is to have a hotkey that toggles the classname and visibility of control elements. A few downfalls I can think of with this are, I have to be careful to stay away from existing browser hotkeys, and I'm worried about logging keypresses and triggering it after something like "manage" is typed in because I don't want it to be mistaken as a malicious keylogger.

I guess one thing I could do is make the hotkey configurable by the user, so they can make sure there are no conflicts with their browser themselves.

Anywho, what do you guys think about this whole thing ? :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

A link with an accesskey sounds good.

Do accesskeys usually jump the browser to where the link is before activating it ?
I get a strange behavior where my screen will jump down to the bottom of the page where the accesskeyed link is when I use the access key.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Making sure the elements with an accesskey are in a fixed position (position:fixed;) seems to get rid of the jump.

I'm thinking of doing one of those Facebook style bars on the bottom of the page, that will be invisible until the accesskey is pressed.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

And of course one of the browsers just has to have some strange behavior where using a position:fixed bar on the bottom jumps to the bottom of the page when the access key is pressed anyways. Oddly enough it doesn't jump to the top of the page when the fixed position is at the top though. :scratchhead:


HTML Code: [ Select ]
<script type="text/javascript">
function management_mode()
{
 
   $('.management').each(function(){
      // Likely going to replace this with a fade-in later on
      $(this).css({visibility:'visible'});
   });
   return false;
}
</script>
  1. <script type="text/javascript">
  2. function management_mode()
  3. {
  4.  
  5.    $('.management').each(function(){
  6.       // Likely going to replace this with a fade-in later on
  7.       $(this).css({visibility:'visible'});
  8.    });
  9.    return false;
  10. }
  11. </script>


HTML Code: [ Select ]
   <div style="position:fixed; top:0; left:0; right:0; text-align:center;">
      <a title="Display Management Tools" href="" onclick="return management_mode();" style="" accesskey="m">Management Mode</a>
   </div>
  1.    <div style="position:fixed; top:0; left:0; right:0; text-align:center;">
  2.       <a title="Display Management Tools" href="" onclick="return management_mode();" style="" accesskey="m">Management Mode</a>
  3.    </div>
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I don't want to get into explaining it, but here's what seems to be working for me right now.
Tossed in some cookie stuff so you don't have to keep toggling it.
There's various management controls scattered around the page with a className of "management"

CSS Code: [ Select ]
#management-bar {position:fixed; top:0; left:0; right:0;}
#management-bar div {margin:0 auto; padding:0 10px 0 10px; width:960px; height:20px; border:#ccc 1px solid; border-top:0; background:#eee; text-align:left;}
#management-bar div a, #management-bar div a:visited {font-size:small; color:#900;}
.management {visibility:hidden;}
  1. #management-bar {position:fixed; top:0; left:0; right:0;}
  2. #management-bar div {margin:0 auto; padding:0 10px 0 10px; width:960px; height:20px; border:#ccc 1px solid; border-top:0; background:#eee; text-align:left;}
  3. #management-bar div a, #management-bar div a:visited {font-size:small; color:#900;}
  4. .management {visibility:hidden;}


HTML Code: [ Select ]
   <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript">/*-*/</script>
<script type="text/javascript">
var management =
{
   is_visible: false,
   toggle_display: function()
   {
      if(management.is_visible)
      {
         cookies.destroy('management_visible');
         $('.management').fadeOut(500);
      }
      else
      {
         cookies.set('management_visible', management.is_visible, 90);
         $('.management').fadeIn(500).css({visibility:'visible'});
      }
      management.is_visible = !management.is_visible;
      return false;
   }
}
 
var cookies =
{
   set: function(name, value, days)
   {
      var expires = "";
      if(days)
      {
         var date = new Date();
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
         expires = "; expires=" + date.toGMTString();
      }
      document.cookie = name + "=" + value + expires + "; path=/";
   },
   get: function(name)
   {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i = 0; i < ca.length; i++)
      {
         var c = ca[i];
         while(c.charAt(0)==' ')
         {
            c = c.substring(1, c.length);
         }
         if(c.indexOf(nameEQ) == 0)
         {
            return c.substring(nameEQ.length, c.length);
         }
      }
      return null;
   },
   destroy: function(name)
   {
      cookies.set(name, "", -1);
   }
}
 
if(cookies.get('management_visible'))
{
   management.is_visible = true;
   document.write('<style type="text/css">.management {visibility:visible;}</style>');
}
</script>
   <!--{{head}}-->
</head>
<body>
   <div id="management-bar" class="management">
      <div>
         <a title="Toggle Management Display" href="#management-bar" onclick="return management.toggle_display();" accesskey="m">Toggle Management Display</a>
      </div>
   </div>
  1.    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript">/*-*/</script>
  2. <script type="text/javascript">
  3. var management =
  4. {
  5.    is_visible: false,
  6.    toggle_display: function()
  7.    {
  8.       if(management.is_visible)
  9.       {
  10.          cookies.destroy('management_visible');
  11.          $('.management').fadeOut(500);
  12.       }
  13.       else
  14.       {
  15.          cookies.set('management_visible', management.is_visible, 90);
  16.          $('.management').fadeIn(500).css({visibility:'visible'});
  17.       }
  18.       management.is_visible = !management.is_visible;
  19.       return false;
  20.    }
  21. }
  22.  
  23. var cookies =
  24. {
  25.    set: function(name, value, days)
  26.    {
  27.       var expires = "";
  28.       if(days)
  29.       {
  30.          var date = new Date();
  31.          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  32.          expires = "; expires=" + date.toGMTString();
  33.       }
  34.       document.cookie = name + "=" + value + expires + "; path=/";
  35.    },
  36.    get: function(name)
  37.    {
  38.       var nameEQ = name + "=";
  39.       var ca = document.cookie.split(';');
  40.       for(var i = 0; i < ca.length; i++)
  41.       {
  42.          var c = ca[i];
  43.          while(c.charAt(0)==' ')
  44.          {
  45.             c = c.substring(1, c.length);
  46.          }
  47.          if(c.indexOf(nameEQ) == 0)
  48.          {
  49.             return c.substring(nameEQ.length, c.length);
  50.          }
  51.       }
  52.       return null;
  53.    },
  54.    destroy: function(name)
  55.    {
  56.       cookies.set(name, "", -1);
  57.    }
  58. }
  59.  
  60. if(cookies.get('management_visible'))
  61. {
  62.    management.is_visible = true;
  63.    document.write('<style type="text/css">.management {visibility:visible;}</style>');
  64. }
  65. </script>
  66.    <!--{{head}}-->
  67. </head>
  68. <body>
  69.    <div id="management-bar" class="management">
  70.       <div>
  71.          <a title="Toggle Management Display" href="#management-bar" onclick="return management.toggle_display();" accesskey="m">Toggle Management Display</a>
  72.       </div>
  73.    </div>
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

I can't decide if you're elaborating or your other personality is giving you the answers?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

These threads start out as questions, but I usually end up just working it out and leaving my notes here at Ozzu knowing I'll want to come back to them later. :D
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Ok, so some of both, lol. I thought that it looked like you were working it out, but I didn't really catch on so figured maybe it was me. :)
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Seems Internet Explorer 8 doesn't like access keys that are within anything with a visibility of hidden.

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 52 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.