What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 128 Stack Exchange communities.

I spend a lot of time in SF chat. We like to post a lot of pictures in chat. They're usually not offensive or anything, and 90% of the time they're funny and relevant.

That said, there are times when it would be nice to be able to hide or collapse a chat message. Sometimes it's an image or an animated gif that's annoying/distracting, or sometimes there's text that isn't offensive, but I don't necessarily want it on my screen.

Can we have an option that allows individual messages to be hidden from view?

share|improve this question
9  
90% of the time they're funny and relevant That's what you think... –  Yannis Jun 25 '12 at 15:15
    
You can stick something on the screen until it pass. => 10% not funny irreverent. –  user173320 Jun 25 '12 at 15:17
4  
This is definitely something I'd appreciate –  Dan Dec 5 '12 at 16:52
    
The images don't actually bother me that much, but for devs at work or with bandwidth issues, I think it's a good idea if you could block images, so +1 –  Martin James Mar 2 '13 at 9:44
    
What annoys me is those huge animated gifs –  American Luke Aug 12 '13 at 21:16
    
Potential workaround: use this to remove any crap from a webpage you'd like kickassapp.com –  Adam Rackis Aug 12 '13 at 22:37

3 Answers 3

up vote 16 down vote accepted

I made this simple script I use sometimes. It works for one-boxes, images, videos, animated gifs, crude language, etc.

How to enable

You can run this code (at the bottom) either in the console of the browser or from the url with javascript:. I have it saved as a bookmarklet.

Once enabled

hover message for message actions

This actually adds the functionality to hide a message inside of the message actions :D The message actions show up as a down arrow when you mouse over a message.

Message Options

select "Click to hide this message"

Note the top of the popout will now contain "Click to hide this message". If clicked, it will collapse the current message and if there was a link it will no longer be clickable. Once hidden, the text in the popout will change to "Click to restore this message" and a click will return the message to its original condition.

Click To Hide

Code

var popUp = function(a,e,f,b){
 b || $(".popup").remove();
 b={};
 a-=$(window).scrollLeft();
 e-=$(window).scrollTop();
 a < $(window).width() / 2 ? b.left= a : b.right = $(window).width() - a;
 e < $(window).height() / 2 ? b.top = e : b.bottom = $(window).height() - e;
 var c = div("popup").css(b).hide();
 $("<div class='btn-close'>X</div>").click(function(){
  $(this).closest(".popup").fadeOut(200,function(){
   $(this).remove()
  })
 }).prependTo(c);
 c.appendTo( f || $("body") ).fadeIn(200);
  if( f !== undefined && f.hasClass("message") ){
  var hideMessage = document.createElement("div");
  var message;
  if( f[0].getAttribute("data-remove-message") == null){
   message = "Click to hide this message";
  }else{
   message = "Click to restore this message";
  }
  hideMessage.innerHTML = message;
  $(hideMessage).css("cursor","pointer");
  hideMessage.onclick=function(e){ shutter(e,c) };
  c.append(hideMessage);
 }
 c.close = function(){ c.fadeOut( 200, function(){c.remove()} ) };
 return c
};

function shutter(evnt,caller){
 var tar = evnt.target;
 var element = $(tar).closest('.message')[0];
 var message;
 var remove;
 if( element.getAttribute("data-remove-message") == null){
  message = "remove message?";
  remove = true;
 }else{
  message = "restore message?";
  remove = false;
 }
 if( remove ){
  element.setAttribute("data-remove-message","restore");
  element.setAttribute("data-previous-height",$(element).height());
  $(element).find('.content').fadeTo("fast",0.01);
  $(element).css('overflow','hidden');
  $(element).animate({height:'1.5em'}, "medium", function(){
   $(element).find('.content').css("position","absolute");
   $(element).find('.content').css('z-index','-1');
  });
  $(element).css("background-color","grey");
 }else{
  element.removeAttribute("data-remove-message");
  var h = element.getAttribute("data-previous-height") + "px";
  element.removeAttribute("data-previous-height");
  $(element).css("background-color","");
  $(element).animate({height:h}, "medium", function(){ 
   $(element).find('.content').css("position",""); 
   $(element).css("height","");
   $(element).css('overflow','');
  });
  $(element).find('.content').css("z-index","");
  $(element).find('.content').fadeTo("fast",1);
 }
 caller.fadeOut( 200, function(){caller.remove()} )
}

Automatic Image Collapsing

And for all you avid chatters, there is an automated version. This version will automatically collapse any image or youtube posted as a one box (aside from ones you post yourself). Wiki, amazon, questions, feeds, and such will still work (perhaps those options will be in a future version if requested - it just seems that they are usually on topic).

automated collapse script

javascript:var popUp = function(a,e,f,b){   b || $(".popup").remove();   b={};   a-=$(window).scrollLeft();   e-=$(window).scrollTop();   a < $(window).width() / 2 ? b.left= a : b.right = $(window).width() - a;   e < $(window).height() / 2 ? b.top = e : b.bottom = $(window).height() - e;   var c = div("popup").css(b).hide();   $("<div class='btn-close'>X</div>").click(function(){   $(this).closest(".popup").fadeOut(200,function(){     $(this).remove() }) }).prependTo(c);     c.appendTo( f || $("body") ).fadeIn(200);     if( f !== undefined && f.hasClass("message") ){      var hideMessage = document.createElement("div");      var message;     if( f[0].getAttribute("data-remove-message") == null){          message = "Click to hide this message";      }else{          message = "Click to restore this message";      }      hideMessage.innerHTML = message;      $(hideMessage).css("cursor","pointer");      hideMessage.onclick=function(e){ shutter(e,c) };      c.append(hideMessage);     }     c.close = function(){ c.fadeOut( 200, function(){c.remove()} ) };     return c;  };  function shutter(evnt,caller){      var tar = evnt.target;      var el = $(tar).closest('.message')[0],          $el = $(el),         $c = $el.find('.content');     var message;      var remove;      if( el.getAttribute("data-remove-message") == null){          message = "remove message?";          remove = true;      }else{          message = "restore message?";          remove = false;      }           if( remove ){          el.setAttribute("data-remove-message","restore");         el.setAttribute("data-previous-height",$el.height());          $c.fadeTo("fast",0.01);          $el.css('overflow','hidden');          $el.animate({height:'1.5em'}, "medium", function(){              $c.css("position","absolute");              $c.css('z-index','-1');          });          $el.css("background-color","grey");      }else{          el.removeAttribute("data-remove-message");          var h = el.getAttribute("data-previous-height") + "px";         el.removeAttribute("data-previous-height");          $el.css("background-color","");          $el.animate({height:h}, "medium", function(){              $c.css("position","");              $el.css("height","");              $el.css('overflow','');          });          $c.css("z-index","");          $c.fadeTo("fast",1);      }      caller.fadeOut( 200, function(){caller.remove()} )  };  (function(){         var count = $('.message').length;       document.addEventListener("DOMNodeInserted", function (ev) {         var n = $('.message').length;         if( n != count ){                 if( $('.content:last').find('.ob-image,.ob-youtube,.ob-xkcd').length > 0){                           var el = $('.message:last')[0],                     $el = $(el),                     $c = $el.find('.content');                           el.setAttribute("data-remove-message","restore");                           el.setAttribute("data-previous-height",$el.height());                           $c.fadeTo("fast",0.01);                           $el.css('overflow','hidden');                           $el.animate({height:'1.5em'}, "medium", function(){                                $c.css("position","absolute");                                $c.css('z-index','-1');                      });                           $el.css("background-color","grey");                     }            }            count = n;        }, false); })(); var sb = $('#sayit-button'), btn = sb.clone(false).attr('id','con').html('console').css('margin-left','5px');btn.insertAfter(sb); btn.click(function(){var t = $('#input').val();console.log(t);$('#input')[0].value = "";window.location = 'javascript:'+t;}); $("body").on("click","a[href$=history]",function(e){  e.preventDefault();  $.get(this.href,function(data){    var d = {     width:'60%',     height:'60%',     top:'20%',     left:'20%',     position:'fixed',     zIndex:9001,     backgroundColor: '#d3d3d3',     borderRadius: '6px',     padding:'10px',     opacity:0.97    };    var div = $('<div>');    div.css(d).click(function(){this.remove();});    var cnt = $('<div>');    cnt.html($(data).find('#content').html());    cnt.click(function(e){e.stopPropagation()});    div.append(cnt);    $("body").append(div);  }); });
share|improve this answer
7  
This shall henceforth be known as Traviscript. –  Shotgun Ninja Jan 4 '13 at 21:03
    
This is really nice, I would like this to be integrated in the chat(s) by default. A useful option could be to auto-collapse all pics as SFW setting. Nice work Travis, as always! –  Johan Larsson Jan 5 '13 at 17:27
    
Nice work Travis, as usual! I assume you couldn't make it auto-censor? –  CC Inc Jan 9 '13 at 1:08
    
@CCInc - That feature is already present in the chat program. Simply click on a user's gravatar, and then select: "ignore this user (everywhere)" or "hide posts" –  Travis J Jan 9 '13 at 1:09
    
@TravisJ I am referring to the script cross-referencing with a "bad word dictionary" or something of the sort and automatically hide the post's that contain those words. –  CC Inc Jan 9 '13 at 1:12

There are a couple stackapps that do hide images. I suspect it wouldn't be hard to actually build a more integrated userscript.

share|improve this answer

I like Johan Larsson's solution, but if you're not fussy you can get the benefit of toggling without having to mess with the popup menus, which I find tedious. All in one line of jQuery (shown here as two lines due to width constraints).

$('#chat').on('click','.messages',function(event){$(this).find('.message').toggle()});

Yeah, it could be fancier, but this gets the job done. Note that consecutive messages by an individual will all be collapsed. But usually that's what I want anyway, if someone is spamming or whatever.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .