Page Index Toggle Pages: [1] 2  Send TopicPrint
Very Hot Topic (More than 25 Replies) Improved CODE Boxes (Read 11836 times)
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
Improved CODE Boxes
May 21st, 2004 at 3:08pm
Print Post  
This mod limits the height of the code boxs which are used by the [ code ] tag and adds scrollbars if necessary. It also displays linebreaks and tabs properly, the code text is no longer wrapped if a line is too long. Instead a scrollbar is used.

This will improve the readability of the code boxes and long threads.



If you're looking for an example, check out forum.boardmod.org

Version History:
v2.1a:
  - made compatible with SP1.3.2 and SP1.4
v2.1:
  - fixed   turning into normal space when using the preview button (note: this bug has nothing todo with this mod, it's a general yabb bug)
v2.0:
  - completely rewritten, now supports all browsers, now IE will no longer wrap long lines too
  - fixed display of <TAB> characters (not only inside [ code ] tags!)
v1.1:
  - use white-space:wrap for Safari
  - removed modification of language file, no longer needed Wink
v1.0:
  - initial release


Here are some examples:
Code
Select All
this is a small code box
yes it is... ;-) 



Code
Select All
this is a medium code box
ok let's make this line a little bit longer 1 2 3 4 5 6 7 8 9 0  1 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 0... 




Code
Select All
this is a large code box
ok let's make this line a little bit longer 1 2 3 4 5 6 7 8 9 0  1 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 01 2 3 4 5 6 7 8 9 0...
Some code showing the fixed <TAB>s...

sub LastPost {
	fopen(FILE, "$vardir/cat.txt");
	@categories = <FILE>;
	fclose(FILE);

	# Load Censor List
	&LoadCensorList;

	%data= ();
	foreach $curcat (@categories) {
		$curcat =~ s/[\n\r]//g;
		fopen(CAT, "$boardsdir/$curcat.cat");
		$curcatname = <CAT>;
		$curcataccess = <CAT>;
		@catboards = <CAT>;
		fclose(CAT);
		chomp $curcatname;
		chomp $curcataccess;
		%membergroups = ();
		foreach(split(/\,/,$curcataccess)) {
			$membergroups{$_} = $_;
		}
		if($curcataccess) {
			if($settings[7] ne 'Administrator' && !exists $membergroups{$settings[7]}) { next; }
		}
		foreach $curboard (@catboards ) {
			chomp $curboard;
			fopen(BOARDDATA, "$boardsdir/$curboard.txt");
			$message = <BOARDDATA>;
			fclose(BOARDDATA);

			($mnum, $msub, $dummy, $dummy, $datetime, $mreplies) = split(/\|/, $message);
			$mydatetime = &timeformat($datetime);

			foreach (@censored) {
				($tmpa,$tmpb) = @{$_};
				$message =~ s~\Q$tmpa\E~$tmpb~gi;
				$msub =~ s~\Q$tmpa\E~$tmpb~gi;
			}
			if($recentsender eq "admin") {
				$post = qq~"<a href="$scripturl?board=$curboard;action=display;num=$mnum;start=$mreplies#$mreplies">$msub</a>" &#171; $mydatetime &#187;\n~;
			} else {
				$post = qq~<BR>$txt{'235'}: <a href="$cgi$curboard;action=display;num=$mnum;start=$mreplies#$mreplies"><B>$msub</B></a> ($mydatetime)<BR>$txt{'791'} <A href="$scripturl?action=recent">$txt{'792'}</a> $txt{'793'}~;
			}
			$totaltime = stringtotime($datetime);
			$data{$totaltime}= $post;
		}
	}

	@num = sort {$b <=> $a } keys %data;
	$yymain .= "$data{$num[0]}";
} 

« Last Edit: Dec 19th, 2004 at 12:02am by Administrator »  

improved_code_boxes_v21.mod (Attachment deleted)

The Administrator.
Back to top
WWW  
IP Logged
 
Dam Yankee
God Member
*****
Offline



Posts: 1538
Location: Maryville
Joined: Jun 13th, 2003
Gender: Female
Re: Improved CODE Boxes
Reply #1 - May 21st, 2004 at 3:55pm
Print Post  
Thank you for installing this mod on here.   Grin
  
