| Author |
 Topic  |
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
 Posted - 15 September 2005 : 19:17:27
|
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. 
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 |
Edited by - MarcelG on 25 February 2009 10:37:20 |
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 15 September 2005 : 19:31:03
|
| I'm pretty sure there are or atleast were a couple of mods that did this< |
 |
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
Posted - 15 September 2005 : 19:34:43
|
Mmmm...You're sure? Including the lack of vertical scrollbar, and the 'expand' button ?
/me dives into the search.  < |
portfolio - linkshrinker - oxle - twitter |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 15 September 2005 : 19:36:53
|
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
< |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 15 September 2005 : 19:40:26
|
| not the expand button no, but that wouldn't be too difficult to add, it is just some javascript which changes a style attribute< |
|
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
Posted - 15 September 2005 : 19:57:34
|
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 |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 15 September 2005 : 20:03:55
|
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)
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
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
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
.scrollcode
{
height:200;
width:650;
overflow:scroll;
color:#<%= strDefaultFontColor %>;
background-color:#<%= strAltForumCellColor %>;
border : thin solid #<%= strTableBorderColor %>;
font : 9pt #<%= strDefaultFontFace %>;
}
< |
Edited by - HuwR on 15 September 2005 20:06:14 |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 15 September 2005 : 20:08:42
|
| 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.< |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 15 September 2005 : 20:11:49
|
| 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< |
|
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 15 September 2005 : 20:13:28
|
you might want to move this to the W Code forum now  < |
|
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
|
|
HuwR
Forum Admin
United Kingdom
20584 Posts |
Posted - 16 September 2005 : 06:39:36
|
Ok, it's very rough and only tested with IE, but should give you the general idea.
create the following javascript function, and add it to inc_code.js
function togglewrap(){
if (document.getElementById('scrollcode').style.overflow == 'scroll'){
document.getElementById('scrollcode').style.overflow = ''
}else{
document.getElementById('scrollcode').style.overflow = 'scroll'
}
}
now you need to add the image or text link , you will need to do some changes to the new replacetags function so that your link comes before the div tag we added, in the links onclick event, just call the new function like so
<a href="#" onclick="javascript:togglewrap()">click</a> < |
|
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
Posted - 16 September 2005 : 07:18:40
|
Thanks for that. It's not exactly doing what I expected. But never mind, that's something for after the weekend. 
I now use this style for the code:
".code {margin-left: 15pt;margin:0px; padding:4px; border:1px inset; width:550px; height:auto; overflow-x:scroll;overflow-y:auto; overflow: -moz-scrollbars-horizontal;background-color:" & strAltForumCellColor & ";font-family: Courier New, Courier, Monaco, mono; font-size: 11px;color:" & strDefaultFontColor & ";}" & vbNewLine & _
So, I changed the togglewrap function to this:
function togglewrap(){
if (document.getElementById('code').style.overflow-x == 'scroll'){
document.getElementById('code').style.overflow-x = ''
}else{
document.getElementById('code').style.overflow-x = 'scroll'
}
}When I click the 'expand' link, I get back to the top of the page, and that's it.
But, as I said, I'm in no hurry.  < |
portfolio - linkshrinker - oxle - twitter |
|
|
|
Shaggy
Support Moderator
Ireland
6780 Posts |
Posted - 16 September 2005 : 07:20:39
|
Just so you know, overflow-x and overflow-y are only supported by IE at the moment.
Also, to prevent the junp to the top of the page add return false; before closing the togglewrap() function.
< |
 Search is your friend
“I was having a mildly paranoid day, mostly due to the
fact that the mad priest lady from over the river had
taken to nailing weasels to my front door again.” |
|
|
|
OBmoderator
New Member
98 Posts |
Posted - 16 January 2007 : 14:04:04
|
here is what I understand:
replace the code tags in inc_func_common.asp with this:
Did it and no errors.
Add the following to inc_func_posting.asp:
below
Did it No problems.
add the following:
to the style section of inc_header.asp
did it and it errors out.
here is the edited file with the instructed inclusion:
What did I do wrong?< |
Edited by - OBmoderator on 16 January 2007 14:19:48 |
|
|
|
Topic |
|
|
|
Alternate 'code' code
