Code/PHP-Tag

Seite 1 von 1 - Forum: Community Hub auf overclockers.at

URL: https://www.overclockers.at/community-hub/code-php-tag_224757/page_1 - zur Vollversion wechseln!

watchout schrieb am 22.06.2011 um 11:44

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

ill schrieb am 22.06.2011 um 11:47

ist dir das auch gerade in meinem Thread ungut aufgefallen?

[x] dafür

watchout schrieb am 22.06.2011 um 11:48

Zitat von ill
ist dir das auch gerade in meinem Thread ungut aufgefallen?

[x] dafür

Ja schon öfter aber grad extrem

watchout schrieb am 24.06.2011 um 13:17

Bis mat die Zeit hat das CSS zu ändern, da ein kleines Script für Greasemonkey:

Code: PHP

// ==UserScript==
// @name overclockers.at Codeblock-Width
// @namespace at.overclockers
// @description limits code-block width on overclockers.at to 700px to prevent horizontal scroll bars
// @exclude 
// @include http://overclockers.at/*
// @include http://*.overclockers.at/*
// ==/UserScript==

// GM<=>jQuery : 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.insertBefore(GM_JQ, GM_Head.firstChild);
	}
	GM_wait();
})();

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

// All your GM code must be inside this function
function letsJQuery()
{
	var codetags = $('.codetag');
	codetags.css("max-width", "700px");
}

Weil ich grad dabei war: Greasemonkey-Script um auch die Bilder-Breite zu begrenzen!

Code: PHP

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

var maxwidth = 700;
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.insertBefore(GM_JQ, GM_Head.firstChild);
	}
	GM_wait();
})();

// Check if jQuery's loaded
function GM_wait() {
	if (typeof unsafeWindow.jQuery == 'undefined')
	{
		window.setTimeout(GM_wait, 100);
	}
	else
	{
		$ = unsafeWindow.jQuery.noConflict(true);
		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();
	});
	
}

watchout schrieb am 10.08.2011 um 15:16

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)

mat schrieb am 10.08.2011 um 16:28

Das Problem mit dem Code-Tag ist, dass es dann nur auf 700 Pixel reduziert wird. Auch schade, wenn der Monitor locker noch mehr Daten darstellen könnte. Aber stimmt ... wenn der Code nicht von alleine umbricht, dann zieht es das Code-Tag ewig raus. Ist halt die Frage, was hier unterm Strich besser ist.

Wo ist das Problem beim Attachment Viewer? 1000 Pixel in der Breite sollten sich mittlerweile auch auf Netbooks problemlos ausgehen. Deshalb werden jetzt speziell Bilder für diese Breite generiert. Warum 700 Pixel?

watchout schrieb am 10.08.2011 um 17:32

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

mat schrieb am 10.08.2011 um 19:47

Alles klar. Na ja, das Code-Tag hab ich mal auf 700px fix eingestellt. Whatever, vl mach ich ja noch ein JS-Fallback.

watchout schrieb am 12.08.2011 um 15:30

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");
	})
}