Back to top
WWW  
IP Logged
 
LoonyPandora
God Member
*****
Offline


Daft Cow?

Posts: 1705
Location: London
Joined: Jun 27th, 2002
Gender: Male
Re: Improved CODE Boxes
Reply #2 - May 21st, 2004 at 4:26pm
Print Post  
Michael - You may wish to add a max-width style, or even just a width style to the code div - it doesn't quite work in safari - your medium code box doesn't have scroll bars, and your big one does have scroll bars in both axis - but there isn't much to scroll.

Just a thought - if you need me to test, let me know Smiley
  

Apple Technical Support
Code
Select All
#!/usr/bin/perl --
($sig ='ddiissjjttuuffss ddaoouu ssffaee uuiijjtt
jj ssvvmmff auu qqffssmm ttmmaoohhjjoohh nnauuddiifftt')
=~y~b-v~a-z~s;
print $sig; 

Back to top
WWWICQ  
IP Logged
 
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
Re: Improved CODE Boxes
Reply #3 - May 21st, 2004 at 11:05pm
Print Post  
LoonyPandora wrote on May 21st, 2004 at 4:26pm:
Michael - You may wish to add a max-width style, or even just a width style to the code div - it doesn't quite work in safari - your medium code box doesn't have scroll bars, and your big one does have scroll bars in both axis - but there isn't much to scroll.

Just a thought - if you need me to test, let me know Smiley

Hm what exactly do mean? I can't run safari for testing, I only have Konqueror which seems to display everything just fine...
  

The Administrator.
Back to top
WWW  
IP Logged
 
LoonyPandora
God Member
*****
Offline


Daft Cow?

Posts: 1705
Location: London
Joined: Jun 27th, 2002
Gender: Male
Re: Improved CODE Boxes
Reply #4 - May 21st, 2004 at 11:52pm
Print Post  
Attached are some screenshots. In Safari, a wide code box shows as it did before - very wide forcing the screen to scroll sideways - other browsers (firefox, IE) - don't stretch the code box, just put the scrollbars on it as you would expect.

Safari applies the overflow auto attribute, and gives the box scrollbars., but for some unknown reason it still stretches the layout if the box is too wide... after a bit of stretching, it then decides to show the scrollbars... so I end up with a very wide code box, with scrollbars, which kind of defeats the object - It's a safari bug I guess, but I would think putting a max-with attribute in the code div tag would make safari work... possibly Undecided

The safari screenshot is cropped to the far-right of my screen, as I can't get the whole code box on screen at once - if you imagine how wide code-boxes used to look, and then add scrollbars, that's what I get in Safari.

If you want to try putting a max-width tag in, I'll be happy to test it out... if that doesn't work, I'll perform some tests of my own, and you could update the mod when I have a fix... if you like Undecided
  

Loony-screenie2.jpg ( 34 KB | Downloads )
Loony-screenie2.jpg

Apple Technical Support
Code
Select All
#!/usr/bin/perl --
($sig ='ddiissjjttuuffss ddaoouu ssffaee uuiijjtt
jj ssvvmmff auu qqffssmm ttmmaoohhjjoohh nnauuddiifftt')
=~y~b-v~a-z~s;
print $sig; 

Back to top
WWWICQ  
IP Logged
 
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
Re: Improved CODE Boxes
Reply #5 - May 22nd, 2004 at 11:47am
Print Post  
Hm ok let's try this: remove step 1 and modify step 2 to this:

Code
Select All
<search for>
		$_ = $txt{'706'};
</search for>

<add after>
		# count lines in code
		$linecount = () = $code =~ /\n/g;
		# note: nowrap doesn't work properly in IE, so we have to use white-space:wrap instead
		if ($ENV{'HTTP_USER_AGENT'} =~ /msie/i && $ENV{'HTTP_USER_AGENT'} !~ /opera/i && $ENV{'HTTP_USER_AGENT'} !~ /webtv/i ) {
			$wrap = "wrap";
		} else {
			$wrap = "nowrap";
		}
		# if more that 25 lines then limit code box height
		if ($linecount > 25) {
			$height = "height: 300px;";
		} else {
			$height = "";
		}
		$code = qq~<div style="white-space:$wrap; width: 100%; $height overflow: auto;">$code</div>~;
</add after> 



I don't know if that helps... if not we may have to modify it so that only mozilla and opera use the linebreak-fix code as those are the only browsers where it works for sure.
  

The Administrator.
Back to top
WWW  
IP Logged
 
Tea-Master
Forum Administrator
*****
Offline



Posts: 1945
Location: north germany
Joined: Oct 21st, 2001
Gender: Male
Re: Improved CODE Boxes
Reply #6 - May 23rd, 2004 at 10:11pm
Print Post  
very nice work, michael. the mod lets look the code-boxes much nicer Smiley
  
Back to top
WWW  
IP Logged
 
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
Re: Improved CODE Boxes
Reply #7 - May 27th, 2004 at 10:01pm
Print Post  
thx Torsten Smiley

I've uploaded v1.1 which will wrap lines in Safari now. I also modified the code a bit so that the step modifying the language file is no longer required.
  

The Administrator.
Back to top
WWW  
IP Logged
 
..:X.T.C:..
Forum Administrator
*****
Offline


I love YaBB Forum!

Posts: 656
Location: Spittal
Joined: Dec 22nd, 2002
Gender: Male
Re: Improved CODE Boxes
Reply #8 - Jun 5th, 2004 at 5:05pm
Print Post  
Hi

Is there also a way ... to changes the displayed code with original "[TAB`s]"

At this time ... a code in the "codebox"  is not the same as in the script file ....

lg XTC
  

Back to top
WWW  
IP Logged
 
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
Re: Improved CODE Boxes
Reply #9 - Jun 5th, 2004 at 9:45pm
Print Post  
I think something like that could be achieved with the <pre> html tag. Currently YaBB does not make use of this tag, it converts code to normal html itself. Of course this code could be modified to display the tabs correctly too.
  

The Administrator.
Back to top
WWW  
IP Logged
 
..:X.T.C:..
Forum Administrator
*****
Offline


I love YaBB Forum!

Posts: 656
Location: Spittal
Joined: Dec 22nd, 2002
Gender: Male
Re: Improved CODE Boxes
Reply #10 - Jun 11th, 2004 at 5:50am
Print Post  
Hi

Quote:
Of course this code could be modified to display the tabs correctly too.


I think that would be a gread feature, particularly for forums where many code to be posted  Roll Eyes

e.g. here in the Boardmod forum!

lg XTC
  

Back to top
WWW  
IP Logged
 
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
Re: Improved CODE Boxes
Reply #11 - Jun 11th, 2004 at 8:59am
Print Post  
Agreed, maybe I'll look into it when I get the time.
  

The Administrator.
Back to top
WWW  
IP Logged
 
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
Re: Improved CODE Boxes
Reply #12 - Jul 9th, 2004 at 4:13pm
Print Post  
There we go, version 2 has been released. This will fix your tabs problem too.
  

The Administrator.
Back to top
WWW  
IP Logged
 
..:X.T.C:..
Forum Administrator
*****
Offline


I love YaBB Forum!

Posts: 656
Location: Spittal
Joined: Dec 22nd, 2002
Gender: Male
Re: Improved CODE Boxes
Reply #13 - Jul 9th, 2004 at 8:32pm
Print Post  
Hi

Quote:
This will fix your tabs problem too.

S U P E R  Cheesy

lg XTC
  

Back to top
WWW  
IP Logged
 
..:X.T.C:..
Forum Administrator
*****
Offline


I love YaBB Forum!

Posts: 656
Location: Spittal
Joined: Dec 22nd, 2002
Gender: Male
Re: Improved CODE Boxes
Reply #14 - Jul 10th, 2004 at 3:14am
Print Post  
Hi Michael

@Thread
Have you also Update the download attach?

I have install now this mod ...... but the "tab-space" not work on my Board!?

Here on BoardMod it works very nice

lg XTC
  

Back to top
WWW  
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint