Alternate 'code' code

Snitz™ Forums 2000
https://forum.snitz.com/forumTopic/Posts/59445?pagenum=1
05 November 2025, 02:12

Topic

MarcelG
Alternate 'code' code
15 September 2005, 19:17


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-<

 

Replies ...

HuwR
15 September 2005, 19:31


I'm pretty sure there are or atleast were a couple of mods that did this<
MarcelG
15 September 2005, 19:34


Mmmm...You're sure? Including the lack of vertical scrollbar, and the 'expand' button ?
/me dives into the search. bigsmile<
HuwR
15 September 2005, 19:36


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
15 September 2005, 19:40


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
15 September 2005, 19:57


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 (?).<
HuwR
15 September 2005, 20:03


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 %>;
	}
<
HuwR
15 September 2005, 20:08


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
15 September 2005, 20:11


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
15 September 2005, 20:13


you might want to move this to the W Code forum now smile<
MarcelG
16 September 2005, 03:14


Thanks! I'll give it a try in a minute or so!<
MarcelG
16 September 2005, 05:51


I've implemented it on oxle for the CMD box ; but it didn't work right away in FireFox. So, after a bit of Googling and fiddling, this is what I came up with:
http://www.oxle.com/topic.asp?TOPIC_ID=3115

Now the style changer javascript thingy... bigsmile

<
HuwR
16 September 2005, 06:39


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

Code:

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
Code:
<a href="#" onclick="javascript:togglewrap()">click</a>
<
MarcelG
16 September 2005, 07:18


Thanks for that. It's not exactly doing what I expected. But never mind, that's something for after the weekend. tongue
I now use this style for the code:
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:
Code:
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. wink<
Shaggy
16 September 2005, 07:20


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.
<
OBmoderator
16 January 2007, 14:04


here is what I understand:
replace the code tags in inc_func_common.asp with this:
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) = "
"
    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) = "
"
    CodeTags(2,1,2) = CodeTags(1,1,2)
    CodeTags(2,2,2) = CodeTags(1,2,2)
    CodeTags(3,1,1) = CodeTags(3,2,1)
    CodeTags(3,1,2) = "<div id=""scrollcode"" class=""scrollcode""><pre>"
    CodeTags(3,2,2) = "</pre></div id=""scrollcode"">"
    CodeTags(4,1,1) = CodeTags(4,2,1)
    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
Did it and no errors.
Add the following to inc_func_posting.asp:
Code:

 fString = replace(fString, "<div id=""scrollcode"" class=""scrollcode""><pre>","", 1, -1, 1)
         fString = replace(fString, "</pre></div id=""scrollcode"">","", 1, -1, 1)
below
Code:

