Alternate 'code' code - Posted (6145 Views)
MarcelG
Retired Support Moderator
MarcelG
Posts: 2625
2625
A problem we're seeing often (especially here at Snitz) is that wide pieces of code stretch the entire page to the right, and makes the topic hard to read.
Wouldn't it be possible to 'mimic' the code box as shown on this page (forgetting the line numbers, which I think aren't necessary and even confusing as they're often not the same as the actual line numbers).
I really like the effect they use to wrap the code, and provide the horizontal scroll bar. Another nifty thing is that when you click the little triangle next to 'code' (left above the actual code) the box expands. I think it's all done with some clever CSS, but unfortunately I cannot seem to actually _read_ the CSS they use. dead
UPDATE Instructions for this mod have been updated for 3.4.06.
The updated mod is available here. -edit 25/2/2009: updated link location-<
portfolio - linkshrinker - oxle - twitter
Last edited by MarcelG on 25 February 2009, 10:37
 Sort direction, for dates DESC means newest first  
 Page size 
Posted
HuwR
Forum Admin
HuwR
Posts: 20611
20611
I'm pretty sure there are or atleast were a couple of mods that did this<
Posted
MarcelG
Retired Support Moderator
MarcelG
Posts: 2625
2625
Mmmm...You're sure? Including the lack of vertical scrollbar, and the 'expand' button ?
/me dives into the search. bigsmile<
portfolio - linkshrinker - oxle - twitter
Posted
HuwR
Forum Admin
HuwR
Posts: 20611
20611
I have some code which does this, if you are interested I will post it, it id fairly basic but gives you a scroll box instead of stretching the posts, I implemented it as a seperate forum tag called scrollcode so existing code tags stay the same, but it could be changed to work with existing code tags as well
<
Posted
HuwR
Forum Admin
HuwR
Posts: 20611
20611
not the expand button no, but that wouldn't be too difficult to add, it is just some javascript which changes a style attribute<
Posted
MarcelG
Retired Support Moderator
MarcelG
Posts: 2625
2625
I'm very much interested in that! Thanks!
Well, the actual reason I brought this up, is not so much for myself, but more for Snitz. Especially here at the site we see a lot of questions/posts which contain snippets of code, and due to the stretching, those topics tend to get a bit ... unreadable. So, besides actually creating the mod, my suggestion is to actually implement it into at least the forum here, and perhaps - for consistency - into the basecode of 3.4.05.1 (?).<
portfolio - linkshrinker - oxle - twitter
Posted
HuwR
Forum Admin
HuwR
Posts: 20611
20611
I'm pretty sure we had it in the code here at one time, but it probably got forgotten about and was overwritten in an update, anyway, here is the code.
In inc_func_common.asp replace your ReplaceCodeTags function with this one
(DON'T FORGET TO REMOVE THE SPACES IN MY CODE TAGS)

Code:

Function ReplaceCodeTags(fString)
    Dim oTag, cTag
    Dim roTag, rcTag
    Dim oTagPos, cTagPos
    Dim nTagPos
    Dim counter1, counter2
    Dim strCodeText
    Dim Tagcount
    Dim strTempString, strResultString
    TagCount = 4
    Dim CodeTags(4,2,2)
    Dim strArray, strArray2

    CodeTags(1,1,1) = "[code]"
    CodeTags(1,2,1) = "[/code]"
    CodeTags(1,1,2) = "<pre id=""code""><font face=""courier"" size=""" & strDefaultFontSize & """ id=""code"">"
    CodeTags(1,2,2) = "</font id=""code""></pre id=""code"">"

    CodeTags(2,1,1) = "[CODE]"
    CodeTags(2,2,1) = "[/CODE]"
    CodeTags(2,1,2) = CodeTags(1,1,2)
    CodeTags(2,2,2) = CodeTags(1,2,2)
	
    CodeTags(3,1,1) = "[scrollcode]"
    CodeTags(3,2,1) = "[/scrollcode]"
    CodeTags(3,1,2) = "<div id=""scrollcode"" class=""scrollcode""><pre>"
    CodeTags(3,2,2) = "</pre></div id=""scrollcode"">"

    CodeTags(4,1,1) = "[SCROLLCODE]"
    CodeTags(4,2,1) = "[/SCROLLCODE]"
     CodeTags(4,1,2) = CodeTags(3,1,2)
     CodeTags(4,2,2) = CodeTags(3,2,2)

     strResultString = ""
     strTempString = fString

     for counter1 = 1 to TagCount

         oTag   = CodeTags(counter1,1,1)
         roTag  = CodeTags(counter1,1,2)
         cTag   = CodeTags(counter1,2,1)
         rcTag  = CodeTags(counter1,2,2)
 		oTagPos = InStr(1, strTempString, oTag, 1)
 		cTagPos = InStr(1, strTempString, cTag, 1)

 		if (oTagpos > 0) and (cTagPos > 0) then
 		 	strArray = Split(strTempString, oTag, -1)
 		 	for counter2 = 0 to Ubound(strArray)
 		 		if (Instr(1, strArray(counter2), cTag) > 0) then
 		 			strArray2 = split(strArray(counter2), cTag, -1)
					strCodeText = trim(strArray2(0))
 					strCodeText = replace(strCodeText, "<br />", vbNewLine)
 		 			strResultString = strResultString & roTag & strCodeText & rcTag & strArray2(1)
 		 		else
 		 			strResultString = strResultString & strArray(counter2)
 		 		end if	
 		 	next  

			strTempString = strResultString
 			strResultString = ""
 		end if
	next

	ReplaceCodeTags = strTempString
end function

in inc_func_posting.asp, add the following 2 lines of code
Code:

	fString = replace(fString, "<div id=""scrollcode"" class=""scrollcode""><pre>","[scrollcode]", 1, -1, 1)
	fString = replace(fString, "</pre></div id=""scrollcode"">","[/scrollcode]", 1, -1, 1)
to the cleancode function, it should go after the
Code:

	fString = replace(fString, "<pre id=""code""><font face=""courier"" size=""" & strDefaultFontSize & """ id=""code"">","[code#93", 1, -1, 1)
	fString = replace(fString, "</font id=""code""></pre id=""code"">","[/code#93", 1, -1, 1)
but before the end if.
Finally add the following style definition to the style section in inc_header or to your style sheet if you use one

Code:

	.scrollcode
	{
		height:200;
		width:650;
		overflow:scroll;
		color:#<%= strDefaultFontColor %>;
		background-color:#<%= strAltForumCellColor %>;
		border : thin solid #<%= strTableBorderColor %>;
		font : 9pt #<%= strDefaultFontFace %>;
	}
<
Last edited by HuwR on 15 September 2005, 20:06
Posted
HuwR
Forum Admin
HuwR
Posts: 20611
20611
obviously you will need to adjust the css-style to fit your forum, the overflow:scroll is what does the scrolling, in IE you can set overflow-x and overflow-y seperately, but unsure if Firefox supports that.<
Posted
HuwR
Forum Admin
HuwR
Posts: 20611
20611
for the expand button you would need to add code to the two functions to draw the link, this should just call a javascript funcction which changes the "overflow" style of the scrollcode div<
Posted
HuwR
Forum Admin
HuwR
Posts: 20611
20611
you might want to move this to the W Code forum now smile<
Posted
MarcelG
Retired Support Moderator
MarcelG
Posts: 2625
2625
Thanks! I'll give it a try in a minute or so!<
portfolio - linkshrinker - oxle - twitter
You Must enter a message