Prevents images from stretching pages sideways with an optional max width
// ==UserScript==
// @name ETI Image Width
// @namespace pendevin
// @description Prevents images from stretching pages sideways with an optional max width
// @include http://endoftheinter.net/inboxthread.php*
// @include http://boards.endoftheinter.net/showmessages.php*
// @include https://endoftheinter.net/inboxthread.php*
// @include https://boards.endoftheinter.net/showmessages.php*
// @version 2
// @grant none
// @require http://code.jquery.com/jquery-2.1.3.min.js
// ==/UserScript==
//set this if you want to have a max width for images
const MAX_WIDTH=1200;
const USE_MAX_WIDTH=false;
//ll breaks without noconflict jquery
this.$ = this.jQuery = jQuery.noConflict(true);
//livelinks compatiblity *JQUERY
//calls the function on each message-container in a document, including ones added by livelinks
function livelinks(func,extraParams){
if(extraParams==undefined)
extraParams=null;
//run the function on the message-containers currently on the page
$('#u0_1 .message-container').each(function(i,container){
func(container,extraParams);
});
//run it on any message-containers added in the future
$('#u0_1').on(
'DOMNodeInserted',
extraParams,
function(e){
if($(e.target).children('.message-container').length){
$(e.target).children('.message-container').each(function(i,container){
func(container,e.data);
});
}
}
);
}
//adds a style to a document and returns the style object *JQUERY
//css is a string, id is an optional string that determines the object's id
function addStyle(css,id){
//create a style
var style=$('<style type="text/css">');
//add the css data to it
style.html(css);
if(id){
//remove any style that has our id
$('#'+id).remove();
//give our style the id after removing the other stuff. idk if it matters, but i'm too lazy to find out
style.attr('id',id);
}
//add the style into the head
$('head').append(style);
//we're outta here
return style;
}
//if the image is a side stretcher, fix it
function getSmall(place){
//need all the unloaded images
var images=$(place).find('.img-placeholder');
images.each(function(i,img){
img=$(img);
var imgWidth=img.width();
//this image is too big
if(imgWidth>pageWidth){
var ratio=img.height()/imgWidth;
var id=img.attr('id');
var css='\n\
.message #'+id+', .message #'+id+' > img{\n\
max-width:'+pageWidth+'px;\n\
max-height:'+parseInt(pageWidth*ratio)+'px;\n\
}\
';
addStyle(css,'imgWidth_'+id);
}
});
}
//get width of userbar and subtract junk from it
var pageWidth=$('.userbar').width();
pageWidth-=6;
//if we've got avatars on
if($('.userpic').length>0){
pageWidth-=156;
}
//if we are using a max width, make sure it's not smaller than the page width
if(USE_MAX_WIDTH&&pageWidth>MAX_WIDTH){
pageWidth=MAX_WIDTH;
}
livelinks(getSmall);