fString = replace(fString, "<pre id=""code""><font face=""courier"" size=""" & strDefaultFontSize & """ id=""code"">","
Code:
", 1, -1, 1)
         fString = replace(fString, "</font id=""code""></pre id=""code"">","
", 1, -1, 1)
Did it No problems. add the following:
Code:

.scrollcode
   {
      height:200;
      width:650;
      overflow:scroll;
      color:#<%= strDefaultFontColor %>;
      background-color:#<%= strAltForumCellColor %>;
      border : thin solid #<%= strTableBorderColor %>;
      font : 9pt #<%= strDefaultFontFace %>;
   }
to the style section of inc_header.asp
did it and it errors out. here is the edited file with the instructed inclusion:
Code:

"<style type=""text/css"">" & vbNewLine & _
      "<!--" & vbNewLine & _
      .scrollcode
   {
      height:200;
      width:650;
      overflow:scroll;
      color:#<%= strDefaultFontColor %>;
      background-color:#<%= strAltForumCellColor %>;
      border : thin solid #<%= strTableBorderColor %>;
      font : 9pt #<%= strDefaultFontFace %>;
   }
      "a:link    {color:" & strLinkColor & ";text-decoration:" & strLinkTextDecoration & "}" & vbNewLine & _
      "a:visited {color:" & strVisitedLinkColor & ";text-decoration:" & strVisitedTextDecoration & "}" & vbNewLine & _
      "a:hover   {color:" & strHoverFontColor & ";text-decoration:" & strHoverTextDecoration & "}" & vbNewLine & _
      "a:active  {color:" & strActiveLinkColor & ";text-decoration:" & strActiveTextDecoration & "}" & vbNewLine & _
      ".spnMessageText a:link    {color:" & strForumLinkColor & ";text-decoration:" & strForumLinkTextDecoration & "}" & vbNewLine & _
      ".spnMessageText a:visited {color:" & strForumVisitedLinkColor & ";text-decoration:" & strForumVisitedTextDecoration & "}" & vbNewLine & _
      ".spnMessageText a:hover   {color:" & strForumHoverFontColor & ";text-decoration:" & strForumHoverTextDecoration & "}" & vbNewLine & _
      ".spnMessageText a:active  {color:" & strForumActiveLinkColor & ";text-decoration:" & strForumActiveTextDecoration & "}" & vbNewLine & _
      ".spnSearchHighlight {background-color:" & strSearchHiLiteColor & "}" & vbNewLine & _
      ".dft{font-family: " & strDefaultFontFace & "; font-size: 10pt}" & VBNewline & _
      ".media {margin:1px; padding:0px; float: left; width: auto;border:1px solid black;font-family: ""Verdana"", ""Lucida Sans Unicode"", ""sans-serif""; font-size: 9pt;color:" & strDefaultFontColor & ";}" & vbNewline & _
      ".break {display:block;clear:both;}" & vbNewline & _
      "input.radio {background:" & strPopUpTableColor & ";color:#000000}" & vbNewLine & _
      "-->" & vbNewLine & _
      "</style>" & vbNewLine & _

What did I do wrong?<
MarcelG
17 January 2007, 05:47


OBModerator ; the code you're trying to put in inc_header.asp (below in RED) is HTML. You trying to post it inbetween ASP without ending the ASP first.
Code:
     "<!--" & vbNewLine & _
      .scrollcode
   {
      height:200;
      width:650;
      overflow:scroll;
      color:#<%= strDefaultFontColor %>;
      background-color:#<%= strAltForumCellColor %>;
      border : thin solid #<%= strTableBorderColor %>;
      font : 9pt #<%= strDefaultFontFace %>;
   }
      "a:link
Convert it to response.writes first:
Replace the red part with this:
Code:
"	.scrollcode" & vbNewLine & _
"		height:200;" & vbNewLine & _
"		width:650;" & vbNewLine & _
"		overflow:scroll;" & vbNewLine & _
"		color:#" & strDefaultFontColor & ";" & vbNewLine & _
"		background-color:#" & strAltForumCellColor & ";" & vbNewLine & _
"		border : thin solid #" & strTableBorderColor & ";" & vbNewLine & _
"		font : 9pt #" & strDefaultFontFace & ";" & vbNewLine & _
"	}" & vbNewLine & _
<
OBmoderator
17 January 2007, 06:24


Thanks Marcel,
I still don't get the boxes like here. Is it possible to repost the mod again in it's entirety?
I must be missing something<
MarcelG
18 January 2007, 01:28


The boxes like here are completely different, and they're not made using the code I provided.<
OBmoderator
18 January 2007, 08:18


well this code doesn't seem to work on my forum I get scrollcode in the brackets with the content but no boxes

Marcell do you have a mod that will accomplish the same thing? I'm looking at yours above and it seems just two changes. One goes in the inc-header.asp (I think)
not sure where the other goes<
Shaggy
18 January 2007, 08:26


This is a replacement for the [code] tag, it does not add a new tag to your forum.
<
OBmoderator
18 January 2007, 09:11


OK let me get back to the beginning....... I want the boxes showing in my forum like above. How do I do it? I have tried using the "replacements" mentioned by HuwR and Marcel
but it doesn't work. what I get is the words scrollcode and /scrollcode in the [ ] brackets with the code visible
After I use the "replacements" and try using the normal code tages I get the same look. but I get the words code and /code in the [ ] brackets<
MarcelG
19 January 2007, 13:51


OBmoderator, this mod does not provide you with the tags [scrollcode][/scrollcode]. Instead, it provides you an alternate method of displaying the normal [code] tags.<
MarcelG
19 January 2007, 14:18


Instructions for this mod have been updated for 3.4.06.
The updated mod is available here.<
NiteOwl
28 December 2007, 13:26


Interesting, I followed the instructions to a "t" that were provided by MarcelG and I too now have the words scrollcode and /scrollcode in the [ ] brackets with all the code visible and also when I use the normal code tags I get the words code and /code in the [ ] brackets.
I have only edited the inc_header_short, the inc_header and the inc_function_common

I have backed out the inc_function_common changes for now, and my code/code functions properly again, I too would like to have the scrollcode/scrollcode abilities just like SNiTZ. I suspect that a step has been left out or something from the link provided?? or is it because I am using SNiTZ 3.4.05
<
MarcelG
28 December 2007, 13:54


NiteOwl, my mod changes the way the CODE tags look once posted...it does not add the scrollcode tags. If you post something like this, it should work as normal.
But, if you post this, you'll definitely get the scrollcode text, cause my function does not do anything with the [scrollcode] tag

If you want the codeboxes as shown here on Snitz.com, you should follow Huw's post on the previous page.<
NiteOwl
28 December 2007, 18:15


Oh, thank you MargelG I thought this was designed to incorporate the scrollcode into the forum similar to what the SNiTZ forum has, so that I can post code and have the scrollable windo, I will open a new topic, (after a search of course) to find out how to bring in the scrollcode to my forum. <
top
02 May 2012, 07:34


Thank you works well now
And I was there in addition to not copy the text Topics forum
How can working copy the text Only in the context text[/scrollcode
© 2000-2021 Snitz™ Communications