Code/PHP-Tag

Code:

.codetag {
    width: 95%;
}

=>

Code:

.codetag {
    width: 95%;
    max-width: 700px;
}

Code:

 PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE PLEASE 

Zitat von ill

ist dir das auch gerade in meinem Thread ungut aufgefallen?

[x] dafür

Ja schon öfter aber grad extrem

update damits mit dem neuen attachment-viewer funkt

Code: PHP

// ==UserScript==
// @name overclockers.at width limiter
// @namespace at.overclockers
// @description limit code-block & image width on overclockers.at to prevent horizontal scroll bars
// @exclude 
// @include [url]http://overclockers.at/*[/url]
// @include [url]http://*.overclockers.at/*[/url]
// ==/UserScript==

var maxwidth = 700;
var MAJOR = "at.overclockers.limitwidth";
// [url]http://joanpiedra.com/jquery/greasemonkey/[/url]
var $;

// Add jQuery
(function(){
    if (typeof unsafeWindow.jQuery == 'undefined')
    {
        var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
            GM_JQ = document.createElement('script');
        
        GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
        GM_JQ.type = 'text/javascript';
        GM_JQ.async = true;
        
        GM_Head.appendChild(GM_JQ);
    }
    GM_wait();
})();

// Check if jQuery's loaded
function GM_wait() {
    if (typeof unsafeWindow.jQuery == 'undefined')
    {
        window.setTimeout(GM_wait, 100);
    }
    else
    {
        $ = unsafeWindow.jQuery.sub();
        letsJQuery();
    }
}

// All your GM code must be inside this function
function letsJQuery()
{
    var codetags = $('.codetag');
    codetags.css("max-width", "700px");
    
    var images = $('table.content table table table .nf img[src^="/attachment.php"]');
    images.replaceWith(function(i, html){
        if($(this).width() > maxwidth)
        {
            var cc = document.createElement("div");
            $(cc).css("max-width", maxwidth+"px");
            $(cc).css("overflow-x", "auto");
            $(cc).append($(this).clone());
            return cc;
        }
        return $(this).clone();
    });
    
}

Oder das Attachment verwenden (Endung in .user.js ändern und File in den Firefox ziehen)

Die Code-Tags auf eine fixe Breite zu beschränken ist gängige Taktik in Foren, anders kann man die gar nicht (ohne JS) so einschränken wie es sinnvoll wäre.


Und das Problem mit dem Viewer war komplett selbstgebaut von mir
Ich hatte mir schnell ausm Netz ein Stück Code gesucht welches jQuery in Greasemonkey Scripts einbinden kann - Was zwar recht simpel is wenn man's weiß wie's geht aber wenn nicht...

Jedenfalls kA was der Typ sich dabei dachte der das Snippet geschrieben hat aber der Code hat die Funktion "jQuery.noConflict(true)" ausgeführt, was im Endeffekt bewirkt dass die Variable $ gelöscht wird, und halt auch bedeutet dass damit jegliches jQuery das auf der Seite schon läuft nimmer geht.
Das hab ich bereinigt

Sinnvollerweise wäre dann das CSS das Fallback


Hier GM Script mit dynamischer Breite, feel free to copy. War einfacher als erwartet mit jQuery

Code: PHP

// ==UserScript==
// @name overclockers.at width limiter
// @namespace at.overclockers
// @description limit code-block & image width on overclockers.at to prevent horizontal scroll bars
// @exclude 
// @include http://overclockers.at/*
// @include http://*.overclockers.at/*
// ==/UserScript==

var maxwidth = 600;
var MAJOR = "at.overclockers.limitwidth";
// http://joanpiedra.com/jquery/greasemonkey/
var $;

// Add jQuery
(function(){
	if (typeof unsafeWindow.jQuery == 'undefined')
	{
		var GM_Head = document.getElementsByTagName('head')[0] || document.documentElement,
		  GM_JQ = document.createElement('script');

		GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
		GM_JQ.type = 'text/javascript';
		GM_JQ.async = true;

		GM_Head.appendChild(GM_JQ);
	}
	GM_wait();
})();

// Check if jQuery's loaded
function GM_wait() {
	if (typeof unsafeWindow.jQuery == 'undefined')
	{
		window.setTimeout(GM_wait, 100);
	}
	else
	{
		$ = unsafeWindow.jQuery.sub();
		letsJQuery();
	}
}

// All your GM code must be inside this function
function letsJQuery()
{
	$(window).resize(function() {
		var codetags = $('.codetag');
		codetags.each(function(i, e) {
			$(e).css("width", $(e).parent().width()*.9+"px");
		})
		var images = $('.GM_ImageWidthLimit');
		images.each(function(i, e) {
			$(e).css("max-width", $(e).parent().parent().width()*.9+"px");
		})
	});
 
	var codetags = $('.codetag');
 	codetags.css("width", maxwidth+"px");
   
	var images = $('table.content table table table .nf img[src^="/attachment.php"]');
	images.replaceWith(function(i, html){
		if($(this).width() > maxwidth)
		{
			var cc = document.createElement("div");
			$(cc).addClass("GM_ImageWidthLimit")
			$(cc).css("max-width", maxwidth+"px");
			$(cc).css("overflow-x", "auto");
			$(cc).append($(this).clone());
			return cc;
		}
		return $(this).clone();
	});

	codetags.each(function(i, e) {
		$(e).css("width", $(e).parent().width()*.9+"px");
	})
	images.each(function(i, e) {
		$(e).css("max-width", $(e).parent().parent().width()*.9+"px");
	})
}